name	frontend-design-html
description	Create distinctive, production-grade HTML/CSS frontends with exceptional design quality
version	1.0.0
framework	html-css-vanilla-js
tools	Read, Write, Edit, Grep, Glob, Bash

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

Start with body size (16px or 18px is standard)
Create display size as 4-6x body (64px-96px)
Create headline as 2-3x body (32px-48px)
All other sizes fall between these extremes
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

Orchestration: Animations should feel planned, not random
Purpose: Every animation should serve a functional or emotional purpose
Timing: Easing functions matter more than duration
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:

Purpose: What problem are we solving? Who are we solving it for?
Tone: What emotional response do we want? What aesthetic direction reflects this?
Constraints: What are the real technical, temporal, or business limits?
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:

Typography Signature
- A distinctive typeface pairing
- Unusual size or weight hierarchy
- Custom font treatment
- Example: "We pair serif headlines with monospace body text"
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"
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"
Layout/Composition Signature
- An unusual spatial arrangement
- Asymmetrical composition
- Unexpected visual rhythm
- Example: "Sidebar on the right instead of left"
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"
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/)

Install Skill

SKILL.md

Frontend Design HTML Skill

Base Aesthetics Framework

Overview

The Five Dimensions

1. Typography Dimension

2. Color & Theme Dimension

3. Motion Dimension

4. Spatial Composition Dimension

5. Backgrounds & Visual Details Dimension

Anti-Generic-AI Guardrails

Typography Guidance

Typefaces to Avoid

Typefaces to Prefer

Display & Decorative

Body & Copy

Monospace (Technical, Quotes, Code)

Pairing Strategy

High-Contrast Pairings (Recommended)

Avoid Sameness

Font Weights & Extremes

Weight Strategy

Size Jumps: Extreme Over Incremental

Size Scale Strategy

Implementation Rules

Line Height & Letter Spacing

Line Height Strategy

Letter Spacing Strategy

CSS Font Stack Example

Font Loading (Google Fonts)

Typography Checklist

Motion & Animation Guidance

Overview

Core Principles

CSS Animations

Basic Fade-In

Slide + Fade In

Scale + Fade In

Page Load Animation Strategy

Orchestrated Reveal

Staggered Reveals

Using animation-delay (CSS)

Scroll Trigger Animations

Intersection Observer (Vanilla JS)

Hover State Surprises

CSS Hover Animations

Easing Functions

Recommended Easing Values

Anti-Patterns to Avoid

Design Thinking: Pre-Coding Workflow

Overview

The Pre-Design Checklist

1. Purpose: Problem & Users

Understand the Problem

User Context Worksheet

2. Tone: Aesthetic Direction

Define Emotional Intent

Tone Definition Worksheet

3. Constraints: Reality Check

Define Technical, Business, and Creative Limits

Constraints Worksheet

4. Differentiation: The Unforgettable Element

Identify One Distinctive Feature

Differentiation Framework

Differentiation Worksheet

Pre-Design Workflow: The Complete Picture

Anti-Patterns: What to Avoid

Typography Anti-Patterns

Color & Theme Anti-Patterns

Layout & Spatial Anti-Patterns

Motion & Animation Anti-Patterns

Background & Visual Details Anti-Patterns

HTML/CSS-Specific Guidance

Semantic HTML5 Elements

CSS Grid and Flexbox

CSS Custom Properties (Variables)

Mobile-First Responsive Design

WCAG 2.1 Level AA Compliance

Implementation Workflow