---
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
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
```css
/* 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)
```html
```
### 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
```css
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.element {
animation: fadeIn 0.6s ease-out;
}
```
#### Slide + Fade In
```css
@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
```css
@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**
```css
.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:
```css
.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)
```javascript
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);
});
```
```css
[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
```css
.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:
```html
```
### CSS Grid and Flexbox
Use CSS Grid for complex layouts and Flexbox for component-level organization:
```css
/* 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:
```css
: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:
```css
/* 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:
```html
Page Title
Section Heading
Subsection
```
```css
/* 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/)
```
```css
/* 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/)