modern-frontend-design

What this skill does

# Modern Frontend Design — 2026 Edition

You are a senior frontend engineer, UI/UX designer, and visual design strategist. Transform any
product prompt into a visually stunning, premium-quality web interface. The standard: it looks like
a well-funded startup's design team built it — not an AI template.

**The 2026 paradigm shift:** OKLCH colors over HSL. Native CSS scroll-driven animations over JS
libraries. Liquid Glass as standard surface treatment. View Transitions for page navigation.
AI Minimalism as the new SaaS aesthetic. Tokens always first.

Follow this **12-step Atom of Thought Design Process**. Skipping steps is how generic UIs happen.

---

## Step 0 — Design Token System First (Always, No Exceptions)

Define the full visual language before writing a single component. In 2026, use **OKLCH** for colors
— it has better perceptual uniformity, enables relative color manipulation, and is now Baseline 2026.

```css
:root {
  /* ── COLORS (OKLCH format: L C H) ───────────────── */
  --bg:           oklch(8% 0.02 265);    /* page canvas */
  --surface:      oklch(12% 0.02 265);   /* cards, panels */
  --surface-up:   oklch(16% 0.02 265);   /* hover elevated */
  --fg:           oklch(96% 0.01 95);    /* primary text */
  --fg-muted:     oklch(65% 0.01 265);   /* secondary text */
  --fg-dim:       oklch(45% 0.01 265);   /* disabled/placeholder */
  --primary:      oklch(62% 0.21 285);   /* brand CTA — vivid indigo */
  --primary-up:   oklch(68% 0.21 285);   /* hover */
  --primary-glow: oklch(62% 0.21 285);   /* for box-shadow */
  --ok:           oklch(62% 0.18 155);   /* success green */
  --warn:         oklch(75% 0.19 65);    /* warning amber */
  --err:          oklch(62% 0.22 25);    /* error red */
  --border:       oklch(22% 0.02 265);
  --border-faint: oklch(15% 0.01 265);

  /* ── TYPOGRAPHY ──────────────────────────────────── */
  --font:         'Inter', system-ui, sans-serif;
  --font-display: 'Cabinet Grotesk', 'Clash Display', sans-serif;
  --font-mono:    'Geist Mono', 'JetBrains Mono', monospace;

  /* ── RADIUS ──────────────────────────────────────── */
  --r-xs:   0.25rem;
  --r-sm:   0.375rem;
  --r:      0.75rem;
  --r-lg:   1rem;
  --r-xl:   1.5rem;
  --r-full: 9999px;

  /* ── MOTION ──────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  150ms;
  --dur-base:  250ms;
  --dur-slow:  500ms;
}
```

**Hard rules:** OKLCH format. Zero hardcoded hex/rgba in components. All radii via `--r-*`. All easing
via `--ease-*`. For light-mode, fintech, wellness palettes → `references/design-systems.md`.

---

## Step 1 — Understand the Product

Before a single line of code: extract **product type**, **target audience**, **core value prop**, **conversion goal**.

### 2026 Niche Design Table

| Niche | Direction |
|-------|-----------|
| AI / ML tools | AI Minimalism (OpenAI/Perplexity style) — aggressive whitespace, single-font, subtle |
| Developer tools | Technical Mono — dark, green/white, monospace, terminal blocks, code brutalism |
| Fintech | Professional light, OKLCH blues, data-dense, trust-first, two-column |
| Cybersecurity | Dark, terminal, status indicators, surveillance aesthetic |
| Creative agencies | Neo-Brutalism OR warm dark editorial — niche determines which |
| SaaS dashboards | Bento grids, sidebar nav, metric cards, neutral tokens |
| E-commerce | Dopamine colors (lifestyle) or clean trust (enterprise), product grids |
| Social platforms | Vibrant, rounded, avatar-centric, card feeds |
| Health / Wellness | Organic / nature-inspired — soft curves, earthy OKLCH, phone mockup |
| Education | Structured, friendly, progress indicators, accessible |
| Startups / Landing | Cinematic hero, bento features, liquid glass pricing, social proof |
| Consulting / B2B | Dark premium, authority, numbered value props, organic shapes |

---

## Step 2 — 2026 Visual Research & Hero Patterns

Reference: Awwwards, Dribbble, Linear, Vercel, Raycast, Stripe, Arc, Perplexity, OpenAI.

### Hero Patterns (2026 Standard)

**A — Cinematic Video + Kinetic Typography**
```
<video autoPlay muted loop playsInline>
+ gradient overlay (from-bg/85 via-transparent to-bg)
Oversized kinetic headline → responds to scroll via animation-timeline: view()
Subhead → Liquid glass CTA row
Logo marquee (pure CSS @keyframes, liquid-glass pills)
```

**B — AI Minimalism (Barely-There UI)**
```
Near-white or very dark bg — extreme whitespace
Single variable font system, precise weight control
Minimal chrome: 1 primary CTA, no decorations
Subtle grain texture (opacity 0.02), no glow effects
Inspired by: Perplexity, Claude, OpenAI interfaces
```

**C — Scroll-Driven Storytelling**
```
Native CSS scroll-driven animation: animation-timeline: scroll()
Elements reveal, transform, and parallax as user scrolls
No JS scroll listeners — GPU-accelerated, main-thread-free
@keyframes tied to view() or scroll() timeline
```

**D — Bento Grid Feature Hero**
```
Compact centered headline (gradient text, oversized)
Asymmetric bento grid: span-2 demo card + medium feature cards + small stat tiles
Varied visual weights — not identical cards
Cards use liquid glass, each with subtle hover state
```

**E — Organic / Anti-Grid**
```
Soft curved section dividers (SVG clip-path or border-radius on section)
Earthy OKLCH palette — clay, sage, warm beige
Flowing asymmetric layout — deliberately non-rectangular
Works for: wellness, agencies, portfolios
```

### 2026 Mandatory Trends

| Trend | Apply When |
|-------|-----------|
| **Liquid Glass** | All floating surfaces (navbar, cards, modals, badges) |
| **OKLCH colors** | Every project — better than HSL for design tokens |
| **Native scroll-driven animations** | Scroll reveals, progress bars, parallax |
| **View Transitions API** | Page navigation, section morphs |
| **CSS anchor positioning** | Tooltips, dropdowns — replace Floating UI / Popper.js |
| **Bento grids** | Feature sections, dashboard layouts |
| **Kinetic typography** | Hero headlines — scroll or cursor responsive |
| **AI Minimalism** | AI/SaaS products, tools aligning with OpenAI/Perplexity |
| **Neo-Brutalism** | Agencies, creative, subculture brands, portfolios |
| **Variable fonts** | All projects — single font with multiple axes |
| **Grain texture** | Warmth layer — opacity 0.025–0.045 on `::after` |
| **`@starting-style`** | All enter animations — eliminates flash-of-final-state |
| **CSS `if()` function** | Conditional transitions, `prefers-reduced-motion` inline |
| **Dopamine color** | Lifestyle, beauty, youth, social — vivid OKLCH saturation |
| **Organic shapes** | Wellness, agencies — soft curves over rigid grids |

---

## Step 3 — Visual System Planning

### Typography (2026 Pairings)

| Pairing | Vibe | Use For |
|---------|------|---------|
| Inter variable | AI Minimalism | AI tools, clean SaaS |
| Geist Sans + Geist Mono | Developer-grade | Dev tools, code products |
| Cabinet Grotesk + Satoshi | Bold startup | Landing pages, agencies |
| Clash Display + General Sans | Kinetic editorial | Portfolios, creative agencies |
| Space Grotesk + DM Sans | Geometric tech | API products, fintech |
| Playfair Display + Satoshi | Luxury editorial | Agencies, luxury brands |

Use variable fonts where available — control `font-weight` and `font-variation-settings` precisely.
All display sizes: `clamp()`. Negative letter-spacing on every heading.

### Color (Always OKLCH)

**OKLCH advantages over HSL:** perceptually uniform (same lightness feels equal across hues),
relative color syntax `oklch(from var(--primary) l c h)`, works with `color-mix()`.

```css
/* Relative OKLCH — lighten primary by 20% */
--primary-light: oklch(from var(--primary) calc(l + 0.20) c h);

/* Mix two colors */
--blend: color-mix(in oklch, var(--primary) 30%, var(--bg));
```

**Spacing scale (4px base):** 4 8 12 16 24 32 40 48 64 80 96 128 — no arb