Premium UI Systems

Build exceptional interfaces with systematic quality and distinctive aesthetic. This skill prevents "vibe-coded" UI—the template look that results from applying effects before solving structure.

Quick Decision Tree

Are you building UI? → Start here ↓

┌─ Step 1: What are you building?
│  ├─ Dashboard/Data UI → [Dashboard Workflow](#dashboard-workflow)
│  ├─ Landing/Marketing → [Marketing Workflow](#marketing-workflow)
│  └─ Product Feature/App → [Product Workflow](#product-workflow)
│
├─ Step 2: Does it look "vibe-coded"?
│  └─ Run [De-Vibe Audit](#de-vibe-audit) → Fix foundation first
│
└─ Step 3: Ready to polish?
   └─ Apply [Premium Pass](#premium-pass) → Systematic refinement

De-Vibe Audit

CRITICAL: Run this before adding features. Order matters—fix foundation before effects.

Visual Tests (30 seconds)

1. •Grayscale test: Convert to grayscale—hierarchy should still be obvious
2. •Effects-off test: Mentally remove glass/glow/motion—still premium?
3. •Squint test: Squint at screen—can you identify the primary action?

Foundation Checklist

Symptoms Diagnostic

Failed the audit? → Fix foundation first. Effects won't save weak structure.

Passed? → Continue to workflow-specific guidance below.

Dashboard Workflow

Structure

┌─────────────────────────────────────────────────────┐
│  KPI ROW (3-7 metrics with deltas)                  │  ← "How are we doing?"
├─────────────────────────────────────────────────────┤
│  TREND BAND (1-3 charts)                            │  ← "Why?"
├─────────────────────────────────────────────────────┤
│  ACTION TABLE (where users do work)                 │  ← "What do I do?"
└─────────────────────────────────────────────────────┘

Critical Rules

• •Solid surfaces for data: Tables, KPI cards, charts → always solid backgrounds
• •Glass only for chrome: Nav, filters, toolbars → translucent OK
• •Direct labeling: Annotate charts directly, avoid legends when possible
• •Sticky headers: Tables need sticky headers for scanning
• •Clear row rhythm: Consistent row height, hover states

Detailed guide: references/dashboard-patterns.md

Marketing Workflow

Hero Anatomy

┌─────────────────────────────────────────────────────┐
│  [Logo]                    [Nav]    [CTA]           │
├─────────────────────────────────────────────────────┤
│                                                     │
│  ONE HEADLINE (what you do)                         │
│  Subhead (for whom / why now)                       │
│                                                     │
│  [Primary CTA]  [Secondary CTA]                     │
│                                                     │
│  [Product Screenshot / Demo / Hero Moment]          │
│                                                     │
└─────────────────────────────────────────────────────┘

Critical Rules

• •One story per viewport: Each section answers one question
• •Card hierarchy in bento: Varied sizing shows importance (no box soup)
• •One hero moment: One 3D effect/parallax/animation per page max
• •Glass for atmosphere: Hero backgrounds, footer CTAs OK for glass
• •Bold typography: Marketing allows expressive display fonts

Detailed guide: references/marketing-patterns.md

Product Workflow

Building core product features? Follow this sequence:

1. Foundation First

• •Define component hierarchy (primary/secondary/tertiary buttons)
• •Establish spacing scale and apply everywhere
• •Set up typography scale (3-4 sizes maximum)
• •Create color tokens (1 brand accent, neutral scale)

2. Build Solid

• •All forms/tables/dense content on solid surfaces
• •Test readability in worst-case scenarios
• •Ensure interactive states are obvious

3. Add Chrome (Selective)

• •Glass only for layering (nav, sheets, toolbars)
• •Motion only for feedback (150-220ms, purposeful)
• •One hero moment if marketing-adjacent

4. Polish

• •Consistent component geometry (radii, elevation)
• •Microinteractions for key actions only
• •Respect prefers-reduced-motion

Detailed guide: references/foundation-first.md

Premium Pass

Systematic refinement checklist. Apply after foundation is solid.

Token System

Define once, use everywhere:

/* Spacing scale */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;

/* Radii */
--radius-sm: 8px; /* inputs */
--radius-md: 12px; /* buttons */
--radius-lg: 16px; /* cards */
--radius-xl: 24px; /* modals */

/* Motion */
--duration-fast: 150ms;
--duration-base: 220ms;
--ease-out: cubic-bezier(0.33, 1, 0.68, 1);

Glass System

Only use where it clarifies layering:

// Chrome glass (nav, toolbars)
className = 'backdrop-blur-md bg-white/70 border border-white/20';

// Overlay glass (modals)
className = 'backdrop-blur-lg bg-white/80 border border-white/30';

Motion Budget

Pick 2-4 transitions and reuse:

1. •Fade/slide — Overlays, modals (150-220ms)
2. •Hover lift — Cards, buttons (translateY -2px)
3. •Expand/collapse — Accordions
4. •Page transitions — Route changes (if any)

Always include:

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

Accessibility Validation

• • Text contrast ≥ 4.5:1 (WCAG 1.4.3)
• • Interactive elements ≥ 3:1 (WCAG 1.4.11)
• • Reduced motion support (WCAG 2.3.3)
• • Focus indicators visible
• • Touch targets ≥ 44×44px

Creative Direction (Avoiding AI Slop)

The Problem: Generic AI aesthetics lack intentionality. They converge on safe choices (Inter fonts, purple gradients, predictable layouts).

The Solution: Choose bold aesthetic direction and execute with precision.

Bold Aesthetic Framework

Before coding, commit to a direction:

• •Purpose: What problem does this solve? Who uses it?
• •Tone: Pick an extreme aesthetic (see examples below)
• •Differentiation: What's the ONE thing users will remember?

Aesthetic Directions (examples, not exhaustive):

• •Brutally minimal (Vercel)
• •Editorial luxury (Stripe)
• •Technical precision (Linear)
• •Motion-forward (Framer)
• •Organic/natural
• •Retro-futuristic
• •Industrial/utilitarian
• •Art deco/geometric

Typography Distinctiveness

Avoid: Inter, Roboto, Arial, system fonts (overused AI defaults)

Prefer: Distinctive pairings that match your tone

• •Display font (headlines) + Refined body font
• •Unexpected but appropriate character
• •Generous size hierarchy (marketing can go bigger)

Color Distinctiveness

Avoid: Purple gradients on white, generic SaaS palettes

Prefer:

• •One dominant brand accent
• •Atmospheric backgrounds (gradients, noise, mesh)
• •High contrast for CTAs
• •Contextual color that matches purpose

Layout Distinctiveness

Avoid: Centered everything, predictable grid

Prefer:

• •Asymmetry with purpose
• •Overlap and layering
• •Diagonal flow
• •Grid-breaking elements where appropriate

CRITICAL: Minimalist and maximalist both work—the key is intentionality and execution quality, not intensity.

Detailed guide: references/creative-direction.md

Component Library

Systematic component patterns to maintain consistency:

Button Hierarchy

// Primary (ONE per section)
<button className="px-4 py-2 rounded-lg bg-gray-900 text-white
                   hover:bg-gray-800 transition-colors">

// Secondary
<button className="px-4 py-2 rounded-lg border border-gray-300
                   hover:bg-gray-50 transition-colors">

// Ghost
<button className="px-4 py-2 rounded-lg hover:bg-gray-100 transition-colors">

Card Patterns

// Solid card (default for content)
<div className="p-6 rounded-2xl border border-gray-200 bg-white shadow-sm
               hover:shadow-md hover:-translate-y-0.5 transition-all">

// Glass card (chrome only)
<div className="p-6 rounded-2xl border border-white/20
               backdrop-blur-md bg-white/70 shadow-sm">

Input Standards

<input
  className="w-full px-3 py-2 rounded-lg border border-gray-300 
                  focus:border-gray-900 focus:ring-1 focus:ring-gray-900 
                  transition-colors"
/>

Full component guide: references/component-library.md

Benchmark Patterns

Learn from premium products:

Key insight: Premium = recognizable system. Everything obeys the same rules.

Progressive Disclosure

When to Read References

Critical Reminders

1. •Foundation before effects: Fix hierarchy/spacing/consistency before adding glass/motion
2. •Solid for data: Tables, forms, dense content always solid backgrounds
3. •One hero moment: Marketing pages get ONE special effect max
4. •Systematic tokens: Define spacing/radii/colors once, use everywhere
5. •Test worst-case: Glass effects must work over busiest possible background
6. •Motion budget: 2-4 transition types maximum, reused consistently
7. •Accessibility: Not optional—text contrast, reduced motion, focus states
8. •Creative boldness: Generic AI aesthetics come from timid choices—commit to direction