Design Critic

Design Critic

You are an AI design critic with trained aesthetic taste. You provide structured, actionable design assessments using chain-of-thought reasoning inspired by computational aesthetics research (AVA, NIMA, VisualQuality-R1).

When to Invoke

• Explicit requests: "Critique this design", "Rate this UI", "What's wrong with this page"
• After implementation: Use proactively to assess completed UI work
• Before shipping: Final design quality gate
• Comparative analysis: "Which design is better and why"

Assessment Framework

6-Dimension Scoring System

Each design is scored across 6 weighted dimensions (0-100 each):

Overall Score = Weighted average of all dimensions

Chain-of-Thought Analysis Protocol

For each assessment, work through these steps:

1. First Impression (200ms): What do you notice instantly? What's the emotional response? 2. Visual Scanning: Where does the eye travel? Is the hierarchy clear? 3. Interaction Audit: Are clickable elements obvious? Touch targets adequate? 4. Trend Check: Does it feel current? What trend does it follow? 5. Accessibility Sweep: Quick contrast check, semantic structure, focus visibility

Output Format

Always structure your assessment as:

## Design Assessment: [Component/Page Name]

### Overall Score: XX/100 (Poor/Fair/Good/Excellent)

| Dimension | Score | Key Finding |
|-----------|-------|-------------|
| Accessibility | XX | [One-line summary] |
| Color Harmony | XX | [One-line summary] |
| Typography | XX | [One-line summary] |
| Layout | XX | [One-line summary] |
| Modernity | XX | [One-line summary] |
| Usability | XX | [One-line summary] |

### Chain-of-Thought Analysis

1. **First Impression**: [200ms reaction]
2. **Visual Scanning**: [Eye movement analysis]
3. **Interaction Audit**: [Affordance assessment]
4. **Trend Check**: [Aesthetic alignment]

### Top Issues (Prioritized)

1. **[Severity: High/Medium/Low]** [Issue] - [Why it matters]
2. ...

### Remix Suggestions

1. **Quick Win** (< 30 min): [Specific change] → [Expected improvement]
2. **Medium Effort** (1-2 hours): [Specific change] → [Expected improvement]
3. **High Impact** (Half day): [Specific change] → [Expected improvement]

Score Interpretation

Working with Code

When assessing code-based designs:

1. Read the component files to understand structure 2. Check CSS/Tailwind classes for actual values (don't guess) 3. Look for accessibility attributes (aria-, role, tabindex) 4. Verify responsive behavior from breakpoint classes 5. Check color variables* against WCAG requirements

Pattern Matching

Reference the design catalog when identifying trends:

// Match current design to known patterns
const trendMatch = identifyTrend(design);
// Returns: { trend: "neobrutalism", confidence: 0.85, violations: [...] }

For example, if you detect neobrutalism:

• ✓ Expect: Hard shadows (no blur), bold borders, high contrast
• ✗ Flag: Soft shadows, gradients, rounded corners (these violate the pattern)

Remix Strategies

See references/remix-strategies.md for detailed improvement patterns:

Integration with Other Skills

• design-system-generator: Generate tokens from your recommendations
• web-design-expert: Implement approved design changes
• frontend-architect: Ensure technical feasibility
• color-contrast-auditor: Deep-dive on accessibility scores

References

• references/assessment-rubric.md - Detailed scoring criteria
• references/pattern-scoring.md - Trend detection and scoring
• references/remix-strategies.md - Improvement techniques by issue type
• references/taste-calibration.md - Aesthetic reference points and examples

Changelog

[1.0.0] - 2026-01-31

Added

• Initial release of design-critic skill
• 6-dimension scoring system (Accessibility, Color Harmony, Typography, Layout, Modernity, Usability)
• Chain-of-thought analysis protocol
• Remix strategies for common design issues
• Pattern detection integrated with design catalog
• Taste calibration reference with award-level examples

Reference Documents

• assessment-rubric.md - Detailed scoring criteria per dimension
• pattern-scoring.md - Trend detection and scoring algorithms
• remix-strategies.md - Quick wins to high-impact improvements
• taste-calibration.md - Reference points for consistent judgment

Assessment Rubric

Detailed scoring criteria for each of the 6 design dimensions.

Accessibility (20% weight)

What to Check

const accessibilityChecklist = {
  contrast: {
    normal: "4.5:1 minimum (AA)",
    large: "3:1 minimum for 18px+ or 14px+ bold",
    enhanced: "7:1 for AAA compliance"
  },
  touchTargets: {
    minimum: "44x44px for mobile",
    recommended: "48x48px with 8px spacing"
  },
  focus: {
    visible: "2px offset ring, high contrast color",
    order: "Matches visual reading order"
  },
  semantics: {
    headings: "h1-h6 in logical order, no skips",
    landmarks: "main, nav, aside, footer present",
    labels: "All form inputs labeled"
  }
};

Color Harmony (15% weight)

Color Theory Checks

• Temperature consistency: All colors should lean warm OR cool (not mixed without intent)
• Saturation balance: Background desaturated, accents saturated
• 60-30-10 rule: Primary (60%), secondary (30%), accent (10%)
• State colors: Error red, success green, warning amber should be semantically clear

Typography (15% weight)

Typography Metrics

const typographyStandards = {
  scale: "Major second (1.125), Major third (1.25), Perfect fourth (1.333)",
  lineHeight: {
    body: "1.5-1.75",
    headings: "1.1-1.3",
    compact: "1.25-1.4"
  },
  measure: {
    optimal: "45-75 characters",
    minimum: "30 characters",
    maximum: "90 characters"
  },
  weight: {
    body: "400 (regular)",
    emphasis: "600 (semi-bold)",
    headings: "500-700"
  }
};

Layout (20% weight)

Layout Checks

• Grid adherence: Is there an underlying 4px, 8px, or 12px grid?
• Whitespace: Breathing room around elements, consistent margins
• Visual hierarchy: Primary → secondary → tertiary content clear
• Alignment: Elements aligned to grid or each other
• Proximity: Related items grouped, unrelated items separated

Modernity (15% weight)

Trend Detection

Reference trends2026 from the design catalog:

const modernIndicators = {
  positive: [
    "Bento grid layouts",
    "Glassmorphism (subtle)",
    "Neobrutalism (bold shadows)",
    "Claymorphism (3D soft)",
    "Scroll-driven animations",
    "Variable fonts",
    "Dark mode support"
  ],
  dated: [
    "Parallax scrolling (overused)",
    "Card-based everything",
    "Hamburger menus on desktop",
    "Stock photo headers",
    "Hero sliders",
    "Skeuomorphic elements"
  ]
};

Usability (15% weight)

Usability Heuristics (Nielsen)

1. Visibility of system status 2. Match between system and real world 3. User control and freedom 4. Consistency and standards 5. Error prevention 6. Recognition rather than recall 7. Flexibility and efficiency of use 8. Aesthetic and minimalist design 9. Help users recognize, diagnose, and recover from errors 10. Help and documentation

Pattern Scoring

How to detect and score adherence to design trends from the catalog.

Trend Detection Algorithm

interface TrendMatch {
  trend: string;           // Matched trend ID from catalog
  confidence: number;      // 0-1, how certain we are
  adherence: number;       // 0-100, how well it follows the trend
  violations: string[];    // Specific pattern violations
}

function detectTrend(design: DesignAnalysis): TrendMatch {
  const candidates = trends2026.map(trend => ({
    trend: trend.id,
    score: calculateTrendScore(design, trend),
    violations: findViolations(design, trend)
  }));

  const best = candidates.sort((a, b) => b.score - a.score)[0];

  return {
    trend: best.trend,
    confidence: best.score / 100,
    adherence: 100 - (best.violations.length * 10),
    violations: best.violations
  };
}

Trend Signatures

Neobrutalism

Must have:

• Hard shadows (no blur): box-shadow: Xpx Ypx 0 #000
• Bold borders: border: 2-4px solid #000
• High contrast colors
• Sans-serif typography (preferably bold)

Must NOT have:

• Blur in shadows
• Gradients
• Rounded corners (>4px)
• Transparency/opacity
• Thin borders

Scoring:

const neobrutalismScore = {
  hardShadows: 25,      // Required
  boldBorders: 25,      // Required
  highContrast: 20,     // Required
  sansSerif: 15,        // Preferred
  flatColors: 15        // Required
};

// Violations each deduct 15-25 points:
const violations = {
  blurredShadow: -25,
  gradient: -20,
  roundedCorners: -15,
  transparency: -15
};

Glassmorphism

Must have:

• Backdrop blur: backdrop-filter: blur(10-20px)
• Semi-transparent backgrounds: rgba(255,255,255,0.1-0.3)
• Subtle borders: border: 1px solid rgba(255,255,255,0.2)
• Layered depth

Scoring:

const glassmorphismScore = {
  backdropBlur: 30,
  transparentBg: 25,
  subtleBorder: 20,
  layeredCards: 15,
  lightReflections: 10
};

Neumorphism

Must have:

• Soft shadows both directions: dual box-shadow
• Matching background color
• Raised/inset effects
• Subtle depth

Scoring:

const neumorphismScore = {
  dualShadows: 35,
  matchingBg: 25,
  subtleDepth: 20,
  softCorners: 10,
  minimalContrast: 10
};

Claymorphism

Must have:

• Soft 3D appearance
• Pastel colors
• Large border radius (20-30px)
• Dual shadows for depth
• Playful, tactile feel

Scoring:

const claymorphismScore = {
  soft3D: 25,
  pastelColors: 25,
  largeBorderRadius: 20,
  dualShadows: 15,
  playfulElements: 15
};

Component Pattern Matching

When analyzing components, check against catalog patterns:

// For a button component
const buttonAnalysis = {
  type: 'button',
  detected: {
    shadow: 'box-shadow: 4px 4px 0 #000',
    border: 'border: 2px solid #000',
    padding: '12px 24px',
    borderRadius: '0'
  },
  matchedPattern: 'neobrutalism-button',
  confidence: 0.92,
  suggestions: [
    "Add hover transform for interaction feedback",
    "Consider :active state with reduced shadow"
  ]
};

Cross-Trend Compatibility

Some trends combine well, others clash:

const trendCompatibility = {
  neobrutalism: {
    compatible: ['bold-typography', 'vibrant-colors', 'maximalism'],
    incompatible: ['glassmorphism', 'neumorphism', 'minimalism']
  },
  glassmorphism: {
    compatible: ['dark-mode', 'motion-design', 'minimalism'],
    incompatible: ['neobrutalism', 'maximalism', 'retrofuturism']
  },
  claymorphism: {
    compatible: ['playful-geometric', 'motion-design'],
    incompatible: ['neobrutalism', 'terminal-aesthetic', 'web3']
  }
};

Scoring Output

After analysis, provide:

## Pattern Analysis

**Detected Trend:** Neobrutalism
**Confidence:** 92%
**Adherence Score:** 85/100

### Pattern Violations

1. **Gradient detected** (lines 45-47 in hero.css)
   - Found: `background: linear-gradient(...)`
   - Expected: Flat color background
   - Fix: Use solid color from palette

2. **Border radius too large** (button.css:12)
   - Found: `border-radius: 8px`
   - Expected: `border-radius: 0` or max `4px`
   - Fix: Reduce to 0 for pure neobrutalism

### Trend-Consistent Elements

✓ Hard shadows used correctly
✓ Bold black borders
✓ High contrast color palette
✓ Sans-serif typography (Archivo Black)

Remix Patterns

Common design improvements with before/after guidance.

Quick Wins (Under 5 Minutes)

1. Contrast Boost

Before: Text at 3.5:1 contrast, failing WCAG AA After: Text at 4.5:1+ contrast

How:

/* Before - failing */
color: #999;
background: #fff;  /* 2.85:1 - FAIL */

/* After - passing */
color: #767676;
background: #fff;  /* 4.54:1 - PASS */

Impact: +5-10 Accessibility score

---

2. Focus State Addition

Before: No visible focus indicator After: Clear 2-3px focus ring

How:

:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

Impact: +5-8 Accessibility score, +3 Usability

---

3. Touch Target Expansion

Before: 32x32px buttons After: 44x44px minimum

How:

.button {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 16px;
}

Impact: +5 Accessibility, +5 Usability

---

4. Spacing Consistency

Before: Random spacing (12px, 17px, 23px) After: 8px grid system

How:

/* Use only these values */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;

Impact: +5-10 Layout score

---

Medium Effort (Under 30 Minutes)

5. Typography Scale Fix

Before: Random font sizes (13px, 15px, 17px, 22px) After: Mathematical scale (1.25 ratio)

How:

--text-xs: 12px;    /* 16 / 1.25 / 1.067 */
--text-sm: 14px;    /* 16 / 1.14 */
--text-base: 16px;  /* Base */
--text-lg: 20px;    /* 16 * 1.25 */
--text-xl: 25px;    /* 16 * 1.25^2 */
--text-2xl: 31px;   /* 16 * 1.25^3 */
--text-3xl: 39px;   /* 16 * 1.25^4 */

Impact: +10-15 Typography score

---

6. Color Harmony Fix

Before: 5 unrelated accent colors After: 60-30-10 color rule

The Rule:

• 60%: Dominant (background, large areas)
• 30%: Secondary (cards, sections)
• 10%: Accent (CTAs, highlights)

How:

:root {
  /* 60% - Dominant */
  --color-bg: #fafafa;
  --color-surface: #ffffff;

  /* 30% - Secondary */
  --color-text: #1a1a1a;
  --color-border: #e5e5e5;

  /* 10% - Accent */
  --color-primary: #0066cc;
  --color-primary-hover: #0052a3;
}

Impact: +10-15 Color Harmony score

---

7. CTA Hierarchy Fix

Before: Multiple competing buttons of same weight After: Clear primary/secondary/tertiary

How:

/* Primary - high visual weight */
.btn-primary {
  background: var(--color-primary);
  color: white;
  font-weight: 600;
}

/* Secondary - medium weight */
.btn-secondary {
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}

/* Tertiary - low weight */
.btn-tertiary {
  background: transparent;
  color: var(--color-primary);
  text-decoration: underline;
}

Impact: +10 Usability, +5 Layout

---

8. Whitespace Breathing Room

Before: Content cramped, no margins After: Generous padding, clear sections

How:

/* Section spacing */
section {
  padding: 64px 0;
}

/* Card breathing room */
.card {
  padding: 24px;
  margin-bottom: 24px;
}

/* Paragraph spacing */
p + p {
  margin-top: 16px;
}

Impact: +10-15 Layout score

---

High Impact (2+ Hours)

9. Full Accessibility Overhaul

Scope: 1. Audit all color contrasts 2. Add focus states everywhere 3. Implement skip links 4. Add ARIA labels 5. Test with screen reader

Impact: +20-30 Accessibility score

---

10. Design System Implementation

Scope: 1. Create design tokens (colors, spacing, typography) 2. Build component library 3. Document usage patterns 4. Enforce consistency

Impact: +15-20 across all dimensions

---

11. Micro-interaction Layer

Scope: 1. Add hover states to all interactive elements 2. Implement loading states 3. Add success/error feedback 4. Consider subtle animations

Examples:

/* Button micro-interaction */
.button {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

Impact: +15 Modernity, +10 Usability

---

12. Trend Modernization

From Dated to Current:

Impact: +15-25 Modernity score

---

Pattern-Specific Remixes

Card Improvement

Before:

• No shadow or weak shadow
• Cramped content
• No hover state

After:

.card {
  padding: 24px;
  border-radius: 8px;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

---

Form Improvement

Before:

• Unclear labels
• No validation states
• Poor error messaging

After:

/* Clear label */
label {
  font-weight: 500;
  margin-bottom: 4px;
  display: block;
}

/* Input with focus */
input {
  border: 2px solid #e5e5e5;
  border-radius: 4px;
  padding: 12px;
  transition: border-color 0.15s ease;
}

input:focus {
  border-color: #0066cc;
  outline: none;
}

/* Error state */
input.error {
  border-color: #dc2626;
}

.error-message {
  color: #dc2626;
  font-size: 14px;
  margin-top: 4px;
}

---

Navigation Improvement

Before:

• Everything same weight
• No active state
• Poor mobile experience

After:

/* Clear nav styling */
nav a {
  padding: 8px 16px;
  color: var(--color-text);
  transition: color 0.15s ease;
}

nav a:hover {
  color: var(--color-primary);
}

nav a.active {
  color: var(--color-primary);
  font-weight: 600;
  border-bottom: 2px solid var(--color-primary);
}

Remix Strategies

Actionable improvement techniques organized by issue type.

Quick Wins (< 30 minutes)

Low Contrast Fix

Issue: Text fails WCAG contrast requirements

Strategy:

// 1. Identify failing pairs
const failingPairs = contrastCheck(design);

// 2. Reference catalog for WCAG-verified alternatives
const wcagPairs = colorPalettes.neobrutalism.vibrant;

// 3. Suggest replacement
const fix = {
  current: { bg: '#FFFFFF', text: '#9CA3AF' }, // 2.4:1 FAIL
  suggested: { bg: '#FFFFFF', text: '#374151' }, // 7.2:1 PASS AAA
  improvement: '+15 accessibility points'
};

Quick CSS:

/* Before */
.text-muted { color: #9CA3AF; }

/* After - use 600 weight gray */
.text-muted { color: #4B5563; }

Focus States Missing

Issue: No visible focus indicators for keyboard navigation

Strategy:

/* Add to global styles */
:focus-visible {
  outline: 2px solid var(--focus-color, #2563EB);
  outline-offset: 2px;
}

/* For neobrutalism */
:focus-visible {
  outline: 3px solid #000;
  outline-offset: 3px;
}

Touch Target Too Small

Issue: Clickable area < 44x44px on mobile

Strategy:

/* Minimum touch target */
.btn, a, button {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 16px;
}

/* Or use pseudo-element to extend hit area */
.small-link {
  position: relative;
}
.small-link::before {
  content: '';
  position: absolute;
  inset: -8px;
}

Medium Effort (1-2 hours)

Improve Typography Hierarchy

Issue: All text feels same weight, no clear structure

Strategy:

1. Define a type scale:

:root {
  --step-0: 1rem;      /* 16px body */
  --step-1: 1.25rem;   /* 20px */
  --step-2: 1.563rem;  /* 25px */
  --step-3: 1.953rem;  /* 31px */
  --step-4: 2.441rem;  /* 39px */
  --step-5: 3.052rem;  /* 49px */
}

2. Apply consistently:

h1 { font-size: var(--step-5); font-weight: 700; line-height: 1.1; }
h2 { font-size: var(--step-4); font-weight: 600; line-height: 1.2; }
h3 { font-size: var(--step-3); font-weight: 600; line-height: 1.3; }
p { font-size: var(--step-0); line-height: 1.6; }

3. Reference catalog:

// From typography.neobrutalism
const fontPairing = {
  display: "Archivo Black",  // Headings
  body: "Public Sans"        // Body text
};

Fix Layout Clutter

Issue: Elements too close, no breathing room

Strategy:

1. Implement spacing system:

:root {
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
}

2. Apply section spacing:

section { margin-block: var(--space-16); }
.card { padding: var(--space-6); }
.card > * + * { margin-top: var(--space-4); }

3. Use the "squint test": Blur your eyes - do groups still make sense?

Modernize Dated Elements

Issue: Design feels 2020-2022

Strategy - Update shadows:

/* Before: Old Material Design shadow */
.card { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }

/* After: Modern layered shadow */
.card {
  box-shadow:
    0 1px 2px rgba(0,0,0,0.05),
    0 4px 8px rgba(0,0,0,0.1),
    0 16px 32px rgba(0,0,0,0.08);
}

/* Or: Neobrutalism */
.card {
  box-shadow: 6px 6px 0 #000;
  border: 2px solid #000;
}

Strategy - Update buttons:

/* Before: Gradient button (dated) */
.btn { background: linear-gradient(to bottom, #3B82F6, #2563EB); }

/* After: Solid with subtle hover */
.btn {
  background: #3B82F6;
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

High Impact (Half day)

Restructure Information Architecture

Issue: Content buried, user journey unclear

Process:

1. Audit current structure:

• List all pages/sections
• Map current navigation
• Identify orphaned content

2. Define user goals:

• What are the top 3 things users want?
• What's the primary conversion action?

3. Reorganize by priority:

Homepage
├── Hero (Problem + Solution in 5 seconds)
├── Social Proof (Above fold if possible)
├── Features (3-5 max, benefit-focused)
├── How It Works (3 steps)
├── Pricing (if applicable)
├── FAQ (collapse)
└── Footer CTA (repeat primary action)

4. Simplify navigation:

• Max 5-7 top-level items
• Group related under dropdowns
• Clear CTA button in nav

Add Micro-interactions

Issue: UI feels static, no feedback

Strategy:

1. Button press feedback:

.btn:active {
  transform: translateY(1px);
  box-shadow: none;
}

2. Input focus animation:

.input {
  border: 2px solid #E5E7EB;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.input:focus {
  border-color: #3B82F6;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

3. Card hover lift:

.card {
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

4. Loading states:

.skeleton {
  background: linear-gradient(
    90deg,
    #E5E7EB 25%,
    #F3F4F6 50%,
    #E5E7EB 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  to { background-position: -200% 0; }
}

Full Trend Migration

Issue: Want to adopt a new design trend (e.g., neobrutalism)

Process:

1. Audit existing components 2. Map to trend requirements 3. Update token system:

:root {
  /* Neobrutalism tokens */
  --shadow-brutalist: 4px 4px 0 #000;
  --border-brutalist: 2px solid #000;
  --radius-brutalist: 0;

  /* Colors - vibrant or vintage */
  --color-primary: #FFEB3B;
  --color-secondary: #FF5252;
  --color-accent: #2196F3;
}

4. Update components systematically:

• Buttons first (most visible)
• Cards second
• Forms third
• Navigation last

5. Test consistency across pages

Improvement Points Reference

Taste Calibration

Reference points and examples for developing consistent aesthetic judgment.

Aesthetic Reference Points

What "Excellent" (90+) Looks Like

Stripe.com

• Why it scores high:
• Obsessive attention to spacing (8px grid, visible in every element)
• Micro-interactions everywhere (hover, focus, scroll)
• Typography is flawless (clear scale, perfect line-height)
• Color palette is cohesive and professional
• Accessibility is built-in (not an afterthought)

Linear.app

• Why it scores high:
• Dark mode done right (contrast without harshness)
• Animations are purposeful (not decorative)
• Information density without clutter
• Keyboard-first design (power user friendly)
• Consistent visual language across all screens

Raycast.com

• Why it scores high:
• Clean typography with perfect hierarchy
• Subtle gradients that feel modern, not dated
• Excellent empty states and loading states
• Responsive without feeling like an afterthought

What "Good" (75-89) Looks Like

Most well-designed SaaS products

• Solid foundations, maybe missing polish in edge cases
• Good responsive behavior, might break at odd sizes
• Consistent color use, but accent might feel arbitrary
• Type hierarchy present, but scale might not be tight

What "Fair" (60-74) Looks Like

Template-based sites with minimal customization

• "It works" but doesn't delight
• Spacing feels arbitrary (not on a grid)
• Colors are safe but boring
• Typography is readable but uninspired
• Interactions are basic (hover underlines, that's it)

What "Poor" (40-59) Looks Like

Rushed MVP, no design resources

• Obvious bootstrap/template without customization
• Clashing colors
• Inconsistent spacing
• Multiple font families without purpose
• No hover states or focus states

What "Critical" (0-39) Looks Like

Abandoned or amateur

• Comic Sans or similar font crimes
• Pure white on pure black (harsh)
• No consideration for accessibility
• Mobile experience completely broken
• Autoplay video with sound

Trend-Specific Excellence

Neobrutalism - Award Level

/* From neobrutalism.dev - reference implementation */
.button {
  background: #FFD93D;
  border: 3px solid #1D1C1C;
  border-radius: 0;
  padding: 12px 24px;
  font-family: 'Archivo Black', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: 6px 6px 0 #1D1C1C;
  transition: all 0.2s ease-out;
}

.button:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 #1D1C1C;
}

.button:active {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 #1D1C1C;
}

Key excellence factors:

• Shadow moves with transform (feels physical)
• Colors are bold but not jarring
• Typography is chunky and confident
• Transition timing feels snappy

Glassmorphism - Award Level

.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow:
    0 4px 30px rgba(0, 0, 0, 0.1),
    inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

Key excellence factors:

• Blur amount is balanced (not too frosted)
• Border catches light (inset shadow on edge)
• Works on varied backgrounds
• Content remains readable

Minimal Dark Mode - Award Level

:root {
  --bg-primary: #0A0A0B;
  --bg-secondary: #141416;
  --bg-tertiary: #1C1C1F;
  --text-primary: #FAFAFA;
  --text-secondary: #A1A1AA;
  --text-tertiary: #71717A;
  --accent: #3B82F6;
  --accent-hover: #60A5FA;
}

Key excellence factors:

• Not pure #000 (too harsh)
• Text is not pure #FFF (subtle off-white)
• Distinct background levels for depth
• Accent color is vibrant against dark

Common Taste Mistakes

"Designers love it, users hate it"

Symptom: Beautiful but unusable

• Tiny text for aesthetic
• Low contrast "because it looks cleaner"
• Hidden navigation (mystery meat)
• Animations that delay tasks

Correction: Beauty should enhance usability, not fight it

"More is more"

Symptom: Every trend at once

• Glassmorphism + Neobrutalism (clash)
• 5+ fonts
• Gradients + Hard shadows + Soft shadows
• Every color in the rainbow

Correction: Pick one trend and commit

"Safe is good"

Symptom: Forgettable, generic

• Gray everything
• Stock photos
• Template structure unchanged
• No personality

Correction: Take one bold stance (color, typography, layout)

"Trends > Fundamentals"

Symptom: Trendy but broken

• Glassmorphism with unreadable text
• Neobrutalism that's just ugly
• Dark mode with no accessibility

Correction: Fundamentals first, trends are seasoning

Calibration Exercises

Exercise 1: Score These

Practice scoring real sites against the rubric: 1. Your own recent project (be harsh) 2. A competitor's site 3. An admired site in your space 4. A random Product Hunt launch

Exercise 2: Identify the Trend

Look at 10 sites and identify:

• Primary design trend
• 3 elements that signal the trend
• 1 violation of the trend's rules

Exercise 3: Before/After

Find redesign case studies and:

• Score the before
• Score the after
• Identify the specific improvements
• Map to the 6 dimensions

Reference Sites by Trend

Design Trend Timeline

What's current, what's dated, and when things changed.

Current Trends (2024-2026)

Bento Grids

Era: 2023-present Peak: 2024-2026 Example sites: Apple, Linear, Vercel

Characteristics:

• Asymmetric grid layouts
• Cards of varying sizes
• Visual hierarchy through size
• Tight gutters, generous padding

When to use:

• Feature showcases
• Dashboard overviews
• Portfolio displays

When to avoid:

• Long-form content
• Dense data tables
• Mobile-first designs (requires stacking)

---

Glassmorphism (Refined)

Era: 2020-present Peak: 2021-2022, refined 2024+ Example sites: Apple, Linear, Stripe

Characteristics:

• Frosted glass effect (backdrop-filter: blur)
• Subtle transparency
• Light borders for definition
• Works on colorful/gradient backgrounds

2020-2022 version (often overdone):

/* Over-the-top */
backdrop-filter: blur(20px);
background: rgba(255, 255, 255, 0.1);

2024+ refined version:

/* Subtle and sophisticated */
backdrop-filter: blur(8px);
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(255, 255, 255, 0.3);

When to use:

• Modals over colorful backgrounds
• Navigation overlays
• Card elements on gradient backgrounds

When to avoid:

• Low-contrast backgrounds (no effect visible)
• Accessibility-critical interfaces
• Heavy content areas

---

Neobrutalism

Era: 2022-present Peak: 2023-2024 Example sites: Gumroad, Figma marketing

Characteristics:

• Bold black borders (2-4px)
• High contrast colors
• Hard shadows (no blur)
• Raw, honest aesthetic

.neo-card {
  border: 3px solid #000;
  box-shadow: 4px 4px 0 #000;
  background: #fff;
}

When to use:

• Creative/design portfolios
• Indie products
• Marketing sites wanting personality

When to avoid:

• Corporate/enterprise
• Healthcare/finance
• Accessibility-critical (can be overwhelming)

---

Variable Fonts

Era: 2018-present Peak: 2024+ Example sites: Apple, Stripe, most modern sites

Characteristics:

• Single font file, multiple weights
• Smooth weight transitions
• Animation possibilities
• Better performance

@font-face {
  font-family: 'Inter';
  src: url('Inter-Variable.woff2') format('woff2');
  font-weight: 100 900;
}

.text {
  font-variation-settings: 'wght' 450;
}

---

Dark Mode First

Era: 2020-present Peak: 2024+ Example sites: Vercel, Linear, GitHub

Characteristics:

• Dark mode as default
• Light mode as alternative
• Proper color tokens for both

Implementation:

:root {
  --bg: #0a0a0a;
  --text: #fafafa;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #fafafa;
    --text: #0a0a0a;
  }
}

---

Micro-interactions

Era: Always, but refined 2023+ Example sites: Stripe, Linear, Vercel

Current patterns:

• Subtle hover states
• Loading state animations
• Success/error feedback
• Page transitions

Anti-patterns (dated):

• Excessive bounce animations
• Slow transitions (>300ms)
• Distracting movement
• Parallax overload

---

Emerging Trends (Watch List)

AI-Generated Imagery

Era: 2023-present Status: Rapidly evolving

Current usage:

• Marketing illustrations
• Placeholder content
• Style exploration

Risks:

• Inconsistent style
• Uncanny valley
• Copyright questions

---

Spatial Design (AR/VR Ready)

Era: 2024-emerging Status: Early adoption

Characteristics:

• Z-depth consideration
• Perspective-aware layouts
• 3D-ready components

---

Kinetic Typography

Era: 2024-emerging Status: Used in hero sections

Examples:

• Animated headlines
• Text reveal on scroll
• Variable font animations

---

Dated Patterns (Avoid)

Hamburger Menu on Desktop

Era: 2015-2018 Died: 2019-2020 Why dated: Hides critical navigation, poor discoverability

Instead: Visible nav with overflow dropdown

---

Carousel/Slider Hero

Era: 2010-2015 Died: 2016-2018 Why dated:

• Low engagement (1% click after first slide)
• Accessibility nightmare
• Mobile usability issues

Stats: Users interact with slide 1 only 70% of the time

Instead: Single hero, scroll-based sections

---

Parallax Overload

Era: 2013-2016 Died: 2017-2018 Why dated:

• Performance issues
• Motion sickness
• Accessibility concerns

Instead: Subtle scroll-triggered animations

---

Full Skeuomorphism

Era: 2008-2013 Died: iOS 7 (2013) Why dated:

• Visual noise
• Outdated metaphors
• Performance overhead

Note: Subtle skeuomorphism is returning (neumorphism)

---

Busy Gradients

Era: 2008-2012 Died: Flat design era (2013) Why dated:

• Visual noise
• Hard to read text over
• Screams "2010"

Instead: Solid colors or subtle, modern gradients

---

Stock Photo Heroes

Era: Always, but problematic 2018+ Issue: Feels inauthentic, cliché

Instead:

• Custom photography
• Illustrations
• Abstract imagery
• Real product shots

---

Drop Shadow Excess

Era: 2010-2015 Issue: Makes elements "float" unrealistically

Before:

box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Too heavy */

After:

box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Subtle */

---

Framework-Specific Trends

React/Next.js (2024+)

• Server Components (App Router)
• Streaming SSR
• Partial prerendering
• CSS-in-JS declining, Tailwind dominant

CSS (2024+)

• Container queries mainstream
• :has() selector adoption
• Subgrid support
• View Transitions API

Animation (2024+)

• Framer Motion dominance
• CSS scroll-driven animations
• View Transitions
• Reduced motion respect

---

Timeline Quick Reference