Frontend Design HTML

Frontend Design HTML Skill

Create distinctive, production-grade HTML/CSS + vanilla JavaScript interfaces with high design quality. This skill combines the 5-dimension aesthetic framework with semantic HTML5, modern CSS, and CSS-only animations to build interfaces that are both beautiful and accessible.

Base Aesthetics Framework

Overview

This is the core 5-dimension framework for creating intentional, non-generic design that avoids the homogenized aesthetic of default AI outputs. Each dimension works together to create designs with personality and deliberation.

The Five Dimensions

1. Typography Dimension

Purpose: Typography is the primary carrier of voice and personality in digital design.

Core Principles:

• Typeface selection creates immediate emotional context
• Font pairings establish visual hierarchy and rhythm
• Weight and size extremes create contrast and emphasis
• Avoid: Inter, Roboto, Open Sans, Lato, system fonts (these are default AI outputs)
• Prefer: JetBrains Mono, Fira Code, Space Grotesk, Playfair Display, Crimson Pro, IBM Plex, Bricolage Grotesque

Implementation:

• Use high-contrast pairings: Display + Mono, Serif + Geometric Sans
• Employ weight extremes: 100/200 vs 800/900 (not mid-range weights)
• Apply size jumps of 3x or more, not incremental 1.5x steps
• Create visual hierarchy through deliberate typographic choices

Example Pattern:

• Display: Playfair Display (300, 400, 700)
• Body: IBM Plex Sans (400, 600)
• Mono: JetBrains Mono (400, 500)

2. Color & Theme Dimension

Purpose: Color sets mood and creates visual coherence while avoiding cliché palettes.

Core Principles:

• Move beyond default color systems (Material Design, Tailwind defaults)
• Use unexpected but harmonious color relationships
• Consider context: what emotional response do you want?
• Saturation and tone matter as much as hue

Anti-Patterns to Avoid:

• Primaries: Blue, Red, Green (default AI trinity)
• Neutrals: Pure grays (#999999, #CCCCCC) without personality
• Monochrome gradients that feel soulless
• Color palettes that match "flat design" clichés

Implementation:

• Define color intent: Is this a warm, cool, energetic, or calm system?
• Use color psychology intentionally
• Create contrast through saturation, not just hue
• Reserve one unexpected accent color for personality

Example Approach:

• Warm palette: Cognac browns, terracotta, warm neutrals with olive undertones
• Cool palette: Deep indigos, soft teals, cool grays with blue undertones
• Accent: Single unexpected color for UI elements (e.g., sulfur yellow, coral pink)

3. Motion Dimension

Purpose: Motion reveals personality and guides user attention with intentionality.

Core Principles:

• Motion should feel deliberate, not random
• Orchestrate page loads with staggered timing
• Use scroll triggers for engaged scrolling experiences
• Hover states should surprise, not just respond

Implementation for HTML/CSS:

• CSS-only animations with easing functions (ease-in-out, cubic-bezier)
• Page load: Stagger reveals with animation-delay (100ms, 200ms, 300ms)
• Scroll triggers: Use Intersection Observer API for elements animating in when viewport enters
• Hover: Add transforms, color shifts, or subtle scale changes

Anti-Patterns:

• Linear timing on everything (feels robotic)
• Instantaneous interactions (feels cold)
• Animation-heavy design that distracts from content

4. Spatial Composition Dimension

Purpose: Space and layout create rhythm and guide the eye through intentional composition.

Core Principles:

• Use asymmetrical layouts when possible (more interesting than grid-perfect)
• Create breathing room with generous whitespace
• Build visual rhythm through consistent spacing systems
• Avoid centered, symmetrical layouts unless purposeful

Implementation:

• Define a spacing scale: 8px, 12px, 16px, 24px, 32px, 48px, 64px
• Use odd-numbered layouts: 3-column, 5-item, 7-section
• Create focal points through compositional weight
• Consider micro-interactions within spatial relationships

Anti-Patterns:

• Everything centered (feels safe but predictable)
• Uniform padding everywhere
• Layouts that could describe "generic SaaS dashboard"

5. Backgrounds & Visual Details Dimension

Purpose: The foundation layer that can transform a generic design into something memorable.

Core Principles:

• Background should support, not distract
• Add subtle details that reward close observation
• Use gradients intentionally, not as default effects
• Create texture through digital or illustrated means

Implementation:

• Subtle gradients: Use 2-3 colors with minimal contrast (40-60° angles)
• Illustrated patterns: Geometric, organic, or custom SVG elements
• Texture overlays: Subtle noise or grain (2-5% opacity)
• Micro-illustrations: Small graphics that reinforce brand voice

Anti-Patterns:

• Bland white backgrounds (consider soft colors instead)
• Obvious gradients (rainbow, neon contrasts)
• Busy patterns that compete with content
• Decorative elements that serve no purpose

Anti-Generic-AI Guardrails

Use these checks to ensure your design doesn't default to generic AI output:

Typography Check:

• Does the typeface choice feel intentional or like a default?
• Are size jumps extreme (3x+) or incremental?
• Do font pairings create surprise and interest?

Color Check:

• Could this palette exist in a Material Design system?
• Do the colors feel chosen or randomly selected?
• Is there one unexpected accent color that creates personality?

Motion Check:

• Does animation feel orchestrated or reactive?
• Are timing curves deliberate or linear?
• Do hover states surprise or just respond?

Spatial Check:

• Is the layout asymmetrical or cookie-cutter centered?
• Does whitespace feel generous or cramped?
• Could the layout be described as "standard SaaS"?

Background Check:

• Is the background supporting or distracting?
• Are gradients subtle or obvious?
• Do visual details reward close observation?

Typography Guidance

Typefaces to Avoid

These fonts are ubiquitous in default AI outputs and should be rejected as your primary choice:

• Inter: Google's modern sans-serif, used everywhere in AI-generated design
• Roboto: Android's default, synonymous with generic design
• Open Sans: Neutral and safe, but overused
• Lato: Round and friendly, but lacks personality
• System fonts: Default OS fonts (SF Pro Display, Segoe UI) feel lazy

If you use any of these, pair them with something unexpected and deliberately break the generic pattern.

Typefaces to Prefer

These faces bring personality and intention to design:

Display & Decorative

• Playfair Display: Elegant serif, high contrast, sophisticated
• Bricolage Grotesque: Modern sans with personality, handcrafted feel
• Space Grotesk: Geometric sans with character, works for display or body
• Crimson Pro: High-contrast serif, literary and elegant

Body & Copy

• IBM Plex Sans: Humanist sans with warmth, works at all sizes
• Space Grotesk: Geometric sans that reads well in small sizes
• Crimson Pro: Serif for long-form content, distinctive personality

Monospace (Technical, Quotes, Code)

• JetBrains Mono: Designed for code, readable and stylish
• Fira Code: Open source, ligatures for programming
• IBM Plex Mono: Humanist monospace, readable at any size

Pairing Strategy

High-Contrast Pairings (Recommended)

Pattern 1: Display + Mono

Headline: Playfair Display (elegant serif)
Body: JetBrains Mono (technical monospace)
Result: Sophisticated + Modern

Pattern 2: Serif + Geometric Sans

Headline: Crimson Pro (high-contrast serif)
Body: Space Grotesk (geometric sans)
Result: Elegant + Contemporary

Pattern 3: Decorative + Humanist

Headline: Bricolage Grotesque (handcrafted sans)
Body: IBM Plex Sans (warm humanist sans)
Result: Crafted + Approachable

Avoid Sameness

Don't use two similar typefaces:

• ❌ Roboto Display + Roboto Body (feels flat)
• ❌ Inter + Open Sans (indistinguishable)
• ✅ Playfair Display + JetBrains Mono (creates contrast)

Font Weights & Extremes

Weight Strategy

Use weight extremes to create contrast, not mid-range weights:

Good:

• Display: 300 (thin) or 700/800 (heavy)
• Body: 400 (regular) or 600 (semi-bold)
• Emphasis: 800/900 for strong hierarchy

Avoid:

• Middle weights everywhere (400, 500, 500) feels muddled
• Limited weight range (only 400, 500, 600) lacks contrast
• No visual distinction between hierarchy levels

Size Jumps: Extreme Over Incremental

Size Scale Strategy

Use 3x+ jumps between hierarchy levels, not incremental 1.5x steps:

Generic (Linear Scaling):

H1: 48px
H2: 36px (75% of H1)
H3: 28px (78% of H2)
Body: 16px
Small: 14px

Result: Feels predictable, every size feels similar distance apart.

Intentional (3x+ Jumps):

Display: 96px (3x body)
Headline: 48px (3x body)
Sub-headline: 28px (1.75x body)
Body: 16px
Caption: 12px (0.75x body)

Result: Creates clear visual hierarchy, extreme sizes make smaller sizes feel intentional.

Implementation Rules

1. Start with body size (16px or 18px is standard)
2. Create display size as 4-6x body (64px-96px)
3. Create headline as 2-3x body (32px-48px)
4. All other sizes fall between these extremes
5. Use odd numbers when possible (not round 10px increments)

Example: 16px Base

• Display: 88px (5.5x)
• Headline: 48px (3x)
• Sub-headline: 28px (1.75x)
• Body: 16px (1x)
• Small: 13px (0.8x)

Line Height & Letter Spacing

Line Height Strategy

• Display (90px+): 1.0-1.1 (tight, confident)
• Headline (40px+): 1.1-1.2 (tight)
• Sub-headline (24px+): 1.2-1.3 (moderate)
• Body (14px-20px): 1.4-1.6 (loose for readability)
• Small text (<14px): 1.5-1.7 (extra loose for clarity)

Letter Spacing Strategy

• Display (90px+): -0.5 to -1px (negative space tightens)
• Headline (40px+): -0.25px (subtle tightening)
• Body: 0px (default)
• Emphasis/Caps: +0.5px to +1px (opens up all-caps)

CSS Font Stack Example

/* Display */
.display {
  font-family: 'Playfair Display', serif;
  font-size: 88px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

/* Headline */
.h1 {
  font-family: 'Playfair Display', serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.25px;
}

/* Body */
.body {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
}

/* Monospace (Code/Quotes) */
.mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.5px;
}

/* Small Text */
.caption {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0px;
}

Font Loading (Google Fonts)

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=IBM+Plex+Sans:wght@400;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Typography Checklist

• Have you rejected default fonts (Inter, Roboto, Open Sans, Lato)?
• Do your chosen typefaces create visual contrast?
• Are font sizes using 3x+ jumps or are they incremental?
• Do weights span the full range (300-900) or are they mid-range?
• Is there a clear hierarchy that's immediately visible?
• Does the pairing feel intentional, not accidental?
• Would you describe this typography as "generic" or "distinctive"?

Motion & Animation Guidance

Overview

Motion reveals personality and guides user attention with intentionality. Deliberate animation transforms passive interfaces into experiences that feel alive and considered.

Core Principles

1. Orchestration: Animations should feel planned, not random
2. Purpose: Every animation should serve a functional or emotional purpose
3. Timing: Easing functions matter more than duration
4. Context: Page loads, scrolls, and hovers each have different animation strategies

CSS Animations

Use CSS for simple, performant animations that run on page load or interaction:

Basic Fade-In

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.element {
  animation: fadeIn 0.6s ease-out;
}

Slide + Fade In

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.element {
  animation: slideInUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

Scale + Fade In

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.element {
  animation: scaleIn 0.5s ease-out;
}

Page Load Animation Strategy

Orchestrated Reveal

Don't animate everything at once. Create a sequence that guides the user's eye:

Timing Sequence

0ms    - Background/Hero fades in
200ms  - Headline slides in from top
400ms  - Sub-headline fades in
600ms  - Primary CTA appears
800ms  - Supporting content staggered reveal

CSS Implementation

.hero {
  animation: fadeIn 0.8s ease-out 0ms;
}

.headline {
  animation: slideInDown 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 200ms backwards;
}

.subheadline {
  animation: fadeIn 0.6s ease-out 400ms backwards;
}

.cta {
  animation: scaleIn 0.5s ease-out 600ms backwards;
}

.content-item {
  animation: slideInUp 0.8s ease-out backwards;
}

.content-item:nth-child(1) { animation-delay: 800ms; }
.content-item:nth-child(2) { animation-delay: 900ms; }
.content-item:nth-child(3) { animation-delay: 1000ms; }

Staggered Reveals

Using animation-delay (CSS)

Stagger elements to create a cascade effect:

.list-item {
  opacity: 0;
  animation: slideInUp 0.8s ease-out forwards;
}

.list-item:nth-child(1) { animation-delay: 0ms; }
.list-item:nth-child(2) { animation-delay: 100ms; }
.list-item:nth-child(3) { animation-delay: 200ms; }
.list-item:nth-child(4) { animation-delay: 300ms; }
.list-item:nth-child(5) { animation-delay: 400ms; }

Scroll Trigger Animations

Intersection Observer (Vanilla JS)

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add('animate-in');
      observer.unobserve(entry.target);
    }
  });
});

document.querySelectorAll('[data-animate]').forEach((el) => {
  observer.observe(el);
});

[data-animate] {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease-out;
}

[data-animate].animate-in {
  opacity: 1;
  transform: translateY(0);
}

Hover State Surprises

Hover interactions should be delightful, not just functional:

CSS Hover Animations

.card {
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
}

/* Icon rotation on hover */
.icon {
  transition: transform 0.3s ease-out;
}

.card:hover .icon {
  transform: rotate(45deg) scale(1.1);
}

/* Text color shift */
.link {
  color: #333;
  transition: color 0.3s ease-out;
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s ease-out;
}

.link:hover {
  color: #0099ff;
  border-bottom-color: #0099ff;
}

Easing Functions

Recommended Easing Values

• ease-out: 0.16, 0.04, 0.04, 1 (default snappy)
• ease-in-out: 0.42, 0, 0.58, 1 (smooth, balanced)
• elastic: cubic-bezier(0.34, 1.56, 0.64, 1) (playful overshoot)
• sharp: cubic-bezier(0.4, 0, 0.6, 1) (quick and direct)

Anti-Patterns to Avoid

• Linear timing: Feels robotic, use easing instead
• Instant interactions: Feels cold, add 0.2-0.4s minimum transitions
• Animation-heavy: Don't animate everything; be selective
• Slow animations: >1s feels sluggish unless intentional
• Predictable patterns: Vary easing, duration, and delay

Design Thinking: Pre-Coding Workflow

Overview

Before writing code or generating design, establish the intentional foundation. This workflow prevents default thinking and ensures your design serves a purpose beyond aesthetic choice.

The Pre-Design Checklist

Don't design until you answer these four questions:

1. Purpose: What problem are we solving? Who are we solving it for?
2. Tone: What emotional response do we want? What aesthetic direction reflects this?
3. Constraints: What are the real technical, temporal, or business limits?
4. Differentiation: What one unforgettable element makes this distinctly ours?

1. Purpose: Problem & Users

Understand the Problem

Before choosing any visual element, define what you're solving:

Questions to Answer:

• What specific problem does this design solve?
• Who are the primary users? (age, technical skill, context)
• What emotions are they bringing to this interface? (frustrated, excited, skeptical)
• What's the desired outcome after interaction?
• What makes this problem unique vs. competitors?

User Context Worksheet

Primary User:
- Age & background: ___________
- Technical skill level: ___________
- Primary use context: (work, leisure, research, etc.)
- How much time will they spend here? ___________
- What's their emotional state on arrival? ___________

Problem They're Solving:
- Specific challenge: ___________
- Current workaround (how do they solve it now?): ___________
- Desired outcome: ___________
- What's the cost of not solving it? ___________

Success Metrics:
- How will we know if this design works? ___________
- What behavior change indicates success? ___________

2. Tone: Aesthetic Direction

Define Emotional Intent

Based on your purpose, what emotional response should the design evoke?

Emotional Directions:

• Trustworthy: Professional, calm, reliable (finance, healthcare)
• Energetic: Playful, bold, surprising (creator tools, social)
• Sophisticated: Elegant, refined, literary (luxury, editorial)
• Direct: Minimal, fast, no-nonsense (productivity tools)
• Warm: Inviting, personable, human (community, education)
• Bold: Confident, unconventional, statement-making (startups, innovation)

Tone Definition Worksheet

Emotional Intent:
- Primary emotion we want users to feel: ___________
- Tone adjectives (3-5): ___________
- What should users think when they see this? ___________
- What should they feel when they interact? ___________

Design Personality:
- Is this design "serious" or "playful"?
- Is it "minimal" or "expressive"?
- Is it "traditional" or "unconventional"?
- Is it "warm" or "cool"?

Visual Direction:
- Color personality: (warm, cool, saturated, muted)
- Typography style: (traditional, modern, handcrafted, geometric)
- Motion style: (snappy, smooth, playful, none)
- Overall style: (minimalist, maximalist, balanced)

3. Constraints: Reality Check

Define Technical, Business, and Creative Limits

Before designing, know your boundaries:

Categories:

• Technical: Browser support, performance budget, framework limitations
• Temporal: How long do you have to build?
• Business: Brand guidelines, compliance requirements, market positioning
• Creative: Audience expectations, competitive landscape

Constraints Worksheet

Technical Constraints:
- Required browser support: ___________
- Performance budget: (load time, interaction delay)
- Required frameworks/libraries: ___________
- API availability/limitations: ___________
- Device support (mobile first?): ___________

Temporal Constraints:
- Design timeline: ___________
- Development timeline: ___________
- Launch date: ___________
- Available resources: ___________

Business Constraints:
- Brand guidelines to follow: (yes/no, which parts?)
- Compliance requirements: (WCAG, GDPR, etc.)
- Target market expectations: ___________
- Pricing/positioning tier: (premium, budget, etc.)

Creative Freedom:
- How much can we deviate from industry norms?
- Are we required to use specific design patterns?
- Any visual or interaction taboos?

4. Differentiation: The Unforgettable Element

Identify One Distinctive Feature

Every intentional design has one element that makes it memorable and distinctly yours. This isn't about complexity—it's about one deliberate choice that stands out.

Differentiation Framework

Types of Differentiation:

1. Typography Signature

   • A distinctive typeface pairing
   • Unusual size or weight hierarchy
   • Custom font treatment
   • Example: "We pair serif headlines with monospace body text"

2. Color Signature

   • An unexpected color choice in an expected place
   • A color that exists nowhere else in the category
   • Color that tells a story
   • Example: "Burnt orange accent in a tool that's usually all blue"

3. Motion Signature

   • A particular animation pattern no one else uses
   • Orchestration that guides the eye
   • A interaction that feels unique
   • Example: "Staggered reveals that feel orchestrated, not random"

4. Layout/Composition Signature

   • An unusual spatial arrangement
   • Asymmetrical composition
   • Unexpected visual rhythm
   • Example: "Sidebar on the right instead of left"

5. Micro-interaction Signature

   • A delight that appears on interaction
   • Easter egg or surprise element
   • Unique feedback pattern
   • Example: "Icons that animate in unexpected ways on hover"

6. Visual Detail Signature

   • Illustration style
   • Pattern or texture
   • Specific visual treatment
   • Example: "Custom illustrations that appear throughout"

Differentiation Worksheet

Current State (What do competitors do?):
- Typography: ___________
- Color: ___________
- Motion: ___________
- Layout: ___________
- Interactions: ___________

Our Differentiation (What will we do differently?):
- Chosen category: (Typography, Color, Motion, etc.)
- The specific distinctive choice: ___________
- Why this choice? (How does it serve the purpose & tone?)
- Where will it appear? (Headline, accent, hover state, etc.)
- Is it instantly recognizable as "ours"? (Yes/No)

The Unforgettable Element:
- In one sentence, describe what makes this design distinctly ours:
  ___________

Pre-Design Workflow: The Complete Picture

Before you design, complete this:

1. PROBLEM & USERS ✓
   Problem: ___________
   Primary user: ___________
   Their emotion on arrival: ___________
   Success metric: ___________

2. TONE & AESTHETICS ✓
   Emotional intent: ___________
   Tone adjectives: ___________
   Personality: (Serious/Playful, Minimal/Expressive, etc.)
   Visual direction: ___________

3. CONSTRAINTS ✓
   Technical: ___________
   Temporal: ___________
   Business: ___________
   Creative freedom level: ___________

4. DIFFERENTIATION ✓
   Unforgettable element: ___________
   Why this specific choice: ___________
   Where it appears: ___________

5. READY TO DESIGN ✓
   All four questions answered: (Yes/No)
   Team alignment on direction: (Yes/No)
   Prepared to brief designer/engineer: (Yes/No)

Anti-Patterns: What to Avoid

Typography Anti-Patterns

Avoid:

• Inter for everything (default AI choice)
• Roboto for everything (default Android)
• Open Sans for everything (neutral = forgettable)
• Lato for everything (too friendly, lacks edge)
• System fonts (-apple-system, system-ui)

Result: Immediately reads as "default AI design," no personality.

Color & Theme Anti-Patterns

Avoid:

• Material Design Trinity: Blue, Red, Green as primary, secondary, accent
• Default SaaS Colors: Cool blues (#0099ff, #0066cc) everywhere
• Rainbow Palette: Every color at full saturation
• Pure Grays: #999999, #CCCCCC without personality
• Inverted Black/White: No mid-tones or color

Identifies as: "I used the default design system"

Layout & Spatial Anti-Patterns

Avoid:

• Everything centered (feels safe but predictable)
• Symmetrical on both sides
• Predictable grid alignment
• "Stacked boxes" arrangement
• Uniform padding everywhere
• Same padding on all elements

Reads as: "Default SaaS dashboard"

Motion & Animation Anti-Patterns

Avoid:

• Linear timing on everything (feels robotic)
• No animation at all (instant page loads feel cold)
• Animation-heavy design that distracts from content
• Slow, sluggish motion (>1s feels sluggish unless intentional)

Background & Visual Details Anti-Patterns

Avoid:

• Pure white (#ffffff) with no texture
• Rainbow gradients (kitsch)
• High-contrast gradients (0% to 100%)
• Busy, distracting patterns
• Patterns that compete with content
• Generic illustration styles

HTML/CSS-Specific Guidance

Semantic HTML5 Elements

Always use semantic elements for structure and accessibility:

<header>
  <!-- Site header, logo, primary navigation -->
</header>

<nav>
  <!-- Navigation links -->
</nav>

<main>
  <!-- Primary page content -->
  <article>
    <!-- Self-contained content -->
    <section>
      <!-- Thematic grouping -->
    </section>
  </article>

  <aside>
    <!-- Tangential content, sidebars -->
  </aside>
</main>

<footer>
  <!-- Site footer, secondary links, metadata -->
</footer>

CSS Grid and Flexbox

Use CSS Grid for complex layouts and Flexbox for component-level organization:

/* Grid for page layout */
body {
  display: grid;
  grid-template-columns: 1fr minmax(0, 64rem) 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

header {
  grid-column: 1 / -1;
}

main {
  grid-column: 2;
}

/* Flexbox for component alignment */
.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

CSS Custom Properties (Variables)

Define color, spacing, and typography in custom properties for easy theming:

:root {
  /* Colors */
  --color-primary: #2d3748;
  --color-accent: #d4a574; /* Warm brown accent */
  --color-background: #f7f5f2; /* Warm cream */
  --color-text: #3d3d3d;

  /* Typography */
  --font-display: 'Playfair Display', serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* Transitions */
  --transition-fast: 0.2s ease-out;
  --transition-base: 0.3s ease-out;
  --transition-slow: 0.6s ease-out;
}

Mobile-First Responsive Design

Start with mobile layout, then enhance for larger screens:

/* Mobile-first (default) */
.container {
  width: 100%;
  padding: var(--space-md);
}

/* Tablet and up */
@media (min-width: 768px) {
  .container {
    max-width: 768px;
    margin: 0 auto;
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

WCAG 2.1 Level AA Compliance

Build accessibility into your design:

<!-- Use proper heading hierarchy -->
<h1>Page Title</h1>
<h2>Section Heading</h2>
<h3>Subsection</h3>

<!-- Always include alt text -->
<img src="hero.jpg" alt="Descriptive text about the image">

<!-- Use ARIA attributes when needed -->
<button aria-label="Close dialog" aria-pressed="false">
  ✕
</button>

<!-- Ensure color contrast ratios are sufficient -->
<!-- Aim for 4.5:1 for normal text, 3:1 for large text -->

/* Ensure focus indicators are visible */
:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Use sufficient line height for readability -->
body {
  line-height: 1.6;
}

/* Ensure touch targets are at least 44x44px -->
button {
  min-height: 44px;
  min-width: 44px;
}

Implementation Workflow

Before coding, complete the design thinking worksheet:

1. Design Thinking Phase

• Purpose: [Define problem and users]
• Tone: [Choose extreme aesthetic direction]
• Constraints: [Technical requirements]
• Differentiation: [Unforgettable element]

2. Typography Dimension

• [Select distinctive fonts from approved list]
• [Define weight extremes and size jumps]
• [Create high-contrast pairings]

3. Color & Theme Dimension

• [Choose cohesive color palette with CSS variables]
• [Dominant colors with sharp accents]
• [Avoid generic schemes]

4. Motion Dimension

• [Design orchestrated page load]
• [Staggered reveals with animation-delay]
• [Hover states and scroll triggers]
• [CSS-only, no JavaScript animation libraries]

5. Spatial Composition Dimension

• [Plan unexpected layouts]
• [Asymmetry, overlap, diagonal flow]
• [Grid-breaking elements]

6. Backgrounds & Visual Details Dimension

• [Create atmospheric depth]
• [Layer gradients, patterns, effects]
• [Avoid solid colors]

7. Implementation

• Write semantic HTML5
• Implement CSS with custom properties
• Add CSS animations and transitions
• Use Intersection Observer for scroll triggers
• Ensure accessibility (ARIA, keyboard navigation, focus indicators)
• Test responsiveness (mobile, tablet, desktop)

8. Validation

• Design Quality: Check against anti-patterns list
• Accessibility: WCAG 2.1 Level AA compliance
• Performance: Optimize CSS, minimize reflows, use hardware acceleration
• Cross-browser: Test in modern browsers (Chrome, Firefox, Safari, Edge)

Pre-Submit Checklist

Before delivering, verify:

• NO generic fonts (Inter, Roboto, Arial, system fonts)
• NO purple gradients on white backgrounds
• NO centered, predictable layouts
• YES to distinctive font choices with extreme weights
• YES to cohesive color palette with CSS variables
• YES to orchestrated animations (staggered page load)
• YES to unexpected spatial composition
• YES to atmospheric backgrounds (not solid colors)
• YES to WCAG 2.1 Level AA compliance
• YES to semantic HTML5 elements
• YES to CSS-only animations (no JS animation libraries)
• YES to mobile-first responsive design
• YES to accessible focus states and keyboard navigation
• YES to performance optimization

Resources

• Google Fonts: https://fonts.google.com
• Color Theory: Emotional context and psychological associations
• Motion Design: "The Illusion of Life" by Disney animators
• Accessibility: WCAG 2.1 Guidelines (https://www.w3.org/WAI/WCAG21/quickref/)
• CSS Reference: MDN Web Docs (https://developer.mozilla.org/en-US/docs/Web/CSS/)