Premium UI Systems

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