From b5edaa1a7d0d51ccc465751403537d35d467c379 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 20 Apr 2026 15:15:16 +0000
Subject: [PATCH 01/12] Add CLAUDE.md with standing frontend design
 instructions

Encodes all principles from the Frontend Design Toolkit as operating
instructions: aesthetic-first workflow, OKLCH design tokens, named
aesthetic presets, motion/a11y rules, polish pipeline, and decision
matrices for theming, testing, and docs currency.

https://claude.ai/code/session_017ggBPbki5bwiHpFnqpSZ5U
---
 CLAUDE.md | 231 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 231 insertions(+)
 create mode 100644 CLAUDE.md

diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..75b8533
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,231 @@
+# Claude Code Frontend Design Toolkit — Standing Instructions
+
+This file encodes the principles from the Frontend Design Toolkit as standing instructions. Apply these on every frontend task.
+
+---
+
+## Core Philosophy
+
+**Default Claude output is AI slop.** Same fonts (Inter), same purple gradient, same rounded card layout. Every frontend task must start by picking a real aesthetic direction before writing any code. Never default to generic.
+
+---
+
+## Design Workflow (always follow this order)
+
+1. **Pick an aesthetic** — Choose a named style from the list below or derive one from the product context. Never code without a direction.
+2. **Define tokens** — Use OKLCH color space. Build the palette from a single `--brand-hue` variable. One number controls everything.
+3. **Code the UI** — Apply the aesthetic consistently. Use CSS variables and cohesive color systems. Block generic component patterns.
+4. **Require real typography** — Pick an actual font pairing, not just whatever sans-serif is available.
+5. **Add motion** — Audit for conditional UI that should animate but doesn't (`AnimatePresence` on conditional renders, transitions on dynamic styles).
+6. **Polish pipeline** — After generating a page: fix spacing/typography/states → fix accessibility → fix motion/perf budgets.
+
+---
+
+## Named Aesthetics (reference by name in prompts)
+
+| Aesthetic | Key Directives |
+|-----------|---------------|
+| **Swiss Minimalism** | Helvetica/Neue, strict grid, maximum white space, no decoration |
+| **Neumorphism** | Soft box-shadows both directions, extruded elements, monochrome |
+| **Glassmorphism** | `backdrop-filter: blur()`, frosted glass panels, transparency layers |
+| **Brutalism** | System fonts, visible borders, no border-radius, loud color blocks, raw layout |
+| **Claymorphism** | 3D clay blobs, very soft shadows, inflated shapes |
+| **Aurora Mesh** | Flowing mesh gradients, soft color transitions, dreamy atmosphere |
+| **Cyberpunk** | Neon on true `#000`, monospace type, glitch effects, scan lines, cyan/magenta |
+| **3D Hyperrealism** | Depth, perspective, realistic lighting, layered z-space |
+| **Block Maximalism** | Color blocks, bold contrast, loud typography, every pixel used |
+| **Dark OLED Luxury** | True `#000000` bg, gold/cream accents, thin serif type, minimal chrome |
+| **Organic Biomorphic** | Earth tones, rounded organic shapes, warm shadows, serif body text |
+| **Editorial** | Serif headlines, magazine-style grid, muted palette, pull quotes |
+| **SaaS Minimal** | One accent color, system UI font, generous air, card-based layouts |
+| **Retro-Futuristic** | Gradient meshes, chrome accents, geometric shapes, purple/teal |
+| **Art Deco** | Gold + black, geometric patterns, Playfair Display, strict symmetry |
+| **Solarpunk** | Warm greens/golds/earth tones, organic + technical mix, hopeful, retro-futuristic type |
+
+---
+
+## Design Tokens — Always Use This Pattern
+
+Build the entire color system from a single CSS custom property:
+
+```css
+@import "tailwindcss";
+@theme {
+  --brand-hue: 250; /* Change this one number to re-theme everything */
+  --color-primary:    oklch(0.6  0.2  var(--brand-hue));
+  --color-background: oklch(0.995 0.005 var(--brand-hue));
+  --color-foreground: oklch(0.15 0.02 var(--brand-hue));
+  --color-muted:      oklch(0.94 0.01 var(--brand-hue));
+  --color-border:     oklch(0.88 0.015 var(--brand-hue));
+  /* + typography scale, 4px spacing grid, radius, shadows */
+}
+```
+
+Rules:
+- **Never hardcode hex values** — always use token references
+- **Always include dark mode tokens** — semantic light/dark theming from the start
+- **Use brand-tinted neutrals** — not pure white/black, always slightly hue-tinted
+- **OKLCH color space** — wider gamut, perceptually uniform, use it exclusively
+
+---
+
+## Typography Rules
+
+- Every project needs a deliberate font pairing (display + body, or serif + sans)
+- Define a type scale (e.g. 12/14/16/20/24/32/48/64px)
+- Set `line-height`, `letter-spacing`, and `font-weight` explicitly at each scale step
+- Never leave font choices to browser defaults
+
+---
+
+## Motion & Animation
+
+Every UI should have intentional motion. Audit for:
+- Conditional renders without enter/exit transitions
+- Dynamic data updates without smooth transitions
+- Hover states with no visual feedback
+- Page/route transitions that are instant
+
+Motion libraries by use case:
+- **Framer Motion / Motion** — React animations, gestures, layout animations, spring physics
+- **GSAP + ScrollTrigger** — Complex timelines, scroll-driven effects
+- **anime.js** — Lightweight, CSS property animations
+- **Lottie** — Designer-exported animation files
+
+Motion constraints (production):
+- Respect `prefers-reduced-motion` — always add `@media (prefers-reduced-motion: reduce)`
+- Duration budget: micro-interactions 100-200ms, transitions 200-400ms, page transitions 300-500ms
+- Easing: prefer spring physics or `ease-out` — never linear for UI
+
+---
+
+## Accessibility (non-negotiable)
+
+- All interactive elements must have keyboard navigation and visible focus states
+- Use semantic HTML (`<button>`, `<nav>`, `<main>`, `<article>`) not `<div>` for structure
+- Every image needs meaningful `alt` text or `alt=""`  for decorative
+- Color contrast: minimum WCAG AA (4.5:1 text, 3:1 UI components)
+- Form inputs need associated `<label>` elements
+- ARIA only when semantic HTML is insufficient
+
+---
+
+## Polish Pipeline (run in sequence after generating a page)
+
+```
+1. Generate UI        → Pick aesthetic, apply tokens, write components
+2. Baseline polish    → Fix spacing, typography hierarchy, interactive states
+3. Accessibility fix  → Keyboard, ARIA labels, focus, semantic structure
+4. Motion/Perf fix    → Reduced-motion support, animation perf, bundle size
+```
+
+---
+
+## Decision Matrix — Theming
+
+| Goal | Approach |
+|------|----------|
+| Lock a project to one aesthetic fast | CLAUDE.md theme block (see below) |
+| Full token system with OKLCH math | `--brand-hue` single-variable approach |
+| shadcn/ui theming | shadcn `@layer base` + CSS variable overrides |
+| Auto-derive rules from Figma | `get_design_context` + `get_variable_defs` |
+| AI picks style automatically | Describe the product type (e.g., "fintech dashboard") |
+| Named aesthetic presets | Use aesthetic names from the table above |
+
+---
+
+## Testing & Browser Automation
+
+When building or debugging frontend UI:
+- **Use Playwright MCP** when available — gives Claude a browser (25+ tools, accessibility tree snapshots, form testing, DOM reading)
+- **Use Chrome DevTools MCP** for perf/network debugging — console inspection, HAR export, Core Web Vitals
+- Prefer accessibility tree snapshots over screenshots (2-5KB vs 500KB+)
+- Test: golden path → edge cases → keyboard navigation → mobile viewport
+
+Development loop:
+```
+DEVELOP  → Claude Code (terminal)
+TEST     → Playwright MCP (E2E, cross-browser)
+DEBUG    → Chrome DevTools MCP (perf, network)
+VERIFY   → Browser visual check
+```
+
+---
+
+## Docs & API Currency
+
+Claude's training data is stale. For any framework, always note version and apply version-specific patterns:
+- **React 19 vs 18** — different APIs (Actions, `use()`, Server Components)
+- **Tailwind v4 vs v3** — complete rewrite (CSS-first `@theme`, no `tailwind.config.js`)
+- **Next.js App Router vs Pages Router** — different data fetching, routing, layouts
+
+Use Context7 MCP (`context7`) when available to fetch live, version-specific docs.
+
+---
+
+## Figma Integration (when Figma MCP is active)
+
+```markdown
+## Figma Workflow
+- Always call get_design_context before coding new components
+- Use get_variable_defs to read token definitions (never assume tokens)
+- Check get_code_connect_map — use existing code components, don't recreate
+- After generating UI, use generate_figma_design to push back to Figma
+- Components: src/components/
+- Tokens: src/styles/tokens.css
+```
+
+The loop: **Figma → get_design_context → code → browser preview → Code to Canvas → Figma**
+
+---
+
+## MCP Token Budget
+
+MCP servers cost tokens at session start. Max 3-5 active:
+
+| Server | ~Token Cost |
+|--------|------------|
+| Playwright MCP | 5.3k |
+| Chrome DevTools | 5-6k |
+| Figma MCP | 3-4k |
+| Context7 | 2k (on-demand) |
+| 5 servers total | ~55k before first message |
+
+Use `/mcp disable <name>` when not in use. Prefer skills over MCP where possible (skills cost ~100 tokens vs thousands).
+
+---
+
+## CLAUDE.md Theme Block Template
+
+For any project, add 5 lines to enforce a site-wide aesthetic:
+
+```markdown
+## Frontend Theme
+<always_use_[aesthetic_name]_theme>
+Always design with [Aesthetic] aesthetic:
+- [Key visual directive 1]
+- [Key visual directive 2]
+- [Key visual directive 3]
+- [Typography: specific font pairing]
+- [Color: specific palette anchors]
+</always_use_[aesthetic_name]_theme>
+```
+
+---
+
+## What "Good" Looks Like
+
+A well-designed Claude Code frontend output has:
+- A named, intentional aesthetic (not "modern" or "clean")
+- OKLCH token-based color system, no hardcoded hex
+- Real font pairing with explicit type scale
+- Motion on all conditional UI (enter/exit, hover, transitions)
+- Semantic HTML structure
+- WCAG AA color contrast minimum
+- Dark mode tokens from the start
+- Mobile-first responsive layout
+- No pure white/black — always hue-tinted neutrals
+
+---
+
+*Source: [Claude Code Frontend Design Toolkit](README.md) — apply these principles on every frontend task.*

From eb2922bed239737ac5a0ec3e1ea72533eca10bb5 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 20 Apr 2026 15:38:26 +0000
Subject: [PATCH 02/12] Expand CLAUDE.md to cover all 10 toolkit sections
 globally

Added missing sections: UI/UX Intelligence (Gestalt, Fitts, Hick's Law),
Framework Skills (React 19/18, Tailwind v4, shadcn), Deploy & Preview,
Recommended Stacks, and full Motion Audit Checklist. Now mirrors the
global ~/.claude/CLAUDE.md so instructions apply in every chat and repo.

https://claude.ai/code/session_017ggBPbki5bwiHpFnqpSZ5U
---
 CLAUDE.md | 318 +++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 221 insertions(+), 97 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 75b8533..7012e39 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1,6 +1,6 @@
-# Claude Code Frontend Design Toolkit — Standing Instructions
+# Claude Code Frontend Design Toolkit — Global Standing Instructions
 
-This file encodes the principles from the Frontend Design Toolkit as standing instructions. Apply these on every frontend task.
+Apply these on every frontend task, in every repo, in every chat.
 
 ---
 
@@ -10,18 +10,17 @@ This file encodes the principles from the Frontend Design Toolkit as standing in
 
 ---
 
-## Design Workflow (always follow this order)
+## 1. Design Skills — Kill the AI Slop
 
-1. **Pick an aesthetic** — Choose a named style from the list below or derive one from the product context. Never code without a direction.
-2. **Define tokens** — Use OKLCH color space. Build the palette from a single `--brand-hue` variable. One number controls everything.
-3. **Code the UI** — Apply the aesthetic consistently. Use CSS variables and cohesive color systems. Block generic component patterns.
-4. **Require real typography** — Pick an actual font pairing, not just whatever sans-serif is available.
-5. **Add motion** — Audit for conditional UI that should animate but doesn't (`AnimatePresence` on conditional renders, transitions on dynamic styles).
-6. **Polish pipeline** — After generating a page: fix spacing/typography/states → fix accessibility → fix motion/perf budgets.
+Always apply these before writing frontend code:
 
----
+- **Pick a named aesthetic** from the list below — never code without a direction
+- **Block cookie-cutter patterns**: no Inter+purple gradient+rounded card defaults
+- **Require real typography pairing**, not whatever sans-serif is available
+- **Enforce CSS variables** and cohesive color systems from the start
+- Reference aesthetics by name (e.g. "use Dark OLED Luxury") — Claude knows what they mean
 
-## Named Aesthetics (reference by name in prompts)
+### Named Aesthetics
 
 | Aesthetic | Key Directives |
 |-----------|---------------|
@@ -42,9 +41,13 @@ This file encodes the principles from the Frontend Design Toolkit as standing in
 | **Art Deco** | Gold + black, geometric patterns, Playfair Display, strict symmetry |
 | **Solarpunk** | Warm greens/golds/earth tones, organic + technical mix, hopeful, retro-futuristic type |
 
+### Design Workflow (always in this order)
+
+1. Pick aesthetic → 2. Define tokens → 3. Code UI → 4. Real typography → 5. Add motion → 6. Polish pipeline
+
 ---
 
-## Design Tokens — Always Use This Pattern
+## 2. Site-Wide Theming & Design Tokens
 
 Build the entire color system from a single CSS custom property:
 
@@ -61,88 +64,129 @@ Build the entire color system from a single CSS custom property:
 }
 ```
 
-Rules:
+Token rules:
 - **Never hardcode hex values** — always use token references
 - **Always include dark mode tokens** — semantic light/dark theming from the start
 - **Use brand-tinted neutrals** — not pure white/black, always slightly hue-tinted
-- **OKLCH color space** — wider gamut, perceptually uniform, use it exclusively
+- **OKLCH color space exclusively** — wider gamut, perceptually uniform
+- Tailwind v4 CSS-first `@theme` (no `tailwind.config.js`)
 
----
+### CLAUDE.md Theme Block Template (for any project)
+
+```markdown
+## Frontend Theme
+<always_use_[aesthetic_name]_theme>
+Always design with [Aesthetic] aesthetic:
+- [Key visual directive 1]
+- [Key visual directive 2]
+- [Typography: specific font pairing]
+- [Color: specific palette anchors]
+</always_use_[aesthetic_name]_theme>
+```
 
-## Typography Rules
+### Theming Decision Matrix
 
-- Every project needs a deliberate font pairing (display + body, or serif + sans)
-- Define a type scale (e.g. 12/14/16/20/24/32/48/64px)
-- Set `line-height`, `letter-spacing`, and `font-weight` explicitly at each scale step
-- Never leave font choices to browser defaults
+| Goal | Approach |
+|------|----------|
+| Lock a project to one aesthetic fast | CLAUDE.md theme block |
+| Full token system with OKLCH math | `--brand-hue` single-variable approach |
+| shadcn/ui theming | `@layer base` + CSS variable overrides |
+| Auto-derive rules from Figma | `get_design_context` + `get_variable_defs` |
+| AI picks style automatically | Describe the product type (e.g. "fintech dashboard") |
+| Named aesthetic presets | Use aesthetic names from the table above |
 
 ---
 
-## Motion & Animation
+## 3. Animation & Motion
 
 Every UI should have intentional motion. Audit for:
-- Conditional renders without enter/exit transitions
+- Conditional renders without enter/exit transitions (`AnimatePresence`)
 - Dynamic data updates without smooth transitions
 - Hover states with no visual feedback
 - Page/route transitions that are instant
 
-Motion libraries by use case:
-- **Framer Motion / Motion** — React animations, gestures, layout animations, spring physics
-- **GSAP + ScrollTrigger** — Complex timelines, scroll-driven effects
-- **anime.js** — Lightweight, CSS property animations
-- **Lottie** — Designer-exported animation files
-
-Motion constraints (production):
-- Respect `prefers-reduced-motion` — always add `@media (prefers-reduced-motion: reduce)`
-- Duration budget: micro-interactions 100-200ms, transitions 200-400ms, page transitions 300-500ms
-- Easing: prefer spring physics or `ease-out` — never linear for UI
+### Motion Libraries by Use Case
+
+| Library | Use Case |
+|---------|----------|
+| **Framer Motion / Motion** | React animations, gestures, layout animations, spring physics |
+| **GSAP + ScrollTrigger** | Complex timelines, scroll-driven effects |
+| **anime.js** | Lightweight, CSS property animations |
+| **Lottie** | Designer-exported animation files |
+| **React Spring** | Physics-based spring animations |
+| **Locomotive Scroll** | Smooth scroll + parallax |
+| **Barba.js** | Page transition animations |
+| **Three.js / React Three Fiber** | 3D interactive experiences |
+
+### Motion Constraints (production)
+
+- Always add `@media (prefers-reduced-motion: reduce)` — non-negotiable
+- Micro-interactions: 100–200ms
+- Transitions: 200–400ms
+- Page transitions: 300–500ms
+- Easing: spring physics or `ease-out` — never linear for UI
+- Bundle-conscious: `LazyMotion` (4.6KB) or `useAnimate` (2.3KB) for Framer
+
+### Motion Audit Checklist
+
+Before shipping any page, check:
+- [ ] All conditional renders have enter/exit animations
+- [ ] All dynamic data updates transition smoothly
+- [ ] All interactive elements have hover/focus feedback
+- [ ] Route changes have a transition
+- [ ] `prefers-reduced-motion` respected everywhere
 
 ---
 
-## Accessibility (non-negotiable)
+## 4. UI/UX Intelligence
+
+Apply these UX principles on every interface:
+
+- **Gestalt principles** — proximity, similarity, continuity, closure, figure/ground
+- **Fitts's Law** — interactive targets must be large enough and close enough
+- **Hick's Law** — reduce choices to reduce decision time
+- **Visual hierarchy** — size, weight, color, contrast, spacing all communicate priority
+- **Mobile-first** — design for smallest viewport first, enhance upward
+- **Information architecture** — label clearly, group logically, reduce cognitive load
+
+### Accessibility (non-negotiable)
 
 - All interactive elements must have keyboard navigation and visible focus states
 - Use semantic HTML (`<button>`, `<nav>`, `<main>`, `<article>`) not `<div>` for structure
-- Every image needs meaningful `alt` text or `alt=""`  for decorative
+- Every image needs meaningful `alt` text, or `alt=""` for decorative
 - Color contrast: minimum WCAG AA (4.5:1 text, 3:1 UI components)
 - Form inputs need associated `<label>` elements
 - ARIA only when semantic HTML is insufficient
 
 ---
 
-## Polish Pipeline (run in sequence after generating a page)
+## 5. Design-to-Code Pipeline (Figma)
 
-```
-1. Generate UI        → Pick aesthetic, apply tokens, write components
-2. Baseline polish    → Fix spacing, typography hierarchy, interactive states
-3. Accessibility fix  → Keyboard, ARIA labels, focus, semantic structure
-4. Motion/Perf fix    → Reduced-motion support, animation perf, bundle size
-```
+When Figma MCP is active:
 
----
+```markdown
+## Figma Workflow
+- Always call get_design_context before coding new components
+- Use get_variable_defs to read token definitions (never assume tokens)
+- Check get_code_connect_map — use existing code components, don't recreate
+- After generating UI, use generate_figma_design to push back to Figma
+- Components: src/components/
+- Tokens: src/styles/tokens.css
+```
 
-## Decision Matrix — Theming
+The loop: **Figma → get_design_context → code → browser preview → Code to Canvas → Figma**
 
-| Goal | Approach |
-|------|----------|
-| Lock a project to one aesthetic fast | CLAUDE.md theme block (see below) |
-| Full token system with OKLCH math | `--brand-hue` single-variable approach |
-| shadcn/ui theming | shadcn `@layer base` + CSS variable overrides |
-| Auto-derive rules from Figma | `get_design_context` + `get_variable_defs` |
-| AI picks style automatically | Describe the product type (e.g., "fintech dashboard") |
-| Named aesthetic presets | Use aesthetic names from the table above |
+Figma MCP install:
+```bash
+claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse
+```
 
 ---
 
-## Testing & Browser Automation
+## 6. Testing & Browser Automation
 
-When building or debugging frontend UI:
-- **Use Playwright MCP** when available — gives Claude a browser (25+ tools, accessibility tree snapshots, form testing, DOM reading)
-- **Use Chrome DevTools MCP** for perf/network debugging — console inspection, HAR export, Core Web Vitals
-- Prefer accessibility tree snapshots over screenshots (2-5KB vs 500KB+)
-- Test: golden path → edge cases → keyboard navigation → mobile viewport
+Claude can't see the UI by default. Always test:
 
-Development loop:
 ```
 DEVELOP  → Claude Code (terminal)
 TEST     → Playwright MCP (E2E, cross-browser)
@@ -150,66 +194,145 @@ DEBUG    → Chrome DevTools MCP (perf, network)
 VERIFY   → Browser visual check
 ```
 
+- **Playwright MCP** — 25+ tools, accessibility tree snapshots (2–5KB vs 500KB+ screenshots), form testing, DOM reading
+  - `--vision auto` — accessibility tree by default, switches to vision for canvas/WebGL
+  - `--save-video=800x600` — record test sessions
+  - `--caps=devtools` — Core Web Vitals (LCP, CLS, INP)
+- **Chrome DevTools MCP** — console, network, performance profiling, HAR export, device emulation
+- Test order: golden path → edge cases → keyboard navigation → mobile viewport
+
+Install:
+```bash
+claude mcp add playwright -s user -- npx @playwright/mcp@latest
+claude mcp add chrome-devtools -s user -- npx @anthropic-ai/chrome-devtools-mcp@latest
+```
+
 ---
 
-## Docs & API Currency
+## 7. Docs & Context — Stop Hallucinating APIs
+
+Claude's training data is stale. Always note the framework version and use version-specific patterns:
 
-Claude's training data is stale. For any framework, always note version and apply version-specific patterns:
-- **React 19 vs 18** — different APIs (Actions, `use()`, Server Components)
-- **Tailwind v4 vs v3** — complete rewrite (CSS-first `@theme`, no `tailwind.config.js`)
-- **Next.js App Router vs Pages Router** — different data fetching, routing, layouts
+| Framework | Watch for |
+|-----------|-----------|
+| **React 19 vs 18** | Different APIs: Actions, `use()`, Server Components |
+| **Tailwind v4 vs v3** | Complete rewrite: CSS-first `@theme`, no `tailwind.config.js` |
+| **Next.js App Router vs Pages Router** | Different data fetching, routing, layouts |
+| **Motion (Framer Motion v11+)** | `useAnimate`, `LazyMotion`, new API surface |
 
-Use Context7 MCP (`context7`) when available to fetch live, version-specific docs.
+- Use **Context7 MCP** when available — live, version-specific docs for 1000+ libraries
+- Install: `claude mcp add context7 -s user -- npx -y @upstash/context7-mcp@latest`
+- For internal libraries Context7 doesn't cover, use Skill Seekers to generate a skill from docs
 
 ---
 
-## Figma Integration (when Figma MCP is active)
+## 8. Framework Skills
+
+### Typography Rules
+
+- Every project needs a deliberate font pairing (display + body, or serif + sans)
+- Define a type scale: 12/14/16/20/24/32/48/64px
+- Set `line-height`, `letter-spacing`, and `font-weight` explicitly at each step
+- Never leave font choices to browser defaults
+
+### React Patterns
+
+- React 19: prefer Actions, `use()`, Server Components where applicable
+- React 18: `Suspense`, `useTransition`, concurrent features
+- Always co-locate state with the component that owns it
+
+### Tailwind v4 Patterns
+
+- CSS-first configuration — everything in `@theme {}` block, no JS config
+- Dark mode via CSS media queries or `[data-theme]` attribute
+- Use `@layer components` for reusable component styles
+- Plugins: `@tailwindcss/forms`, `@tailwindcss/typography`
+
+### shadcn/ui Patterns
+
+- Override tokens in `@layer base` via CSS variables
+- Never modify shadcn component source — extend via `className` or slots
+- Use `cn()` utility for conditional class merging
+
+### Polish Pipeline (run in sequence after generating a page)
 
-```markdown
-## Figma Workflow
-- Always call get_design_context before coding new components
-- Use get_variable_defs to read token definitions (never assume tokens)
-- Check get_code_connect_map — use existing code components, don't recreate
-- After generating UI, use generate_figma_design to push back to Figma
-- Components: src/components/
-- Tokens: src/styles/tokens.css
+```
+1. Generate UI           → Pick aesthetic, apply tokens, write components
+2. Baseline polish       → Fix spacing, typography hierarchy, interactive states
+3. Accessibility fix     → Keyboard, ARIA labels, focus, semantic structure
+4. Motion/Perf fix       → Reduced-motion support, animation perf, bundle size
 ```
 
-The loop: **Figma → get_design_context → code → browser preview → Code to Canvas → Figma**
+---
+
+## 9. Deploy & Preview
+
+- **Vercel MCP** — manage deployments, preview branches, build logs, env vars, domains
+- **PinMe** — zero-config deploy, no servers or accounts needed
+
+---
+
+## 10. Recommended Stacks
+
+### Essentials (every project)
+
+```bash
+claude plugin add anthropic/frontend-design
+claude mcp add context7 -s user -- npx -y @upstash/context7-mcp@latest
+claude mcp add playwright -s user -- npx @playwright/mcp@latest
+```
+
+### Design-First (Figma to Code)
+
+```bash
+claude plugin add anthropic/frontend-design
+claude mcp add context7 -s user -- npx -y @upstash/context7-mcp@latest
+claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse
+claude mcp add playwright -s user -- npx @playwright/mcp@latest
+claude plugin add anthropic/typescript-lsp
+```
+
+### Solo Builder (MVP speed)
+
+```bash
+claude plugin add anthropic/frontend-design
+claude mcp add context7 -s user -- npx -y @upstash/context7-mcp@latest
+claude plugin add nextlevelbuilder/ui-ux-pro-max-skill
+claude mcp add playwright -s user -- npx @playwright/mcp@latest
+```
+
+### Full Stack (component library + design system)
+
+```bash
+claude plugin add anthropic/frontend-design
+claude plugin add nextlevelbuilder/ui-ux-pro-max-skill
+claude mcp add context7 -s user -- npx -y @upstash/context7-mcp@latest
+claude plugin add anthropic/typescript-lsp
+claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse
+claude mcp add playwright -s user -- npx @playwright/mcp@latest
+claude mcp add chrome-devtools -s user -- npx @anthropic-ai/chrome-devtools-mcp@latest
+npx ui-skills add baseline-ui
+npx ui-skills add fixing-accessibility
+npx ui-skills add fixing-motion-performance
+```
 
 ---
 
 ## MCP Token Budget
 
-MCP servers cost tokens at session start. Max 3-5 active:
+Keep 3–5 MCP servers active max:
 
 | Server | ~Token Cost |
 |--------|------------|
 | Playwright MCP | 5.3k |
-| Chrome DevTools | 5-6k |
-| Figma MCP | 3-4k |
+| Chrome DevTools | 5–6k |
+| Figma MCP | 3–4k |
 | Context7 | 2k (on-demand) |
 | 5 servers total | ~55k before first message |
 
-Use `/mcp disable <name>` when not in use. Prefer skills over MCP where possible (skills cost ~100 tokens vs thousands).
-
----
-
-## CLAUDE.md Theme Block Template
-
-For any project, add 5 lines to enforce a site-wide aesthetic:
-
-```markdown
-## Frontend Theme
-<always_use_[aesthetic_name]_theme>
-Always design with [Aesthetic] aesthetic:
-- [Key visual directive 1]
-- [Key visual directive 2]
-- [Key visual directive 3]
-- [Typography: specific font pairing]
-- [Color: specific palette anchors]
-</always_use_[aesthetic_name]_theme>
-```
+- Use `/mcp disable <name>` when not in use
+- Prefer skills over MCP servers where possible (skills ~100 tokens vs thousands)
+- Enable Tool Search for lazy loading (up to 95% cost reduction)
 
 ---
 
@@ -225,7 +348,8 @@ A well-designed Claude Code frontend output has:
 - Dark mode tokens from the start
 - Mobile-first responsive layout
 - No pure white/black — always hue-tinted neutrals
+- Tested: golden path + edge cases + keyboard nav + mobile viewport
 
 ---
 
-*Source: [Claude Code Frontend Design Toolkit](README.md) — apply these principles on every frontend task.*
+*Source: [Claude Code Frontend Design Toolkit](https://github.com/lukej01/Claude-Code-Frontend-Design-Toolkit) — applied globally on every frontend task.*

From c1a7719a44cc13591bd7c836a64263ecb6468ba2 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 20 Apr 2026 15:42:25 +0000
Subject: [PATCH 03/12] =?UTF-8?q?Compress=20CLAUDE.md:=20355=20=E2=86=92?=
 =?UTF-8?q?=20127=20lines,=20same=20coverage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Removed verbose prose, redundant install commands, and bloated
examples while keeping all 10 sections, decision matrices, and
every actionable rule.

https://claude.ai/code/session_017ggBPbki5bwiHpFnqpSZ5U
---
 CLAUDE.md | 392 ++++++++++++------------------------------------------
 1 file changed, 82 insertions(+), 310 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 7012e39..37584f2 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1,355 +1,127 @@
-# Claude Code Frontend Design Toolkit — Global Standing Instructions
+# Frontend Design — Global Standing Instructions
 
-Apply these on every frontend task, in every repo, in every chat.
+Apply on every frontend task, every repo, every chat. Never default to generic AI output.
 
----
+## Core Rule
 
-## Core Philosophy
+**Pick a named aesthetic before writing any code.** No Inter+purple gradient+rounded cards.
+Order: aesthetic → tokens → code → typography → motion → polish.
 
-**Default Claude output is AI slop.** Same fonts (Inter), same purple gradient, same rounded card layout. Every frontend task must start by picking a real aesthetic direction before writing any code. Never default to generic.
-
----
-
-## 1. Design Skills — Kill the AI Slop
-
-Always apply these before writing frontend code:
-
-- **Pick a named aesthetic** from the list below — never code without a direction
-- **Block cookie-cutter patterns**: no Inter+purple gradient+rounded card defaults
-- **Require real typography pairing**, not whatever sans-serif is available
-- **Enforce CSS variables** and cohesive color systems from the start
-- Reference aesthetics by name (e.g. "use Dark OLED Luxury") — Claude knows what they mean
-
-### Named Aesthetics
+## Named Aesthetics
 
 | Aesthetic | Key Directives |
 |-----------|---------------|
-| **Swiss Minimalism** | Helvetica/Neue, strict grid, maximum white space, no decoration |
-| **Neumorphism** | Soft box-shadows both directions, extruded elements, monochrome |
-| **Glassmorphism** | `backdrop-filter: blur()`, frosted glass panels, transparency layers |
-| **Brutalism** | System fonts, visible borders, no border-radius, loud color blocks, raw layout |
-| **Claymorphism** | 3D clay blobs, very soft shadows, inflated shapes |
-| **Aurora Mesh** | Flowing mesh gradients, soft color transitions, dreamy atmosphere |
-| **Cyberpunk** | Neon on true `#000`, monospace type, glitch effects, scan lines, cyan/magenta |
-| **3D Hyperrealism** | Depth, perspective, realistic lighting, layered z-space |
-| **Block Maximalism** | Color blocks, bold contrast, loud typography, every pixel used |
-| **Dark OLED Luxury** | True `#000000` bg, gold/cream accents, thin serif type, minimal chrome |
-| **Organic Biomorphic** | Earth tones, rounded organic shapes, warm shadows, serif body text |
-| **Editorial** | Serif headlines, magazine-style grid, muted palette, pull quotes |
-| **SaaS Minimal** | One accent color, system UI font, generous air, card-based layouts |
-| **Retro-Futuristic** | Gradient meshes, chrome accents, geometric shapes, purple/teal |
-| **Art Deco** | Gold + black, geometric patterns, Playfair Display, strict symmetry |
-| **Solarpunk** | Warm greens/golds/earth tones, organic + technical mix, hopeful, retro-futuristic type |
-
-### Design Workflow (always in this order)
-
-1. Pick aesthetic → 2. Define tokens → 3. Code UI → 4. Real typography → 5. Add motion → 6. Polish pipeline
-
----
-
-## 2. Site-Wide Theming & Design Tokens
-
-Build the entire color system from a single CSS custom property:
+| Swiss Minimalism | Helvetica, strict grid, max white space |
+| Neumorphism | Soft shadows both directions, monochrome |
+| Glassmorphism | `backdrop-filter: blur()`, frosted panels |
+| Brutalism | System fonts, visible borders, no border-radius |
+| Claymorphism | 3D clay blobs, very soft shadows |
+| Aurora Mesh | Flowing mesh gradients, dreamy color transitions |
+| Cyberpunk | Neon on `#000`, monospace, glitch, cyan/magenta |
+| 3D Hyperrealism | Depth, perspective, realistic lighting |
+| Block Maximalism | Color blocks, bold contrast, loud type |
+| Dark OLED Luxury | True `#000000`, gold/cream accents, thin serif |
+| Organic Biomorphic | Earth tones, rounded shapes, warm shadows |
+| Editorial | Serif headlines, magazine grid, muted palette |
+| SaaS Minimal | One accent, system UI font, generous spacing |
+| Retro-Futuristic | Gradient meshes, chrome, geometric, purple/teal |
+| Art Deco | Gold + black, geometric patterns, Playfair Display |
+| Solarpunk | Greens/golds/earth tones, organic + technical mix |
+
+## Design Tokens — Always
 
 ```css
-@import "tailwindcss";
 @theme {
-  --brand-hue: 250; /* Change this one number to re-theme everything */
+  --brand-hue: 250; /* one number re-themes everything */
   --color-primary:    oklch(0.6  0.2  var(--brand-hue));
   --color-background: oklch(0.995 0.005 var(--brand-hue));
   --color-foreground: oklch(0.15 0.02 var(--brand-hue));
   --color-muted:      oklch(0.94 0.01 var(--brand-hue));
   --color-border:     oklch(0.88 0.015 var(--brand-hue));
-  /* + typography scale, 4px spacing grid, radius, shadows */
 }
 ```
 
-Token rules:
-- **Never hardcode hex values** — always use token references
-- **Always include dark mode tokens** — semantic light/dark theming from the start
-- **Use brand-tinted neutrals** — not pure white/black, always slightly hue-tinted
-- **OKLCH color space exclusively** — wider gamut, perceptually uniform
-- Tailwind v4 CSS-first `@theme` (no `tailwind.config.js`)
-
-### CLAUDE.md Theme Block Template (for any project)
-
-```markdown
-## Frontend Theme
-<always_use_[aesthetic_name]_theme>
-Always design with [Aesthetic] aesthetic:
-- [Key visual directive 1]
-- [Key visual directive 2]
-- [Typography: specific font pairing]
-- [Color: specific palette anchors]
-</always_use_[aesthetic_name]_theme>
-```
+- Never hardcode hex — use token references only
+- OKLCH color space exclusively
+- Always include dark mode tokens
+- Brand-tinted neutrals — never pure white/black
+- Tailwind v4: CSS-first `@theme`, no `tailwind.config.js`
 
-### Theming Decision Matrix
-
-| Goal | Approach |
-|------|----------|
-| Lock a project to one aesthetic fast | CLAUDE.md theme block |
-| Full token system with OKLCH math | `--brand-hue` single-variable approach |
-| shadcn/ui theming | `@layer base` + CSS variable overrides |
-| Auto-derive rules from Figma | `get_design_context` + `get_variable_defs` |
-| AI picks style automatically | Describe the product type (e.g. "fintech dashboard") |
-| Named aesthetic presets | Use aesthetic names from the table above |
-
----
-
-## 3. Animation & Motion
-
-Every UI should have intentional motion. Audit for:
-- Conditional renders without enter/exit transitions (`AnimatePresence`)
-- Dynamic data updates without smooth transitions
-- Hover states with no visual feedback
-- Page/route transitions that are instant
-
-### Motion Libraries by Use Case
-
-| Library | Use Case |
-|---------|----------|
-| **Framer Motion / Motion** | React animations, gestures, layout animations, spring physics |
-| **GSAP + ScrollTrigger** | Complex timelines, scroll-driven effects |
-| **anime.js** | Lightweight, CSS property animations |
-| **Lottie** | Designer-exported animation files |
-| **React Spring** | Physics-based spring animations |
-| **Locomotive Scroll** | Smooth scroll + parallax |
-| **Barba.js** | Page transition animations |
-| **Three.js / React Three Fiber** | 3D interactive experiences |
-
-### Motion Constraints (production)
-
-- Always add `@media (prefers-reduced-motion: reduce)` — non-negotiable
-- Micro-interactions: 100–200ms
-- Transitions: 200–400ms
-- Page transitions: 300–500ms
-- Easing: spring physics or `ease-out` — never linear for UI
-- Bundle-conscious: `LazyMotion` (4.6KB) or `useAnimate` (2.3KB) for Framer
-
-### Motion Audit Checklist
-
-Before shipping any page, check:
-- [ ] All conditional renders have enter/exit animations
-- [ ] All dynamic data updates transition smoothly
-- [ ] All interactive elements have hover/focus feedback
-- [ ] Route changes have a transition
-- [ ] `prefers-reduced-motion` respected everywhere
-
----
-
-## 4. UI/UX Intelligence
-
-Apply these UX principles on every interface:
-
-- **Gestalt principles** — proximity, similarity, continuity, closure, figure/ground
-- **Fitts's Law** — interactive targets must be large enough and close enough
-- **Hick's Law** — reduce choices to reduce decision time
-- **Visual hierarchy** — size, weight, color, contrast, spacing all communicate priority
-- **Mobile-first** — design for smallest viewport first, enhance upward
-- **Information architecture** — label clearly, group logically, reduce cognitive load
-
-### Accessibility (non-negotiable)
-
-- All interactive elements must have keyboard navigation and visible focus states
-- Use semantic HTML (`<button>`, `<nav>`, `<main>`, `<article>`) not `<div>` for structure
-- Every image needs meaningful `alt` text, or `alt=""` for decorative
-- Color contrast: minimum WCAG AA (4.5:1 text, 3:1 UI components)
-- Form inputs need associated `<label>` elements
-- ARIA only when semantic HTML is insufficient
-
----
-
-## 5. Design-to-Code Pipeline (Figma)
-
-When Figma MCP is active:
-
-```markdown
-## Figma Workflow
-- Always call get_design_context before coding new components
-- Use get_variable_defs to read token definitions (never assume tokens)
-- Check get_code_connect_map — use existing code components, don't recreate
-- After generating UI, use generate_figma_design to push back to Figma
-- Components: src/components/
-- Tokens: src/styles/tokens.css
-```
-
-The loop: **Figma → get_design_context → code → browser preview → Code to Canvas → Figma**
-
-Figma MCP install:
-```bash
-claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse
-```
-
----
+## Typography
 
-## 6. Testing & Browser Automation
+- Always pick a deliberate font pairing (display + body)
+- Define type scale: 12/14/16/20/24/32/48/64px
+- Set `line-height`, `letter-spacing`, `font-weight` at each step
+- Never leave fonts to browser defaults
 
-Claude can't see the UI by default. Always test:
-
-```
-DEVELOP  → Claude Code (terminal)
-TEST     → Playwright MCP (E2E, cross-browser)
-DEBUG    → Chrome DevTools MCP (perf, network)
-VERIFY   → Browser visual check
-```
-
-- **Playwright MCP** — 25+ tools, accessibility tree snapshots (2–5KB vs 500KB+ screenshots), form testing, DOM reading
-  - `--vision auto` — accessibility tree by default, switches to vision for canvas/WebGL
-  - `--save-video=800x600` — record test sessions
-  - `--caps=devtools` — Core Web Vitals (LCP, CLS, INP)
-- **Chrome DevTools MCP** — console, network, performance profiling, HAR export, device emulation
-- Test order: golden path → edge cases → keyboard navigation → mobile viewport
-
-Install:
-```bash
-claude mcp add playwright -s user -- npx @playwright/mcp@latest
-claude mcp add chrome-devtools -s user -- npx @anthropic-ai/chrome-devtools-mcp@latest
-```
+## Motion & Animation
 
----
+Audit every UI for missing motion:
+- Conditional renders → `AnimatePresence` enter/exit
+- Dynamic updates → smooth transitions
+- Hover states → visual feedback
+- Route changes → transition animation
+- Always add `@media (prefers-reduced-motion: reduce)`
 
-## 7. Docs & Context — Stop Hallucinating APIs
+Durations: micro 100–200ms · transitions 200–400ms · page 300–500ms · easing: spring or `ease-out`, never linear
 
-Claude's training data is stale. Always note the framework version and use version-specific patterns:
+Libraries: Framer Motion (React/gestures) · GSAP (timelines/scroll) · anime.js (lightweight) · Lottie (exported files)
 
-| Framework | Watch for |
-|-----------|-----------|
-| **React 19 vs 18** | Different APIs: Actions, `use()`, Server Components |
-| **Tailwind v4 vs v3** | Complete rewrite: CSS-first `@theme`, no `tailwind.config.js` |
-| **Next.js App Router vs Pages Router** | Different data fetching, routing, layouts |
-| **Motion (Framer Motion v11+)** | `useAnimate`, `LazyMotion`, new API surface |
+## UI/UX Rules
 
-- Use **Context7 MCP** when available — live, version-specific docs for 1000+ libraries
-- Install: `claude mcp add context7 -s user -- npx -y @upstash/context7-mcp@latest`
-- For internal libraries Context7 doesn't cover, use Skill Seekers to generate a skill from docs
+- Gestalt, Fitts's Law, Hick's Law on every interface
+- Visual hierarchy through size, weight, color, spacing
+- Mobile-first, semantic HTML (`<button>` `<nav>` `<main>`)
+- WCAG AA minimum: 4.5:1 text, 3:1 UI components
+- Keyboard nav + visible focus on all interactive elements
+- `<label>` on every form input; ARIA only when semantic HTML insufficient
 
----
+## Figma Pipeline (when MCP active)
 
-## 8. Framework Skills
+1. `get_design_context` before coding any component
+2. `get_variable_defs` for tokens — never assume
+3. `get_code_connect_map` — reuse existing components
+4. `generate_figma_design` to push UI back to Figma
 
-### Typography Rules
-
-- Every project needs a deliberate font pairing (display + body, or serif + sans)
-- Define a type scale: 12/14/16/20/24/32/48/64px
-- Set `line-height`, `letter-spacing`, and `font-weight` explicitly at each step
-- Never leave font choices to browser defaults
-
-### React Patterns
-
-- React 19: prefer Actions, `use()`, Server Components where applicable
-- React 18: `Suspense`, `useTransition`, concurrent features
-- Always co-locate state with the component that owns it
-
-### Tailwind v4 Patterns
-
-- CSS-first configuration — everything in `@theme {}` block, no JS config
-- Dark mode via CSS media queries or `[data-theme]` attribute
-- Use `@layer components` for reusable component styles
-- Plugins: `@tailwindcss/forms`, `@tailwindcss/typography`
-
-### shadcn/ui Patterns
-
-- Override tokens in `@layer base` via CSS variables
-- Never modify shadcn component source — extend via `className` or slots
-- Use `cn()` utility for conditional class merging
-
-### Polish Pipeline (run in sequence after generating a page)
+## Testing Loop
 
 ```
-1. Generate UI           → Pick aesthetic, apply tokens, write components
-2. Baseline polish       → Fix spacing, typography hierarchy, interactive states
-3. Accessibility fix     → Keyboard, ARIA labels, focus, semantic structure
-4. Motion/Perf fix       → Reduced-motion support, animation perf, bundle size
-```
-
----
-
-## 9. Deploy & Preview
-
-- **Vercel MCP** — manage deployments, preview branches, build logs, env vars, domains
-- **PinMe** — zero-config deploy, no servers or accounts needed
-
----
-
-## 10. Recommended Stacks
-
-### Essentials (every project)
-
-```bash
-claude plugin add anthropic/frontend-design
-claude mcp add context7 -s user -- npx -y @upstash/context7-mcp@latest
-claude mcp add playwright -s user -- npx @playwright/mcp@latest
+DEVELOP → Claude Code  |  TEST → Playwright MCP  |  DEBUG → Chrome DevTools MCP
 ```
 
-### Design-First (Figma to Code)
+Test order: golden path → edge cases → keyboard nav → mobile viewport
+Prefer accessibility tree snapshots (2–5KB) over screenshots (500KB+)
 
-```bash
-claude plugin add anthropic/frontend-design
-claude mcp add context7 -s user -- npx -y @upstash/context7-mcp@latest
-claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse
-claude mcp add playwright -s user -- npx @playwright/mcp@latest
-claude plugin add anthropic/typescript-lsp
-```
+## Docs Currency
 
-### Solo Builder (MVP speed)
+Always check framework version — training data is stale:
+- React 19 vs 18: Actions, `use()`, Server Components differ
+- Tailwind v4 vs v3: complete rewrite
+- Next.js App Router vs Pages: different data fetching
 
-```bash
-claude plugin add anthropic/frontend-design
-claude mcp add context7 -s user -- npx -y @upstash/context7-mcp@latest
-claude plugin add nextlevelbuilder/ui-ux-pro-max-skill
-claude mcp add playwright -s user -- npx @playwright/mcp@latest
-```
-
-### Full Stack (component library + design system)
-
-```bash
-claude plugin add anthropic/frontend-design
-claude plugin add nextlevelbuilder/ui-ux-pro-max-skill
-claude mcp add context7 -s user -- npx -y @upstash/context7-mcp@latest
-claude plugin add anthropic/typescript-lsp
-claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse
-claude mcp add playwright -s user -- npx @playwright/mcp@latest
-claude mcp add chrome-devtools -s user -- npx @anthropic-ai/chrome-devtools-mcp@latest
-npx ui-skills add baseline-ui
-npx ui-skills add fixing-accessibility
-npx ui-skills add fixing-motion-performance
-```
+Use Context7 MCP for live version-specific docs.
 
----
+## Polish Pipeline (run after generating any page)
 
-## MCP Token Budget
+1. Baseline → spacing, type hierarchy, interactive states
+2. Accessibility → keyboard, ARIA, focus, semantics
+3. Motion/Perf → reduced-motion, animation budget, bundle size
 
-Keep 3–5 MCP servers active max:
+## Theming Decision Matrix
 
-| Server | ~Token Cost |
-|--------|------------|
-| Playwright MCP | 5.3k |
-| Chrome DevTools | 5–6k |
-| Figma MCP | 3–4k |
-| Context7 | 2k (on-demand) |
-| 5 servers total | ~55k before first message |
+| Goal | Use |
+|------|-----|
+| Fast aesthetic lock | CLAUDE.md theme block |
+| Full OKLCH token system | `--brand-hue` approach |
+| shadcn/ui theming | `@layer base` + CSS vars |
+| Auto-rules from Figma | `get_design_context` + `get_variable_defs` |
+| AI picks style | Describe product type |
 
-- Use `/mcp disable <name>` when not in use
-- Prefer skills over MCP servers where possible (skills ~100 tokens vs thousands)
-- Enable Tool Search for lazy loading (up to 95% cost reduction)
+## MCP Token Budget (max 3–5 active)
 
----
+Playwright 5.3k · Chrome DevTools 5–6k · Figma 3–4k · Context7 2k
+Use `/mcp disable <name>` when idle. Skills cost ~100 tokens vs thousands for MCP.
 
 ## What "Good" Looks Like
 
-A well-designed Claude Code frontend output has:
-- A named, intentional aesthetic (not "modern" or "clean")
-- OKLCH token-based color system, no hardcoded hex
-- Real font pairing with explicit type scale
-- Motion on all conditional UI (enter/exit, hover, transitions)
-- Semantic HTML structure
-- WCAG AA color contrast minimum
-- Dark mode tokens from the start
-- Mobile-first responsive layout
-- No pure white/black — always hue-tinted neutrals
-- Tested: golden path + edge cases + keyboard nav + mobile viewport
-
----
-
-*Source: [Claude Code Frontend Design Toolkit](https://github.com/lukej01/Claude-Code-Frontend-Design-Toolkit) — applied globally on every frontend task.*
+Named aesthetic · OKLCH tokens · real font pairing · motion on all conditional UI · semantic HTML · WCAG AA · dark mode · mobile-first · hue-tinted neutrals

From 1516b9c4eea1f6723fed7d662655b7fd839e9c78 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 20 Apr 2026 15:57:06 +0000
Subject: [PATCH 04/12] Rewrite CLAUDE.md for maximum visual impact

Rebuilt around producing mind-blowing UI: mesh gradients, glow effects,
magnetic buttons, scroll-triggered reveals, tilt cards, text scramble,
parallax, cursor trails, gradient text, fluid typography. Includes a
done-checklist: would this stop someone scrolling?

https://claude.ai/code/session_017ggBPbki5bwiHpFnqpSZ5U
---
 CLAUDE.md | 239 ++++++++++++++++++++++++++++++------------------------
 1 file changed, 134 insertions(+), 105 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 37584f2..a93636b 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1,127 +1,156 @@
-# Frontend Design — Global Standing Instructions
-
-Apply on every frontend task, every repo, every chat. Never default to generic AI output.
-
-## Core Rule
-
-**Pick a named aesthetic before writing any code.** No Inter+purple gradient+rounded cards.
-Order: aesthetic → tokens → code → typography → motion → polish.
-
-## Named Aesthetics
-
-| Aesthetic | Key Directives |
-|-----------|---------------|
-| Swiss Minimalism | Helvetica, strict grid, max white space |
-| Neumorphism | Soft shadows both directions, monochrome |
-| Glassmorphism | `backdrop-filter: blur()`, frosted panels |
-| Brutalism | System fonts, visible borders, no border-radius |
-| Claymorphism | 3D clay blobs, very soft shadows |
-| Aurora Mesh | Flowing mesh gradients, dreamy color transitions |
-| Cyberpunk | Neon on `#000`, monospace, glitch, cyan/magenta |
-| 3D Hyperrealism | Depth, perspective, realistic lighting |
-| Block Maximalism | Color blocks, bold contrast, loud type |
-| Dark OLED Luxury | True `#000000`, gold/cream accents, thin serif |
-| Organic Biomorphic | Earth tones, rounded shapes, warm shadows |
-| Editorial | Serif headlines, magazine grid, muted palette |
-| SaaS Minimal | One accent, system UI font, generous spacing |
-| Retro-Futuristic | Gradient meshes, chrome, geometric, purple/teal |
-| Art Deco | Gold + black, geometric patterns, Playfair Display |
-| Solarpunk | Greens/golds/earth tones, organic + technical mix |
-
-## Design Tokens — Always
+# Frontend — Always Make It Mind-Blowing
 
-```css
-@theme {
-  --brand-hue: 250; /* one number re-themes everything */
-  --color-primary:    oklch(0.6  0.2  var(--brand-hue));
-  --color-background: oklch(0.995 0.005 var(--brand-hue));
-  --color-foreground: oklch(0.15 0.02 var(--brand-hue));
-  --color-muted:      oklch(0.94 0.01 var(--brand-hue));
-  --color-border:     oklch(0.88 0.015 var(--brand-hue));
-}
-```
-
-- Never hardcode hex — use token references only
-- OKLCH color space exclusively
-- Always include dark mode tokens
-- Brand-tinted neutrals — never pure white/black
-- Tailwind v4: CSS-first `@theme`, no `tailwind.config.js`
-
-## Typography
-
-- Always pick a deliberate font pairing (display + body)
-- Define type scale: 12/14/16/20/24/32/48/64px
-- Set `line-height`, `letter-spacing`, `font-weight` at each step
-- Never leave fonts to browser defaults
-
-## Motion & Animation
+Every frontend task must produce something that looks and feels exceptional. If it wouldn't stop someone scrolling, redo it.
 
-Audit every UI for missing motion:
-- Conditional renders → `AnimatePresence` enter/exit
-- Dynamic updates → smooth transitions
-- Hover states → visual feedback
-- Route changes → transition animation
-- Always add `@media (prefers-reduced-motion: reduce)`
+---
 
-Durations: micro 100–200ms · transitions 200–400ms · page 300–500ms · easing: spring or `ease-out`, never linear
+## The Standard
 
-Libraries: Framer Motion (React/gestures) · GSAP (timelines/scroll) · anime.js (lightweight) · Lottie (exported files)
+Before shipping any UI ask: **would this win a design award?** If no, add more. Never ship:
+- Generic white backgrounds with gray text
+- Default shadows and border-radius
+- Static elements that could be animated
+- System fonts without a real pairing
+- Flat layouts with no depth or layers
 
-## UI/UX Rules
+---
 
-- Gestalt, Fitts's Law, Hick's Law on every interface
-- Visual hierarchy through size, weight, color, spacing
-- Mobile-first, semantic HTML (`<button>` `<nav>` `<main>`)
-- WCAG AA minimum: 4.5:1 text, 3:1 UI components
-- Keyboard nav + visible focus on all interactive elements
-- `<label>` on every form input; ARIA only when semantic HTML insufficient
+## Colors — Always Alive
 
-## Figma Pipeline (when MCP active)
-
-1. `get_design_context` before coding any component
-2. `get_variable_defs` for tokens — never assume
-3. `get_code_connect_map` — reuse existing components
-4. `generate_figma_design` to push UI back to Figma
-
-## Testing Loop
+Use OKLCH for everything. Build from one hue variable:
 
+```css
+@theme {
+  --hue: 260;
+  --primary:    oklch(0.65 0.28 var(--hue));
+  --glow:       oklch(0.75 0.35 var(--hue));
+  --bg:         oklch(0.06 0.02 var(--hue));
+  --surface:    oklch(0.12 0.03 var(--hue));
+  --text:       oklch(0.97 0.01 var(--hue));
+  --accent:     oklch(0.72 0.30 calc(var(--hue) + 60));
+}
 ```
-DEVELOP → Claude Code  |  TEST → Playwright MCP  |  DEBUG → Chrome DevTools MCP
+
+Always layer colors:
+- **Mesh gradients** — 3–4 radial gradients overlapping on the background
+- **Glow effects** — `box-shadow: 0 0 40px oklch(...)` on key elements
+- **Color-shifting** — animate `--hue` slowly on scroll or over time
+- **Glassmorphism surfaces** — `backdrop-filter: blur(20px)` + semi-transparent fills
+- Never flat — always gradient, glow, or layered
+
+---
+
+## Typography — Make It Commanding
+
+Always use a real pairing from Google Fonts. Examples that work:
+- **Clash Display + Cabinet Grotesk** — bold/geometric
+- **Fraunces + DM Sans** — editorial/modern
+- **Syne + Inter** — futuristic/clean
+- **Playfair Display + Lato** — luxury/readable
+- **Space Grotesk + Space Mono** — techy/monospace
+
+Rules:
+- Headlines: huge (clamp 48px→120px), tight letter-spacing (-0.03em), heavy weight
+- Use `font-variant-numeric: tabular-nums` on numbers
+- Gradient text on hero headlines: `background-clip: text; -webkit-text-fill-color: transparent`
+- Fluid type with `clamp()` everywhere — no fixed px headlines
+
+---
+
+## Animations — Always Include These
+
+Every page must have at least 5 of these:
+
+### On Load
+- **Text reveal** — lines slide up with staggered delay (`translateY(100%) → 0`, overflow hidden)
+- **Fade + scale in** — hero elements `scale(0.95) opacity(0)` → `scale(1) opacity(1)`
+- **Counter animation** — numbers count up on first view
+
+### On Scroll
+- **Parallax layers** — background moves at 0.3x scroll speed, foreground at 1x
+- **Scroll-triggered reveals** — elements animate in as they enter viewport (IntersectionObserver)
+- **Horizontal scroll sections** — pinned section scrolls content sideways
+- **Progress indicator** — thin line at top tracking scroll position
+- **Sticky elements** — morph/change as user scrolls past sections
+
+### On Hover
+- **Magnetic buttons** — element follows cursor slightly (`mousemove` + `transform: translate()`)
+- **Tilt cards** — 3D perspective tilt on hover (`rotateX` + `rotateY` from cursor position)
+- **Glow trail** — spotlight/glow follows cursor across hero sections
+- **Text scramble** — letters randomize then resolve on hover
+- **Underline draw** — SVG or pseudo-element animates in on hover
+
+### Micro-interactions
+- **Smooth page transitions** — fade or slide between routes
+- **Button press** — `scale(0.96)` on active, spring back
+- **Input focus glow** — border + shadow animate on focus
+- **Loading states** — skeleton shimmer, not spinners
+
+### Implementation stack (CSS + vanilla JS first, then libraries):
+```js
+// Scroll reveals — no library needed
+const observer = new IntersectionObserver((entries) => {
+  entries.forEach(e => e.target.classList.toggle('visible', e.isIntersecting))
+}, { threshold: 0.1 })
+
+// Magnetic button
+el.addEventListener('mousemove', (e) => {
+  const { left, top, width, height } = el.getBoundingClientRect()
+  const x = (e.clientX - left - width/2) * 0.3
+  const y = (e.clientY - top - height/2) * 0.3
+  el.style.transform = `translate(${x}px, ${y}px)`
+})
 ```
 
-Test order: golden path → edge cases → keyboard nav → mobile viewport
-Prefer accessibility tree snapshots (2–5KB) over screenshots (500KB+)
+If using React: **Framer Motion** for everything animated. Use `motion.div`, `AnimatePresence`, `useScroll`, `useTransform`.
+
+---
 
-## Docs Currency
+## Layout — Add Drama
 
-Always check framework version — training data is stale:
-- React 19 vs 18: Actions, `use()`, Server Components differ
-- Tailwind v4 vs v3: complete rewrite
-- Next.js App Router vs Pages: different data fetching
+- **Asymmetric grids** — not everything centered, not everything aligned
+- **Oversized elements** — let things break the grid intentionally
+- **Negative space** — some sections are almost empty, makes dense sections hit harder
+- **Z-axis layers** — use `z-index` + `transform: translateZ()` to create depth
+- **Sticky headers** that blur+compress on scroll
+- **Full-bleed sections** alternating with contained sections
+- **Diagonal/curved section dividers** — `clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%)`
 
-Use Context7 MCP for live version-specific docs.
+---
 
-## Polish Pipeline (run after generating any page)
+## Named Aesthetics (pick one per project)
 
-1. Baseline → spacing, type hierarchy, interactive states
-2. Accessibility → keyboard, ARIA, focus, semantics
-3. Motion/Perf → reduced-motion, animation budget, bundle size
+| Aesthetic | Vibe |
+|-----------|------|
+| **Cyberpunk** | Neon cyan/magenta on `#000`, scan lines, glitch text, monospace |
+| **Dark OLED Luxury** | True black, gold/cream, thin serif, ultra-premium |
+| **Aurora Mesh** | Dreamy purple/teal gradients, glass cards, floating orbs |
+| **Glassmorphism** | Frosted glass everything, depth layers, soft color bleeds |
+| **Block Maximalism** | Huge color blocks, bold type, loud contrast, every pixel used |
+| **Editorial** | Serif headlines, magazine-style, unexpected grid breaks |
+| **Brutalism** | Raw borders, system fonts, high contrast, anti-design |
+| **Retro-Futuristic** | Chrome, gradients, geometric shapes, 80s sci-fi |
+| **Organic Biomorphic** | Earth tones, blob shapes, warm, textured |
+| **3D Hyperrealism** | Perspective, depth, realistic shadows, layered z-space |
 
-## Theming Decision Matrix
+---
 
-| Goal | Use |
-|------|-----|
-| Fast aesthetic lock | CLAUDE.md theme block |
-| Full OKLCH token system | `--brand-hue` approach |
-| shadcn/ui theming | `@layer base` + CSS vars |
-| Auto-rules from Figma | `get_design_context` + `get_variable_defs` |
-| AI picks style | Describe product type |
+## Accessibility (still required)
 
-## MCP Token Budget (max 3–5 active)
+- WCAG AA contrast even on dark/neon themes — test it
+- All animations respect `prefers-reduced-motion`
+- Keyboard nav works on everything interactive
+- Semantic HTML under the beautiful CSS
 
-Playwright 5.3k · Chrome DevTools 5–6k · Figma 3–4k · Context7 2k
-Use `/mcp disable <name>` when idle. Skills cost ~100 tokens vs thousands for MCP.
+---
 
-## What "Good" Looks Like
+## The Checklist Before Done
 
-Named aesthetic · OKLCH tokens · real font pairing · motion on all conditional UI · semantic HTML · WCAG AA · dark mode · mobile-first · hue-tinted neutrals
+- [ ] Would this stop someone scrolling Instagram? 
+- [ ] Are there at least 3 scroll animations?
+- [ ] Does every interactive element have a hover state?
+- [ ] Is there a real font pairing (not just system fonts)?
+- [ ] Are colors layered/glowing, not flat?
+- [ ] Does the hero section have motion on load?
+- [ ] Is there depth (shadows, blur, z-layers)?
+- [ ] Does it look intentional, not accidental?

From 9ca88fffbe10ab69c7568f29030e3401752aaec3 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 20 Apr 2026 16:00:07 +0000
Subject: [PATCH 05/12] Rebuild CLAUDE.md targeting Awwwards/Obsidian Assembly
 level

Now targets dark luxury WebGL aesthetic: particle systems, mouse-reactive
3D depth, scroll-driven animations, custom cursors, Lenis smooth scroll,
magnetic buttons, spotlight glow, cinematic load sequences, grain texture,
glass cards. Checklist: would this win Awwwards SOTD?

https://claude.ai/code/session_017ggBPbki5bwiHpFnqpSZ5U
---
 CLAUDE.md | 312 +++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 203 insertions(+), 109 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index a93636b..0dce39d 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1,156 +1,250 @@
-# Frontend — Always Make It Mind-Blowing
+# Frontend Standard — Awwwards-Level Output
 
-Every frontend task must produce something that looks and feels exceptional. If it wouldn't stop someone scrolling, redo it.
+Target: every UI should look like it could win Awwwards Site of the Day.
+Reference aesthetic: The Obsidian Assembly — dark luxury, WebGL particles, scroll-driven 3D, mouse-reactive depth.
 
----
-
-## The Standard
-
-Before shipping any UI ask: **would this win a design award?** If no, add more. Never ship:
-- Generic white backgrounds with gray text
-- Default shadows and border-radius
-- Static elements that could be animated
-- System fonts without a real pairing
-- Flat layouts with no depth or layers
+Never ship flat, static, or generic. If it wouldn't stop someone scrolling, it's not done.
 
 ---
 
-## Colors — Always Alive
+## The Aesthetic: Dark Luxury by Default
+
+Unless told otherwise, default to this:
 
-Use OKLCH for everything. Build from one hue variable:
+- **Background**: true `#000` or `oklch(0.04 0.01 260)` — near-black with a hint of hue
+- **Surfaces**: `oklch(0.08 0.015 260)` — slightly lighter dark panels
+- **Primary accent**: gold/amber `oklch(0.75 0.15 80)` or electric `oklch(0.72 0.28 260)`
+- **Text**: `oklch(0.96 0.01 80)` cream — never pure white
+- **Grain texture overlay**: always add `noise.svg` or CSS noise on the background
+- **Glow**: key elements emit light — `box-shadow: 0 0 60px oklch(0.72 0.28 260 / 0.4)`
 
+OKLCH token system — one `--hue` variable controls everything:
 ```css
-@theme {
+:root {
   --hue: 260;
-  --primary:    oklch(0.65 0.28 var(--hue));
-  --glow:       oklch(0.75 0.35 var(--hue));
-  --bg:         oklch(0.06 0.02 var(--hue));
-  --surface:    oklch(0.12 0.03 var(--hue));
-  --text:       oklch(0.97 0.01 var(--hue));
-  --accent:     oklch(0.72 0.30 calc(var(--hue) + 60));
+  --accent-hue: 80;
+  --bg:      oklch(0.04 0.01  var(--hue));
+  --surface: oklch(0.09 0.015 var(--hue));
+  --border:  oklch(0.18 0.02  var(--hue));
+  --text:    oklch(0.96 0.01  var(--accent-hue));
+  --muted:   oklch(0.55 0.02  var(--hue));
+  --accent:  oklch(0.72 0.28  var(--hue));
+  --gold:    oklch(0.75 0.15  var(--accent-hue));
+  --glow:    oklch(0.72 0.28  var(--hue) / 0.35);
 }
 ```
 
-Always layer colors:
-- **Mesh gradients** — 3–4 radial gradients overlapping on the background
-- **Glow effects** — `box-shadow: 0 0 40px oklch(...)` on key elements
-- **Color-shifting** — animate `--hue` slowly on scroll or over time
-- **Glassmorphism surfaces** — `backdrop-filter: blur(20px)` + semi-transparent fills
-- Never flat — always gradient, glow, or layered
-
 ---
 
-## Typography — Make It Commanding
+## Typography — Commanding and Cinematic
+
+Always use a real font pairing. Load from Google Fonts or Fontsource:
 
-Always use a real pairing from Google Fonts. Examples that work:
-- **Clash Display + Cabinet Grotesk** — bold/geometric
-- **Fraunces + DM Sans** — editorial/modern
-- **Syne + Inter** — futuristic/clean
-- **Playfair Display + Lato** — luxury/readable
-- **Space Grotesk + Space Mono** — techy/monospace
+| Pairing | Use for |
+|---------|---------|
+| **Clash Display + Cabinet Grotesk** | Bold/tech agencies |
+| **Fraunces + DM Sans** | Editorial/luxury |
+| **Syne + Space Mono** | Futuristic/creative |
+| **Playfair Display + Inter** | Premium/dark luxury |
+| **PP Editorial New + Helvetica Neue** | Magazine/minimal |
 
 Rules:
-- Headlines: huge (clamp 48px→120px), tight letter-spacing (-0.03em), heavy weight
-- Use `font-variant-numeric: tabular-nums` on numbers
-- Gradient text on hero headlines: `background-clip: text; -webkit-text-fill-color: transparent`
-- Fluid type with `clamp()` everywhere — no fixed px headlines
+- Hero headlines: `clamp(64px, 12vw, 160px)`, weight 700–900, letter-spacing `-0.04em`
+- **Gradient text on heroes**: `background: linear-gradient(...); -webkit-background-clip: text; -webkit-text-fill-color: transparent`
+- **Masked text reveals**: clip text behind a line that slides up on load
+- **Kinetic typography**: words that scale, rotate, or blur in sequence
+- `font-variant-numeric: tabular-nums` on all numbers/counters
+- Line height 0.9–1.1 for display, 1.6–1.7 for body
 
 ---
 
-## Animations — Always Include These
+## Particles & WebGL Effects
 
-Every page must have at least 5 of these:
+For any hero or feature section, include at least one of:
 
-### On Load
-- **Text reveal** — lines slide up with staggered delay (`translateY(100%) → 0`, overflow hidden)
-- **Fade + scale in** — hero elements `scale(0.95) opacity(0)` → `scale(1) opacity(1)`
-- **Counter animation** — numbers count up on first view
+### CSS-only particles (lightweight):
+```css
+/* Floating orbs in background */
+.orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  animation: float 8s ease-in-out infinite;
+  background: var(--accent);
+  opacity: 0.15;
+}
+@keyframes float {
+  0%, 100% { transform: translateY(0) scale(1); }
+  50%       { transform: translateY(-40px) scale(1.05); }
+}
+```
 
-### On Scroll
-- **Parallax layers** — background moves at 0.3x scroll speed, foreground at 1x
-- **Scroll-triggered reveals** — elements animate in as they enter viewport (IntersectionObserver)
-- **Horizontal scroll sections** — pinned section scrolls content sideways
-- **Progress indicator** — thin line at top tracking scroll position
-- **Sticky elements** — morph/change as user scrolls past sections
+### Three.js / React Three Fiber (for impressive 3D):
+- Floating particle field: 2000+ points, slow rotation, mouse-reactive drift
+- 3D geometry with wireframe + bloom post-processing
+- Distortion mesh that warps on mouse move
+- Environment map reflections on surfaces
 
-### On Hover
-- **Magnetic buttons** — element follows cursor slightly (`mousemove` + `transform: translate()`)
-- **Tilt cards** — 3D perspective tilt on hover (`rotateX` + `rotateY` from cursor position)
-- **Glow trail** — spotlight/glow follows cursor across hero sections
-- **Text scramble** — letters randomize then resolve on hover
-- **Underline draw** — SVG or pseudo-element animates in on hover
+### Canvas particle system (vanilla):
+```js
+// Minimal particle system — 200 connected dots
+const particles = Array.from({length: 200}, () => ({
+  x: Math.random() * W, y: Math.random() * H,
+  vx: (Math.random()-0.5)*0.5, vy: (Math.random()-0.5)*0.5,
+  r: Math.random()*2+1
+}))
+// Connect particles within 120px with fading lines
+```
 
-### Micro-interactions
-- **Smooth page transitions** — fade or slide between routes
-- **Button press** — `scale(0.96)` on active, spring back
-- **Input focus glow** — border + shadow animate on focus
-- **Loading states** — skeleton shimmer, not spinners
+---
 
-### Implementation stack (CSS + vanilla JS first, then libraries):
+## Scroll Animations — Everything Moves
+
+Every section must animate on scroll. Use IntersectionObserver or scroll-driven CSS:
+
+### Must-have scroll effects:
+- **Staggered text reveal**: each word/line slides up with 60ms delay between items
+- **Parallax depth**: background at 0.3x, midground at 0.6x, foreground at 1x scroll speed
+- **Scale + fade in**: `transform: scale(0.92) translateY(30px)` → normal, triggered at 15% viewport
+- **Horizontal scroll section**: pinned container, content scrolls sideways via `translateX`
+- **Scroll progress bar**: 2px line at top, width = scroll percentage
+- **Counter roll-up**: numbers animate from 0 to final value when entering viewport
+- **Image reveal**: `clip-path: inset(100% 0 0 0)` → `inset(0% 0 0 0)` on scroll
+
+### CSS Scroll-driven (native, no JS):
+```css
+@keyframes reveal {
+  from { opacity: 0; transform: translateY(40px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.reveal {
+  animation: reveal linear both;
+  animation-timeline: view();
+  animation-range: entry 0% entry 40%;
+}
+```
+
+### Smooth scroll (always):
 ```js
-// Scroll reveals — no library needed
-const observer = new IntersectionObserver((entries) => {
-  entries.forEach(e => e.target.classList.toggle('visible', e.isIntersecting))
-}, { threshold: 0.1 })
+// Lenis smooth scroll — add to every project
+import Lenis from '@studio-freight/lenis'
+const lenis = new Lenis({ duration: 1.2, easing: t => Math.min(1, 1.001 - Math.pow(2, -10*t)) })
+```
+
+---
+
+## Mouse & Cursor Effects
 
-// Magnetic button
+### Custom cursor (always on dark luxury sites):
+```js
+const cursor = document.querySelector('.cursor')
+document.addEventListener('mousemove', (e) => {
+  cursor.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`
+})
+// Grow on hover over links/buttons
+```
+
+### Magnetic elements:
+```js
 el.addEventListener('mousemove', (e) => {
-  const { left, top, width, height } = el.getBoundingClientRect()
-  const x = (e.clientX - left - width/2) * 0.3
-  const y = (e.clientY - top - height/2) * 0.3
-  el.style.transform = `translate(${x}px, ${y}px)`
+  const r = el.getBoundingClientRect()
+  const x = (e.clientX - r.left - r.width/2) * 0.35
+  const y = (e.clientY - r.top - r.height/2) * 0.35
+  el.style.transform = `translate(${x}px,${y}px)`
+})
+el.addEventListener('mouseleave', () => el.style.transform = '')
+```
+
+### Cursor spotlight / glow trail:
+```js
+// Radial gradient follows mouse on hero sections
+hero.addEventListener('mousemove', (e) => {
+  hero.style.background = `radial-gradient(600px at ${e.clientX}px ${e.clientY}px, oklch(0.72 0.28 260 / 0.12), transparent 80%)`
+})
+```
+
+### 3D card tilt:
+```js
+card.addEventListener('mousemove', (e) => {
+  const r = card.getBoundingClientRect()
+  const x = (e.clientY - r.top  - r.height/2) / 15
+  const y = (e.clientX - r.left - r.width/2)  / -15
+  card.style.transform = `perspective(800px) rotateX(${x}deg) rotateY(${y}deg)`
 })
 ```
 
-If using React: **Framer Motion** for everything animated. Use `motion.div`, `AnimatePresence`, `useScroll`, `useTransform`.
+---
+
+## Hover States — Every Element Reacts
+
+Nothing is static on hover:
+- **Buttons**: background sweeps in from left, text color flips, subtle scale `1.02`
+- **Cards**: lift with shadow, border lights up, inner content shifts slightly
+- **Links**: underline draws in with SVG or pseudo-element `scaleX(0→1)`
+- **Images**: slight scale `1.04`, desaturate → color, or reveal overlay text
+- **Nav items**: letter-spacing expands slightly, color transitions 200ms
+
+---
+
+## Layout Patterns
+
+- **Full-bleed hero**: 100vh, centered content, particle/WebGL background
+- **Sticky scroll narratives**: element pins while content scrolls past it, triggering states
+- **Asymmetric sections**: not everything centered — break the grid intentionally
+- **Oversized type as decoration**: giant faded text behind content
+- **Diagonal dividers**: `clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%)`
+- **Glass cards**: `backdrop-filter: blur(20px)`, `background: oklch(1 0 0 / 0.04)`, `border: 1px solid oklch(1 0 0 / 0.08)`
+- **Noise texture**: always overlay subtle grain — `opacity: 0.035`, `mix-blend-mode: overlay`
 
 ---
 
-## Layout — Add Drama
+## Load Sequence (hero animation)
 
-- **Asymmetric grids** — not everything centered, not everything aligned
-- **Oversized elements** — let things break the grid intentionally
-- **Negative space** — some sections are almost empty, makes dense sections hit harder
-- **Z-axis layers** — use `z-index` + `transform: translateZ()` to create depth
-- **Sticky headers** that blur+compress on scroll
-- **Full-bleed sections** alternating with contained sections
-- **Diagonal/curved section dividers** — `clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%)`
+Every page should have an intentional load animation:
+```
+0ms   → page black, nothing visible
+0ms   → logo/wordmark fades + scales in
+300ms → nav slides down
+600ms → headline words reveal one by one (translateY + opacity)
+900ms → subtext fades in
+1100ms → CTA button scales in
+1300ms → background particles/gradient fades in
+```
 
 ---
 
-## Named Aesthetics (pick one per project)
-
-| Aesthetic | Vibe |
-|-----------|------|
-| **Cyberpunk** | Neon cyan/magenta on `#000`, scan lines, glitch text, monospace |
-| **Dark OLED Luxury** | True black, gold/cream, thin serif, ultra-premium |
-| **Aurora Mesh** | Dreamy purple/teal gradients, glass cards, floating orbs |
-| **Glassmorphism** | Frosted glass everything, depth layers, soft color bleeds |
-| **Block Maximalism** | Huge color blocks, bold type, loud contrast, every pixel used |
-| **Editorial** | Serif headlines, magazine-style, unexpected grid breaks |
-| **Brutalism** | Raw borders, system fonts, high contrast, anti-design |
-| **Retro-Futuristic** | Chrome, gradients, geometric shapes, 80s sci-fi |
-| **Organic Biomorphic** | Earth tones, blob shapes, warm, textured |
-| **3D Hyperrealism** | Perspective, depth, realistic shadows, layered z-space |
+## Named Aesthetics (reference by name)
+
+| Name | Key Look |
+|------|----------|
+| **Obsidian Luxury** | True black, gold accents, grain texture, cinematic type, particles |
+| **Cyberpunk** | `#000` + neon cyan/magenta, scan lines, glitch, monospace |
+| **Aurora Glass** | Deep purple/teal mesh gradient, glass cards, floating orbs |
+| **Editorial Dark** | Near-black, cream serif headlines, magazine grid, high contrast |
+| **Brutalist Dark** | Black + one neon, thick borders, no curves, oversized raw type |
+| **Chrome Retro** | Metallic gradients, geometric 80s shapes, purple/silver |
+| **Organic Dark** | Dark forest greens, warm amber, blob shapes, earthy grain |
 
 ---
 
-## Accessibility (still required)
+## Accessibility (non-negotiable)
 
-- WCAG AA contrast even on dark/neon themes — test it
-- All animations respect `prefers-reduced-motion`
-- Keyboard nav works on everything interactive
+- `prefers-reduced-motion`: wrap all animations — skip particles + scroll effects when set
+- WCAG AA on all text even on dark/neon
+- Keyboard nav + visible focus on all interactive elements
 - Semantic HTML under the beautiful CSS
 
 ---
 
-## The Checklist Before Done
-
-- [ ] Would this stop someone scrolling Instagram? 
-- [ ] Are there at least 3 scroll animations?
-- [ ] Does every interactive element have a hover state?
-- [ ] Is there a real font pairing (not just system fonts)?
-- [ ] Are colors layered/glowing, not flat?
-- [ ] Does the hero section have motion on load?
-- [ ] Is there depth (shadows, blur, z-layers)?
-- [ ] Does it look intentional, not accidental?
+## Before Calling Anything Done
+
+- [ ] Would this win Awwwards SOTD?
+- [ ] Is the background alive (particles / gradient / texture)?
+- [ ] Does every section animate on scroll?
+- [ ] Do all interactive elements react to hover?
+- [ ] Is there a real font pairing — not system fonts?
+- [ ] Does the hero have a load sequence?
+- [ ] Is there mouse-reactive depth somewhere?
+- [ ] Are colors glowing / layered — not flat?
+- [ ] Is there a custom cursor or cursor effect?
+- [ ] Does `prefers-reduced-motion` disable the heavy stuff?

From dd844ed7c0b61210e795ed34847408438d1f7054 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 20 Apr 2026 16:02:13 +0000
Subject: [PATCH 06/12] Rebuild around actual Obsidian Assembly aesthetic from
 screenshot
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Corrected the entire direction — site is warm editorial luxury (sand/cream
bg, thin serif, floating tilted image cards) not dark/cyberpunk. Now
encodes: Cormorant Garamond pairing, floating card parallax+mouse system,
word-by-word reveals, Lenis smooth scroll, mix-blend-mode cursor, magnetic
buttons, warm OKLCH palette, grain texture, timed load sequence.

https://claude.ai/code/session_017ggBPbki5bwiHpFnqpSZ5U
---
 CLAUDE.md | 376 +++++++++++++++++++++++++++++++-----------------------
 1 file changed, 215 insertions(+), 161 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 0dce39d..733bc2f 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1,250 +1,304 @@
 # Frontend Standard — Awwwards-Level Output
 
-Target: every UI should look like it could win Awwwards Site of the Day.
-Reference aesthetic: The Obsidian Assembly — dark luxury, WebGL particles, scroll-driven 3D, mouse-reactive depth.
+Target: every UI should feel like it could win Awwwards Site of the Day.
+Primary reference: The Obsidian Assembly — warm editorial luxury, floating parallax images, massive serif type, mouse-reactive depth.
 
-Never ship flat, static, or generic. If it wouldn't stop someone scrolling, it's not done.
+Never ship flat, static, or generic. If it wouldn't stop someone mid-scroll, it's not done.
 
 ---
 
-## The Aesthetic: Dark Luxury by Default
+## The Aesthetic: Warm Editorial Luxury (default)
 
-Unless told otherwise, default to this:
+The Obsidian Assembly aesthetic — warm, not dark:
 
-- **Background**: true `#000` or `oklch(0.04 0.01 260)` — near-black with a hint of hue
-- **Surfaces**: `oklch(0.08 0.015 260)` — slightly lighter dark panels
-- **Primary accent**: gold/amber `oklch(0.75 0.15 80)` or electric `oklch(0.72 0.28 260)`
-- **Text**: `oklch(0.96 0.01 80)` cream — never pure white
-- **Grain texture overlay**: always add `noise.svg` or CSS noise on the background
-- **Glow**: key elements emit light — `box-shadow: 0 0 60px oklch(0.72 0.28 260 / 0.4)`
-
-OKLCH token system — one `--hue` variable controls everything:
 ```css
 :root {
-  --hue: 260;
-  --accent-hue: 80;
-  --bg:      oklch(0.04 0.01  var(--hue));
-  --surface: oklch(0.09 0.015 var(--hue));
-  --border:  oklch(0.18 0.02  var(--hue));
-  --text:    oklch(0.96 0.01  var(--accent-hue));
-  --muted:   oklch(0.55 0.02  var(--hue));
-  --accent:  oklch(0.72 0.28  var(--hue));
-  --gold:    oklch(0.75 0.15  var(--accent-hue));
-  --glow:    oklch(0.72 0.28  var(--hue) / 0.35);
+  --hue: 38;
+  --bg:        oklch(0.88 0.03  var(--hue));   /* warm sand/cream */
+  --bg-deep:   oklch(0.78 0.04  var(--hue));   /* deeper sand */
+  --surface:   oklch(0.93 0.02  var(--hue));   /* light warm panel */
+  --text:      oklch(0.15 0.02  var(--hue));   /* near-black warm */
+  --text-muted:oklch(0.45 0.02  var(--hue));   /* muted warm gray */
+  --accent:    oklch(0.20 0.01  var(--hue));   /* deep obsidian */
+  --cream:     oklch(0.97 0.015 var(--hue));   /* off-white */
+  --gold:      oklch(0.72 0.12  60);           /* warm gold */
 }
 ```
 
+Always add:
+- **Grain/noise texture** — subtle `filter: url(#noise)` or CSS noise SVG overlay at 3–5% opacity
+- **Warm shadows** — `box-shadow: 0 40px 80px oklch(0.15 0.02 38 / 0.15)` not cold gray
+- **No pure white or black** — always warm-tinted
+
 ---
 
-## Typography — Commanding and Cinematic
+## Typography — Editorial Commanding
 
-Always use a real font pairing. Load from Google Fonts or Fontsource:
+Always use a high-contrast serif for display + clean sans for body:
 
-| Pairing | Use for |
-|---------|---------|
-| **Clash Display + Cabinet Grotesk** | Bold/tech agencies |
-| **Fraunces + DM Sans** | Editorial/luxury |
-| **Syne + Space Mono** | Futuristic/creative |
-| **Playfair Display + Inter** | Premium/dark luxury |
-| **PP Editorial New + Helvetica Neue** | Magazine/minimal |
+| Pairing | Vibe |
+|---------|------|
+| **Cormorant Garamond + DM Sans** | Luxury editorial (closest to Obsidian Assembly) |
+| **Playfair Display + Inter** | Classic luxury |
+| **Fraunces + Cabinet Grotesk** | Modern editorial |
+| **Bodoni Moda + Helvetica Neue** | Fashion/magazine |
+| **PP Editorial New + Grotesk** | Contemporary editorial |
 
 Rules:
-- Hero headlines: `clamp(64px, 12vw, 160px)`, weight 700–900, letter-spacing `-0.04em`
-- **Gradient text on heroes**: `background: linear-gradient(...); -webkit-background-clip: text; -webkit-text-fill-color: transparent`
-- **Masked text reveals**: clip text behind a line that slides up on load
-- **Kinetic typography**: words that scale, rotate, or blur in sequence
-- `font-variant-numeric: tabular-nums` on all numbers/counters
-- Line height 0.9–1.1 for display, 1.6–1.7 for body
+- **Hero type**: `clamp(72px, 13vw, 180px)`, weight 300–400 (thin serif looks more luxury than bold), letter-spacing `-0.03em`
+- **Type bleeds off edge** — let headlines overflow the viewport. Not everything is contained.
+- **Mixed scale drama** — one word huge, next line smaller, asymmetric rhythm
+- **Italic + roman contrast** — mix italic and upright in the same headline
+- **Small caps labels** — `font-variant: small-caps`, `letter-spacing: 0.15em` for nav/metadata
+- **Overlay text** — large faded type behind images/objects as texture
+
+```css
+.hero-headline {
+  font-family: 'Cormorant Garamond', serif;
+  font-size: clamp(72px, 13vw, 180px);
+  font-weight: 300;
+  line-height: 0.9;
+  letter-spacing: -0.03em;
+}
+```
 
 ---
 
-## Particles & WebGL Effects
+## Floating Image Cards — The Signature Effect
 
-For any hero or feature section, include at least one of:
+The Obsidian Assembly's most iconic feature: images float at angles, move on scroll and mouse.
+
+```js
+// Tilted floating cards that parallax on scroll + mouse
+class FloatingCard {
+  constructor(el, options = {}) {
+    this.el = el
+    this.baseRotate = options.rotate || -8   // initial tilt
+    this.parallaxSpeed = options.speed || 0.12
+    this.mouseStrength = options.mouse || 0.04
+    this.y = 0
+    this.targetY = 0
+  }
+
+  onScroll(scrollY) {
+    this.targetY = scrollY * this.parallaxSpeed
+  }
+
+  onMouseMove(mouseX, mouseY, centerX, centerY) {
+    const dx = (mouseX - centerX) * this.mouseStrength
+    const dy = (mouseY - centerY) * this.mouseStrength
+    this.el.style.transform = `
+      rotate(${this.baseRotate}deg)
+      translate(${dx}px, ${this.y + dy}px)
+    `
+  }
+
+  tick() {
+    this.y += (this.targetY - this.y) * 0.08  // lerp
+    this.el.style.transform = `rotate(${this.baseRotate}deg) translateY(${this.y}px)`
+  }
+}
+```
 
-### CSS-only particles (lightweight):
+CSS for the cards:
 ```css
-/* Floating orbs in background */
-.orb {
+.floating-card {
   position: absolute;
-  border-radius: 50%;
-  filter: blur(80px);
-  animation: float 8s ease-in-out infinite;
-  background: var(--accent);
-  opacity: 0.15;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0 60px 120px oklch(0.1 0.02 38 / 0.25);
+  transform-origin: center center;
+  will-change: transform;
 }
-@keyframes float {
-  0%, 100% { transform: translateY(0) scale(1); }
-  50%       { transform: translateY(-40px) scale(1.05); }
+.floating-card img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.6s ease;
 }
-```
-
-### Three.js / React Three Fiber (for impressive 3D):
-- Floating particle field: 2000+ points, slow rotation, mouse-reactive drift
-- 3D geometry with wireframe + bloom post-processing
-- Distortion mesh that warps on mouse move
-- Environment map reflections on surfaces
-
-### Canvas particle system (vanilla):
-```js
-// Minimal particle system — 200 connected dots
-const particles = Array.from({length: 200}, () => ({
-  x: Math.random() * W, y: Math.random() * H,
-  vx: (Math.random()-0.5)*0.5, vy: (Math.random()-0.5)*0.5,
-  r: Math.random()*2+1
-}))
-// Connect particles within 120px with fading lines
+.floating-card:hover img { transform: scale(1.04); }
 ```
 
 ---
 
-## Scroll Animations — Everything Moves
+## Scroll Animations — Everything Is Alive
 
-Every section must animate on scroll. Use IntersectionObserver or scroll-driven CSS:
+Every section must animate. No element should appear statically:
 
-### Must-have scroll effects:
-- **Staggered text reveal**: each word/line slides up with 60ms delay between items
-- **Parallax depth**: background at 0.3x, midground at 0.6x, foreground at 1x scroll speed
-- **Scale + fade in**: `transform: scale(0.92) translateY(30px)` → normal, triggered at 15% viewport
-- **Horizontal scroll section**: pinned container, content scrolls sideways via `translateX`
-- **Scroll progress bar**: 2px line at top, width = scroll percentage
-- **Counter roll-up**: numbers animate from 0 to final value when entering viewport
-- **Image reveal**: `clip-path: inset(100% 0 0 0)` → `inset(0% 0 0 0)` on scroll
+### Text reveals (word by word):
+```js
+// Split text into spans, stagger reveal
+const words = el.textContent.split(' ')
+el.innerHTML = words.map(w =>
+  `<span class="word"><span class="word-inner">${w}</span></span>`
+).join(' ')
+
+// CSS: .word { overflow: hidden } .word-inner { transform: translateY(110%); transition: transform 0.7s cubic-bezier(0.16,1,0.3,1) }
+// On intersection: .word-inner { transform: translateY(0) }
+// Stagger: each word adds 60ms delay
+```
 
-### CSS Scroll-driven (native, no JS):
+### Scroll-driven reveals (native CSS — no JS needed):
 ```css
-@keyframes reveal {
-  from { opacity: 0; transform: translateY(40px); }
+@keyframes fade-up {
+  from { opacity: 0; transform: translateY(50px); }
   to   { opacity: 1; transform: translateY(0); }
 }
 .reveal {
-  animation: reveal linear both;
+  animation: fade-up linear both;
   animation-timeline: view();
-  animation-range: entry 0% entry 40%;
+  animation-range: entry 0% entry 35%;
 }
 ```
 
-### Smooth scroll (always):
+### Must-have scroll effects per page:
+- Staggered word/line reveal on all headlines
+- Images enter with `scale(0.95) opacity(0)` → normal
+- Floating cards drift at different parallax speeds
+- Horizontal pinned scroll for a feature/gallery section
+- Scroll progress bar (2px line, top of page)
+- Numbers count up when entering viewport
+- Section backgrounds shift color temperature subtly on scroll
+
+### Smooth scroll — always use Lenis:
 ```js
-// Lenis smooth scroll — add to every project
 import Lenis from '@studio-freight/lenis'
-const lenis = new Lenis({ duration: 1.2, easing: t => Math.min(1, 1.001 - Math.pow(2, -10*t)) })
+const lenis = new Lenis({
+  duration: 1.4,
+  easing: t => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
+  smooth: true,
+})
+function raf(time) { lenis.raf(time); requestAnimationFrame(raf) }
+requestAnimationFrame(raf)
 ```
 
 ---
 
-## Mouse & Cursor Effects
+## Cursor Effects
+
+Custom cursor is expected on luxury editorial sites:
 
-### Custom cursor (always on dark luxury sites):
 ```js
-const cursor = document.querySelector('.cursor')
-document.addEventListener('mousemove', (e) => {
-  cursor.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`
+// Smooth custom cursor with lag
+const cursor = { x: 0, y: 0, tx: 0, ty: 0, scale: 1 }
+
+document.addEventListener('mousemove', e => {
+  cursor.tx = e.clientX
+  cursor.ty = e.clientY
 })
-// Grow on hover over links/buttons
-```
 
-### Magnetic elements:
-```js
-el.addEventListener('mousemove', (e) => {
-  const r = el.getBoundingClientRect()
-  const x = (e.clientX - r.left - r.width/2) * 0.35
-  const y = (e.clientY - r.top - r.height/2) * 0.35
-  el.style.transform = `translate(${x}px,${y}px)`
+// On hover over interactive elements
+document.querySelectorAll('a, button, .card').forEach(el => {
+  el.addEventListener('mouseenter', () => cursor.scale = 2.5)
+  el.addEventListener('mouseleave', () => cursor.scale = 1)
 })
-el.addEventListener('mouseleave', () => el.style.transform = '')
+
+// In RAF loop: lerp toward target
+cursor.x += (cursor.tx - cursor.x) * 0.12
+cursor.y += (cursor.ty - cursor.y) * 0.12
+cursorEl.style.transform = `translate(${cursor.x}px,${cursor.y}px) scale(${cursor.scale})`
 ```
 
-### Cursor spotlight / glow trail:
-```js
-// Radial gradient follows mouse on hero sections
-hero.addEventListener('mousemove', (e) => {
-  hero.style.background = `radial-gradient(600px at ${e.clientX}px ${e.clientY}px, oklch(0.72 0.28 260 / 0.12), transparent 80%)`
-})
+CSS:
+```css
+.cursor {
+  width: 12px; height: 12px;
+  border-radius: 50%;
+  background: oklch(0.15 0.02 38);
+  position: fixed; top: -6px; left: -6px;
+  pointer-events: none; z-index: 9999;
+  transition: transform 0.15s ease, background 0.2s ease;
+  mix-blend-mode: multiply;          /* inverts on light bg — elegant */
+}
 ```
 
-### 3D card tilt:
+### Magnetic buttons:
 ```js
-card.addEventListener('mousemove', (e) => {
-  const r = card.getBoundingClientRect()
-  const x = (e.clientY - r.top  - r.height/2) / 15
-  const y = (e.clientX - r.left - r.width/2)  / -15
-  card.style.transform = `perspective(800px) rotateX(${x}deg) rotateY(${y}deg)`
+document.querySelectorAll('.btn-magnetic').forEach(btn => {
+  btn.addEventListener('mousemove', e => {
+    const r = btn.getBoundingClientRect()
+    const x = (e.clientX - r.left - r.width/2) * 0.3
+    const y = (e.clientY - r.top - r.height/2) * 0.3
+    btn.style.transform = `translate(${x}px,${y}px)`
+  })
+  btn.addEventListener('mouseleave', () => btn.style.transform = '')
 })
 ```
 
 ---
 
-## Hover States — Every Element Reacts
+## Layout Patterns
 
-Nothing is static on hover:
-- **Buttons**: background sweeps in from left, text color flips, subtle scale `1.02`
-- **Cards**: lift with shadow, border lights up, inner content shifts slightly
-- **Links**: underline draws in with SVG or pseudo-element `scaleX(0→1)`
-- **Images**: slight scale `1.04`, desaturate → color, or reveal overlay text
-- **Nav items**: letter-spacing expands slightly, color transitions 200ms
+- **Hero**: 100vh, massive type overlapping a centered 3D object/image, floating cards on edges
+- **Oversized type as texture**: giant faded headline behind content — `opacity: 0.06`, `font-size: 20vw`
+- **Asymmetric columns**: 60/40 or 70/30 splits, not 50/50
+- **Sparse metadata labels**: small-caps, wide tracking, muted color — placed unexpectedly (top-right corners, vertical rotated)
+- **Image bleeds**: photos that extend beyond their containers
+- **Object showcase sections**: single product/object centered, white space around it, type orbiting it
+- **Diagonal clip dividers**: `clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%)`
+- **Sticky narrative**: element pins while text/images scroll past, creating a storytelling sequence
 
 ---
 
-## Layout Patterns
+## Hover States — Nothing Is Static
 
-- **Full-bleed hero**: 100vh, centered content, particle/WebGL background
-- **Sticky scroll narratives**: element pins while content scrolls past it, triggering states
-- **Asymmetric sections**: not everything centered — break the grid intentionally
-- **Oversized type as decoration**: giant faded text behind content
-- **Diagonal dividers**: `clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%)`
-- **Glass cards**: `backdrop-filter: blur(20px)`, `background: oklch(1 0 0 / 0.04)`, `border: 1px solid oklch(1 0 0 / 0.08)`
-- **Noise texture**: always overlay subtle grain — `opacity: 0.035`, `mix-blend-mode: overlay`
+- **Images**: `scale(1.03)`, warm shadow deepens, optional color overlay fades in
+- **Cards**: lift `translateY(-8px)`, shadow grows, border subtly appears
+- **Buttons**: background sweeps in, or border animates, or text shifts color — always something
+- **Nav links**: underline draws in with `scaleX(0→1)` from left, or letter-spacing expands
+- **Large type links**: slight blur on non-hovered siblings (sibling blur effect)
 
 ---
 
-## Load Sequence (hero animation)
+## Load Sequence
 
-Every page should have an intentional load animation:
 ```
-0ms   → page black, nothing visible
-0ms   → logo/wordmark fades + scales in
-300ms → nav slides down
-600ms → headline words reveal one by one (translateY + opacity)
-900ms → subtext fades in
-1100ms → CTA button scales in
-1300ms → background particles/gradient fades in
+0ms    → blank warm bg
+200ms  → logo appears (fade + slight up)
+400ms  → nav items stagger in
+600ms  → headline first word reveals
+750ms  → headline second word reveals
+900ms  → subheadline fades in
+1100ms → floating cards drift in from edges
+1300ms → CTA button scales in
+1500ms → grain texture fades on
 ```
 
 ---
 
-## Named Aesthetics (reference by name)
+## Named Aesthetics
 
-| Name | Key Look |
-|------|----------|
-| **Obsidian Luxury** | True black, gold accents, grain texture, cinematic type, particles |
-| **Cyberpunk** | `#000` + neon cyan/magenta, scan lines, glitch, monospace |
-| **Aurora Glass** | Deep purple/teal mesh gradient, glass cards, floating orbs |
-| **Editorial Dark** | Near-black, cream serif headlines, magazine grid, high contrast |
-| **Brutalist Dark** | Black + one neon, thick borders, no curves, oversized raw type |
-| **Chrome Retro** | Metallic gradients, geometric 80s shapes, purple/silver |
-| **Organic Dark** | Dark forest greens, warm amber, blob shapes, earthy grain |
+| Name | Background | Type | Accent |
+|------|-----------|------|--------|
+| **Warm Editorial** | Sand/cream beige | High-contrast thin serif | Obsidian black + gold |
+| **Dark OLED Luxury** | True `#000` | Thin serif or sans | Gold/cream |
+| **Cyberpunk** | Pure black | Monospace | Neon cyan + magenta |
+| **Aurora Glass** | Deep navy/purple | Clean sans | Teal + violet glow |
+| **Cold Editorial** | Cool gray-white | Condensed grotesque | Stark black |
+| **Organic Warm** | Warm off-white | Rounded serif | Terracotta + olive |
+| **Brutalist** | White or black | System font bold | One loud accent |
 
 ---
 
-## Accessibility (non-negotiable)
+## Accessibility (always)
 
-- `prefers-reduced-motion`: wrap all animations — skip particles + scroll effects when set
-- WCAG AA on all text even on dark/neon
-- Keyboard nav + visible focus on all interactive elements
-- Semantic HTML under the beautiful CSS
+- All animations wrapped in `prefers-reduced-motion` check
+- WCAG AA contrast even on warm/muted palettes
+- Custom cursor falls back gracefully on touch/mobile
+- Semantic HTML (`<main>`, `<section>`, `<nav>`, `<button>`)
+- Keyboard nav + visible focus states on everything
 
 ---
 
-## Before Calling Anything Done
+## Done Checklist
 
 - [ ] Would this win Awwwards SOTD?
-- [ ] Is the background alive (particles / gradient / texture)?
-- [ ] Does every section animate on scroll?
-- [ ] Do all interactive elements react to hover?
-- [ ] Is there a real font pairing — not system fonts?
-- [ ] Does the hero have a load sequence?
-- [ ] Is there mouse-reactive depth somewhere?
-- [ ] Are colors glowing / layered — not flat?
-- [ ] Is there a custom cursor or cursor effect?
+- [ ] Is there a real font pairing — high-contrast serif for display?
+- [ ] Do images float, tilt, and parallax?
+- [ ] Does every headline reveal word-by-word on scroll?
+- [ ] Is there a custom cursor with smooth lag?
+- [ ] Are magnetic buttons on key CTAs?
+- [ ] Does the hero have a timed load sequence?
+- [ ] Is there depth — floating layers, warm shadows, grain texture?
+- [ ] Do all hover states animate?
 - [ ] Does `prefers-reduced-motion` disable the heavy stuff?

From bfb05b4aa990a703f8b3b1ddfc8964c51848ba93 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 20 Apr 2026 16:04:45 +0000
Subject: [PATCH 07/12] Rewrite: quality standard not aesthetic template

Obsidian Assembly was the quality bar not the style to copy. Now encodes
the craft (smooth scroll, word reveals, cursor lag, parallax depth, hover
reactions, magnetic buttons, OKLCH tokens) applied to whatever aesthetic
fits each project. Aesthetic chosen per project from 12 named options.

https://claude.ai/code/session_017ggBPbki5bwiHpFnqpSZ5U
---
 CLAUDE.md | 405 ++++++++++++++++++++++--------------------------------
 1 file changed, 161 insertions(+), 244 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 733bc2f..d158791 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1,304 +1,221 @@
-# Frontend Standard — Awwwards-Level Output
+# Frontend Quality Standard
 
-Target: every UI should feel like it could win Awwwards Site of the Day.
-Primary reference: The Obsidian Assembly — warm editorial luxury, floating parallax images, massive serif type, mouse-reactive depth.
+Every UI must feel alive, intentional, and stunning. Reference bar: Awwwards Site of the Day level.
+The aesthetic changes per project. The quality never drops.
 
-Never ship flat, static, or generic. If it wouldn't stop someone mid-scroll, it's not done.
+---
+
+## Step 1 — Pick the Right Aesthetic First
+
+Never start coding without choosing a direction. Ask what the site is for, then match it:
+
+| Product Type | Aesthetic Direction |
+|---|---|
+| Agency / creative studio | Editorial, Brutalist, or Maximalist |
+| SaaS / tech product | SaaS Minimal or Retro-Futuristic |
+| Luxury brand / fashion | Warm Editorial or Dark OLED Luxury |
+| Music / nightlife / gaming | Cyberpunk or Aurora Glass |
+| Health / wellness / nature | Organic Biomorphic or Solarpunk |
+| Finance / corporate | Swiss Minimalism or Cold Editorial |
+| Portfolio / personal | Any — pick what fits the person |
+
+Named aesthetics to choose from:
+
+| Aesthetic | Feel |
+|---|---|
+| **Warm Editorial** | Sand/cream, high-contrast serif, floating images, luxury breathing room |
+| **Dark OLED Luxury** | True black, gold/cream accents, thin serif, cinematic |
+| **Cyberpunk** | Pure black, neon cyan/magenta, monospace, glitch, scan lines |
+| **Aurora Glass** | Deep navy/purple mesh gradient, glass cards, glowing orbs |
+| **Swiss Minimalism** | Helvetica, strict grid, maximum white space, no decoration |
+| **Brutalism** | System fonts, visible borders, raw layout, loud color blocks |
+| **Block Maximalism** | Giant color blocks, oversized type, every pixel used |
+| **Retro-Futuristic** | Chrome gradients, geometric shapes, 80s sci-fi energy |
+| **Organic Biomorphic** | Earth tones, blob shapes, warm shadows, serif body |
+| **Editorial** | Magazine grid, mixed type scales, unexpected layout breaks |
+| **Glassmorphism** | Frosted glass surfaces, blur layers, soft color bleeds |
+| **Solarpunk** | Warm greens/golds, organic + technical, hopeful |
 
 ---
 
-## The Aesthetic: Warm Editorial Luxury (default)
+## Step 2 — Colors
 
-The Obsidian Assembly aesthetic — warm, not dark:
+Build everything from one variable. Use OKLCH — never hardcode hex.
 
 ```css
 :root {
-  --hue: 38;
-  --bg:        oklch(0.88 0.03  var(--hue));   /* warm sand/cream */
-  --bg-deep:   oklch(0.78 0.04  var(--hue));   /* deeper sand */
-  --surface:   oklch(0.93 0.02  var(--hue));   /* light warm panel */
-  --text:      oklch(0.15 0.02  var(--hue));   /* near-black warm */
-  --text-muted:oklch(0.45 0.02  var(--hue));   /* muted warm gray */
-  --accent:    oklch(0.20 0.01  var(--hue));   /* deep obsidian */
-  --cream:     oklch(0.97 0.015 var(--hue));   /* off-white */
-  --gold:      oklch(0.72 0.12  60);           /* warm gold */
+  --hue: 250; /* change this one number to retheme everything */
+
+  --bg:      oklch(0.07 0.015 var(--hue));
+  --surface: oklch(0.12 0.02  var(--hue));
+  --border:  oklch(0.22 0.025 var(--hue));
+  --text:    oklch(0.95 0.01  var(--hue));
+  --muted:   oklch(0.55 0.02  var(--hue));
+  --accent:  oklch(0.70 0.28  var(--hue));
+  --glow:    oklch(0.70 0.28  var(--hue) / 0.3);
 }
+/* Light variant: flip --bg to oklch(0.95 ...) and --text to oklch(0.1 ...) */
 ```
 
-Always add:
-- **Grain/noise texture** — subtle `filter: url(#noise)` or CSS noise SVG overlay at 3–5% opacity
-- **Warm shadows** — `box-shadow: 0 40px 80px oklch(0.15 0.02 38 / 0.15)` not cold gray
-- **No pure white or black** — always warm-tinted
+Always:
+- Warm or cool tinted neutrals — never pure white `#fff` or black `#000`
+- Include dark mode tokens from the start
+- Layer colors: gradients, glows, or glass — never flat fills on hero sections
+- Add subtle grain/noise texture overlay (`opacity: 0.04`) for depth
 
 ---
 
-## Typography — Editorial Commanding
+## Step 3 — Typography
 
-Always use a high-contrast serif for display + clean sans for body:
+Every project needs a real font pairing. Never use system fonts without intent.
 
-| Pairing | Vibe |
-|---------|------|
-| **Cormorant Garamond + DM Sans** | Luxury editorial (closest to Obsidian Assembly) |
-| **Playfair Display + Inter** | Classic luxury |
-| **Fraunces + Cabinet Grotesk** | Modern editorial |
-| **Bodoni Moda + Helvetica Neue** | Fashion/magazine |
-| **PP Editorial New + Grotesk** | Contemporary editorial |
+Good pairings:
+- **Cormorant Garamond + DM Sans** — luxury editorial
+- **Clash Display + Cabinet Grotesk** — bold/tech
+- **Fraunces + Inter** — warm/modern
+- **Syne + Space Mono** — futuristic
+- **Playfair Display + Lato** — classic premium
+- **Space Grotesk + Space Mono** — techy clean
 
 Rules:
-- **Hero type**: `clamp(72px, 13vw, 180px)`, weight 300–400 (thin serif looks more luxury than bold), letter-spacing `-0.03em`
-- **Type bleeds off edge** — let headlines overflow the viewport. Not everything is contained.
-- **Mixed scale drama** — one word huge, next line smaller, asymmetric rhythm
-- **Italic + roman contrast** — mix italic and upright in the same headline
-- **Small caps labels** — `font-variant: small-caps`, `letter-spacing: 0.15em` for nav/metadata
-- **Overlay text** — large faded type behind images/objects as texture
-
-```css
-.hero-headline {
-  font-family: 'Cormorant Garamond', serif;
-  font-size: clamp(72px, 13vw, 180px);
-  font-weight: 300;
-  line-height: 0.9;
-  letter-spacing: -0.03em;
-}
-```
+- Hero headlines: `clamp(56px, 10vw, 160px)`, tight letter-spacing (`-0.03em`), line-height `0.9–1.0`
+- Let headlines **bleed off the viewport edge** — not everything is contained
+- **Gradient text** on key headlines: `background-clip: text; -webkit-text-fill-color: transparent`
+- Small-caps labels with wide tracking for metadata/nav: `letter-spacing: 0.12em`
+- Mix italic + upright for rhythm in editorial layouts
+- `font-variant-numeric: tabular-nums` on all numbers
 
 ---
 
-## Floating Image Cards — The Signature Effect
-
-The Obsidian Assembly's most iconic feature: images float at angles, move on scroll and mouse.
-
-```js
-// Tilted floating cards that parallax on scroll + mouse
-class FloatingCard {
-  constructor(el, options = {}) {
-    this.el = el
-    this.baseRotate = options.rotate || -8   // initial tilt
-    this.parallaxSpeed = options.speed || 0.12
-    this.mouseStrength = options.mouse || 0.04
-    this.y = 0
-    this.targetY = 0
-  }
-
-  onScroll(scrollY) {
-    this.targetY = scrollY * this.parallaxSpeed
-  }
-
-  onMouseMove(mouseX, mouseY, centerX, centerY) {
-    const dx = (mouseX - centerX) * this.mouseStrength
-    const dy = (mouseY - centerY) * this.mouseStrength
-    this.el.style.transform = `
-      rotate(${this.baseRotate}deg)
-      translate(${dx}px, ${this.y + dy}px)
-    `
-  }
-
-  tick() {
-    this.y += (this.targetY - this.y) * 0.08  // lerp
-    this.el.style.transform = `rotate(${this.baseRotate}deg) translateY(${this.y}px)`
+## Step 4 — Animations & Motion (always, every project)
+
+### On every page load:
+- Elements don't just appear — they reveal with intention
+- Stagger: logo → nav → headline words → subtext → CTA → background
+- Typical timing: 200ms between each layer, total under 1.5s
+
+### On every scroll:
+- **Word/line reveals**: clip text behind a container, slide up on intersection
+  ```js
+  // Split into words, each wrapped in overflow:hidden, inner slides up
+  // Stagger 60ms per word, cubic-bezier(0.16, 1, 0.3, 1)
+  ```
+- **Fade + rise**: `opacity: 0; transform: translateY(40px)` → normal, triggered at 20% viewport
+- **Parallax depth**: background at 0.2x scroll speed, content at 1x — creates layers
+- **Scroll progress bar**: 2px line at top of page tracking scroll %
+- Native CSS scroll-driven (no JS needed for simple reveals):
+  ```css
+  .reveal {
+    animation: fade-up linear both;
+    animation-timeline: view();
+    animation-range: entry 0% entry 35%;
   }
-}
-```
-
-CSS for the cards:
-```css
-.floating-card {
-  position: absolute;
-  border-radius: 4px;
-  overflow: hidden;
-  box-shadow: 0 60px 120px oklch(0.1 0.02 38 / 0.25);
-  transform-origin: center center;
-  will-change: transform;
-}
-.floating-card img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  transition: transform 0.6s ease;
-}
-.floating-card:hover img { transform: scale(1.04); }
-```
-
----
-
-## Scroll Animations — Everything Is Alive
+  ```
 
-Every section must animate. No element should appear statically:
-
-### Text reveals (word by word):
+### Smooth scroll — always:
 ```js
-// Split text into spans, stagger reveal
-const words = el.textContent.split(' ')
-el.innerHTML = words.map(w =>
-  `<span class="word"><span class="word-inner">${w}</span></span>`
-).join(' ')
-
-// CSS: .word { overflow: hidden } .word-inner { transform: translateY(110%); transition: transform 0.7s cubic-bezier(0.16,1,0.3,1) }
-// On intersection: .word-inner { transform: translateY(0) }
-// Stagger: each word adds 60ms delay
-```
-
-### Scroll-driven reveals (native CSS — no JS needed):
-```css
-@keyframes fade-up {
-  from { opacity: 0; transform: translateY(50px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-.reveal {
-  animation: fade-up linear both;
-  animation-timeline: view();
-  animation-range: entry 0% entry 35%;
-}
+import Lenis from '@studio-freight/lenis'
+const lenis = new Lenis({ duration: 1.2, easing: t => Math.min(1, 1.001 - Math.pow(2, -10*t)) })
+function raf(t) { lenis.raf(t); requestAnimationFrame(raf) }
+requestAnimationFrame(raf)
 ```
 
-### Must-have scroll effects per page:
-- Staggered word/line reveal on all headlines
-- Images enter with `scale(0.95) opacity(0)` → normal
-- Floating cards drift at different parallax speeds
-- Horizontal pinned scroll for a feature/gallery section
-- Scroll progress bar (2px line, top of page)
-- Numbers count up when entering viewport
-- Section backgrounds shift color temperature subtly on scroll
+### On hover — nothing is static:
+- Buttons: color sweep, border animation, or scale `1.02` — always something
+- Cards: `translateY(-6px)`, shadow deepens, inner content shifts slightly
+- Images: `scale(1.04)` with `overflow: hidden` on parent
+- Links: underline draws from left `scaleX(0 → 1)` or letter-spacing expands
+- Nav items: subtle color + spacing transition
 
-### Smooth scroll — always use Lenis:
+### Floating / parallax elements:
+When the design calls for it (hero sections, feature showcases):
 ```js
-import Lenis from '@studio-freight/lenis'
-const lenis = new Lenis({
-  duration: 1.4,
-  easing: t => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
-  smooth: true,
+// Elements move at different speeds on scroll — creates 3D depth
+const layers = [
+  { el: bgEl,   speed: 0.15 },
+  { el: midEl,  speed: 0.4  },
+  { el: fgEl,   speed: 0.7  },
+]
+window.addEventListener('scroll', () => {
+  layers.forEach(({ el, speed }) => {
+    el.style.transform = `translateY(${scrollY * speed}px)`
+  })
 })
-function raf(time) { lenis.raf(time); requestAnimationFrame(raf) }
-requestAnimationFrame(raf)
 ```
 
 ---
 
-## Cursor Effects
+## Step 5 — Cursor Effects (on desktop)
 
-Custom cursor is expected on luxury editorial sites:
+Always add at least one cursor enhancement on creative/luxury sites:
 
 ```js
-// Smooth custom cursor with lag
-const cursor = { x: 0, y: 0, tx: 0, ty: 0, scale: 1 }
-
-document.addEventListener('mousemove', e => {
-  cursor.tx = e.clientX
-  cursor.ty = e.clientY
-})
-
-// On hover over interactive elements
-document.querySelectorAll('a, button, .card').forEach(el => {
-  el.addEventListener('mouseenter', () => cursor.scale = 2.5)
-  el.addEventListener('mouseleave', () => cursor.scale = 1)
+// Smooth lagging cursor
+const pos = { x: 0, y: 0 }
+const target = { x: 0, y: 0 }
+document.addEventListener('mousemove', e => { target.x = e.clientX; target.y = e.clientY })
+;(function loop() {
+  pos.x += (target.x - pos.x) * 0.1
+  pos.y += (target.y - pos.y) * 0.1
+  cursor.style.transform = `translate(${pos.x}px,${pos.y}px)`
+  requestAnimationFrame(loop)
+})()
+
+// Grow on hover
+document.querySelectorAll('a,button,[data-cursor]').forEach(el => {
+  el.addEventListener('mouseenter', () => cursor.classList.add('hover'))
+  el.addEventListener('mouseleave', () => cursor.classList.remove('hover'))
 })
-
-// In RAF loop: lerp toward target
-cursor.x += (cursor.tx - cursor.x) * 0.12
-cursor.y += (cursor.ty - cursor.y) * 0.12
-cursorEl.style.transform = `translate(${cursor.x}px,${cursor.y}px) scale(${cursor.scale})`
 ```
 
-CSS:
 ```css
-.cursor {
-  width: 12px; height: 12px;
-  border-radius: 50%;
-  background: oklch(0.15 0.02 38);
-  position: fixed; top: -6px; left: -6px;
-  pointer-events: none; z-index: 9999;
-  transition: transform 0.15s ease, background 0.2s ease;
-  mix-blend-mode: multiply;          /* inverts on light bg — elegant */
-}
+.cursor { width:12px; height:12px; border-radius:50%; position:fixed; pointer-events:none; z-index:9999; top:-6px; left:-6px; }
+.cursor.hover { transform: scale(3) !important; opacity: 0.5; }
 ```
 
-### Magnetic buttons:
+Magnetic buttons on key CTAs:
 ```js
-document.querySelectorAll('.btn-magnetic').forEach(btn => {
-  btn.addEventListener('mousemove', e => {
-    const r = btn.getBoundingClientRect()
-    const x = (e.clientX - r.left - r.width/2) * 0.3
-    const y = (e.clientY - r.top - r.height/2) * 0.3
-    btn.style.transform = `translate(${x}px,${y}px)`
-  })
-  btn.addEventListener('mouseleave', () => btn.style.transform = '')
+btn.addEventListener('mousemove', e => {
+  const r = btn.getBoundingClientRect()
+  btn.style.transform = `translate(${(e.clientX - r.left - r.width/2) * 0.3}px, ${(e.clientY - r.top - r.height/2) * 0.3}px)`
 })
+btn.addEventListener('mouseleave', () => btn.style.transform = '')
 ```
 
 ---
 
-## Layout Patterns
-
-- **Hero**: 100vh, massive type overlapping a centered 3D object/image, floating cards on edges
-- **Oversized type as texture**: giant faded headline behind content — `opacity: 0.06`, `font-size: 20vw`
-- **Asymmetric columns**: 60/40 or 70/30 splits, not 50/50
-- **Sparse metadata labels**: small-caps, wide tracking, muted color — placed unexpectedly (top-right corners, vertical rotated)
-- **Image bleeds**: photos that extend beyond their containers
-- **Object showcase sections**: single product/object centered, white space around it, type orbiting it
-- **Diagonal clip dividers**: `clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%)`
-- **Sticky narrative**: element pins while text/images scroll past, creating a storytelling sequence
-
----
-
-## Hover States — Nothing Is Static
-
-- **Images**: `scale(1.03)`, warm shadow deepens, optional color overlay fades in
-- **Cards**: lift `translateY(-8px)`, shadow grows, border subtly appears
-- **Buttons**: background sweeps in, or border animates, or text shifts color — always something
-- **Nav links**: underline draws in with `scaleX(0→1)` from left, or letter-spacing expands
-- **Large type links**: slight blur on non-hovered siblings (sibling blur effect)
-
----
-
-## Load Sequence
-
-```
-0ms    → blank warm bg
-200ms  → logo appears (fade + slight up)
-400ms  → nav items stagger in
-600ms  → headline first word reveals
-750ms  → headline second word reveals
-900ms  → subheadline fades in
-1100ms → floating cards drift in from edges
-1300ms → CTA button scales in
-1500ms → grain texture fades on
-```
-
----
-
-## Named Aesthetics
+## Step 6 — Layout Craft
 
-| Name | Background | Type | Accent |
-|------|-----------|------|--------|
-| **Warm Editorial** | Sand/cream beige | High-contrast thin serif | Obsidian black + gold |
-| **Dark OLED Luxury** | True `#000` | Thin serif or sans | Gold/cream |
-| **Cyberpunk** | Pure black | Monospace | Neon cyan + magenta |
-| **Aurora Glass** | Deep navy/purple | Clean sans | Teal + violet glow |
-| **Cold Editorial** | Cool gray-white | Condensed grotesque | Stark black |
-| **Organic Warm** | Warm off-white | Rounded serif | Terracotta + olive |
-| **Brutalist** | White or black | System font bold | One loud accent |
+- **Asymmetric grids** — break 50/50 splits. Use 60/40, 70/30, or free positioning
+- **Oversized decorative type** — giant faded text behind content, `opacity: 0.05–0.08`
+- **Image tilt** — cards and images at slight angles (`rotate: -4deg`) feel alive
+- **Glass surfaces** — `backdrop-filter: blur(20px)`, `background: white/5%`, `border: 1px solid white/10%`
+- **Diagonal section breaks** — `clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%)`
+- **Sticky scroll narratives** — element pins while content scrolls past, changing its state
+- **Full-bleed images** that escape their containers
 
 ---
 
 ## Accessibility (always)
 
-- All animations wrapped in `prefers-reduced-motion` check
-- WCAG AA contrast even on warm/muted palettes
-- Custom cursor falls back gracefully on touch/mobile
-- Semantic HTML (`<main>`, `<section>`, `<nav>`, `<button>`)
-- Keyboard nav + visible focus states on everything
+- `prefers-reduced-motion`: disable all animations and parallax when set
+- WCAG AA contrast minimum on all text
+- Semantic HTML — `<main>`, `<nav>`, `<section>`, `<button>`, never `<div>` for interaction
+- Custom cursor is decorative — remove on touch devices
+- Keyboard navigation + visible focus states on all interactive elements
 
 ---
 
 ## Done Checklist
 
-- [ ] Would this win Awwwards SOTD?
-- [ ] Is there a real font pairing — high-contrast serif for display?
-- [ ] Do images float, tilt, and parallax?
-- [ ] Does every headline reveal word-by-word on scroll?
-- [ ] Is there a custom cursor with smooth lag?
-- [ ] Are magnetic buttons on key CTAs?
-- [ ] Does the hero have a timed load sequence?
-- [ ] Is there depth — floating layers, warm shadows, grain texture?
-- [ ] Do all hover states animate?
-- [ ] Does `prefers-reduced-motion` disable the heavy stuff?
+- [ ] Is the aesthetic named and intentional — not "modern" or "clean"?
+- [ ] Is the color system built from `--hue` with OKLCH — no hardcoded hex?
+- [ ] Real font pairing — not system fonts?
+- [ ] Do headlines reveal word by word on scroll?
+- [ ] Does every section animate on entering the viewport?
+- [ ] Do all hover states have a visible reaction?
+- [ ] Is there smooth scroll (Lenis)?
+- [ ] Is there a cursor effect on desktop?
+- [ ] Is there depth — parallax, shadows, layers, or texture?
+- [ ] Does `prefers-reduced-motion` turn off the heavy stuff?
+- [ ] Would this stop someone mid-scroll?

From 2008cdae38f98b99d4c0219e956dccfb4ab15fba Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 20 Apr 2026 16:06:22 +0000
Subject: [PATCH 08/12] Simplify: quality bar + inspiration, not prescriptive
 effects
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Removed mandatory effect checklists. Now sets the standard (Awwwards
level) and lists effects as inspiration to draw from, not requirements.
Each project chooses its own approach — the quality is constant, the
execution varies.

https://claude.ai/code/session_017ggBPbki5bwiHpFnqpSZ5U
---
 CLAUDE.md | 290 +++++++++++++++++-------------------------------------
 1 file changed, 93 insertions(+), 197 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index d158791..975d648 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1,221 +1,117 @@
-# Frontend Quality Standard
+# Frontend Quality Bar
 
-Every UI must feel alive, intentional, and stunning. Reference bar: Awwwards Site of the Day level.
-The aesthetic changes per project. The quality never drops.
+Every UI must be beautiful, intentional, and feel alive. Reference: Awwwards Site of the Day level.
+The effects, aesthetic, and approach change per project. The quality never drops.
 
 ---
 
-## Step 1 — Pick the Right Aesthetic First
+## The Standard
 
-Never start coding without choosing a direction. Ask what the site is for, then match it:
+Before shipping anything ask: **would this stop someone mid-scroll?**
+If no — add more craft. Never ship flat, static, or generic.
 
-| Product Type | Aesthetic Direction |
-|---|---|
-| Agency / creative studio | Editorial, Brutalist, or Maximalist |
-| SaaS / tech product | SaaS Minimal or Retro-Futuristic |
-| Luxury brand / fashion | Warm Editorial or Dark OLED Luxury |
-| Music / nightlife / gaming | Cyberpunk or Aurora Glass |
-| Health / wellness / nature | Organic Biomorphic or Solarpunk |
-| Finance / corporate | Swiss Minimalism or Cold Editorial |
-| Portfolio / personal | Any — pick what fits the person |
+---
+
+## Always Do
+
+- Pick a named aesthetic before writing a single line of code
+- Use OKLCH color tokens built from one `--hue` variable — never hardcode hex
+- Use a real font pairing — never browser defaults
+- Dark mode tokens from the start
+- Brand-tinted neutrals — never pure `#fff` or `#000`
+- Semantic HTML + WCAG AA contrast + keyboard nav
+- Respect `prefers-reduced-motion`
+
+---
 
-Named aesthetics to choose from:
+## Aesthetic Options (pick the right one per project)
 
 | Aesthetic | Feel |
 |---|---|
-| **Warm Editorial** | Sand/cream, high-contrast serif, floating images, luxury breathing room |
-| **Dark OLED Luxury** | True black, gold/cream accents, thin serif, cinematic |
-| **Cyberpunk** | Pure black, neon cyan/magenta, monospace, glitch, scan lines |
-| **Aurora Glass** | Deep navy/purple mesh gradient, glass cards, glowing orbs |
-| **Swiss Minimalism** | Helvetica, strict grid, maximum white space, no decoration |
-| **Brutalism** | System fonts, visible borders, raw layout, loud color blocks |
-| **Block Maximalism** | Giant color blocks, oversized type, every pixel used |
-| **Retro-Futuristic** | Chrome gradients, geometric shapes, 80s sci-fi energy |
-| **Organic Biomorphic** | Earth tones, blob shapes, warm shadows, serif body |
-| **Editorial** | Magazine grid, mixed type scales, unexpected layout breaks |
-| **Glassmorphism** | Frosted glass surfaces, blur layers, soft color bleeds |
-| **Solarpunk** | Warm greens/golds, organic + technical, hopeful |
+| Warm Editorial | Sand/cream, thin serif, luxury breathing room |
+| Dark OLED Luxury | True black, gold/cream, cinematic |
+| Cyberpunk | Black + neon, monospace, glitch |
+| Aurora Glass | Deep gradient, frosted glass, glowing |
+| Swiss Minimalism | Helvetica, strict grid, pure white space |
+| Brutalism | Raw borders, system fonts, loud color |
+| Block Maximalism | Giant color blocks, oversized type |
+| Retro-Futuristic | Chrome, geometric, 80s sci-fi |
+| Organic Biomorphic | Earth tones, blobs, warm serif |
+| Editorial | Magazine grid, mixed scale, unexpected breaks |
+| Glassmorphism | Frosted surfaces, blur layers, soft color |
+| Solarpunk | Greens/golds, organic + technical, hopeful |
 
 ---
 
-## Step 2 — Colors
+## Inspiration — Effects & Ideas
+
+These are possibilities to draw from, not requirements. Use what fits:
+
+**Motion & Scroll**
+- Smooth scroll with eased deceleration (Lenis)
+- Scroll-triggered reveals — fade, rise, clip, scale
+- Parallax depth layers at different speeds
+- Pinned scroll narratives — element stays while content moves
+- Horizontal scroll sections
+- Scroll progress indicator
+- Staggered text/word reveals
+- Counter animations on numbers
+
+**Cursor & Mouse**
+- Custom cursor with smooth lag
+- Magnetic buttons that follow the cursor
+- Spotlight/glow that follows mouse on hero sections
+- 3D card tilt on mouse move
+- Elements that drift slightly with mouse position
+
+**Visual Depth**
+- Grain/noise texture overlay for tactile feel
+- Floating elements at slight angles that parallax
+- Glass surfaces with backdrop blur
+- Glows and soft light emanating from key elements
+- Layered z-space — not everything on one plane
+
+**Typography**
+- Headlines that bleed off viewport edges
+- Gradient or color-clip text
+- Oversized decorative type behind content (low opacity)
+- Kinetic type — words that scale, rotate, or blur in sequence
+- Italic + roman contrast in the same headline
+
+**Hover**
+- Magnetic pull on interactive elements
+- Image scale inside a clipped container
+- Underline that draws in from one side
+- Sibling blur — non-hovered items blur slightly
+- Color sweep or border animation on buttons
+
+**Particles & Atmosphere**
+- Floating orbs (CSS blur + animation)
+- Canvas particle fields
+- Three.js / WebGL for full 3D scenes
+- Animated mesh gradients
+- SVG path animations
+
+**Layout Drama**
+- Asymmetric columns — break the 50/50 grid
+- Diagonal or curved section dividers
+- Images and elements that escape their containers
+- Sticky elements that morph as you scroll past them
+- Full-bleed sections alternating with contained ones
 
-Build everything from one variable. Use OKLCH — never hardcode hex.
+---
+
+## OKLCH Token Template
 
 ```css
 :root {
-  --hue: 250; /* change this one number to retheme everything */
-
+  --hue: 250;
   --bg:      oklch(0.07 0.015 var(--hue));
   --surface: oklch(0.12 0.02  var(--hue));
-  --border:  oklch(0.22 0.025 var(--hue));
   --text:    oklch(0.95 0.01  var(--hue));
   --muted:   oklch(0.55 0.02  var(--hue));
   --accent:  oklch(0.70 0.28  var(--hue));
-  --glow:    oklch(0.70 0.28  var(--hue) / 0.3);
+  --border:  oklch(0.22 0.02  var(--hue));
 }
-/* Light variant: flip --bg to oklch(0.95 ...) and --text to oklch(0.1 ...) */
-```
-
-Always:
-- Warm or cool tinted neutrals — never pure white `#fff` or black `#000`
-- Include dark mode tokens from the start
-- Layer colors: gradients, glows, or glass — never flat fills on hero sections
-- Add subtle grain/noise texture overlay (`opacity: 0.04`) for depth
-
----
-
-## Step 3 — Typography
-
-Every project needs a real font pairing. Never use system fonts without intent.
-
-Good pairings:
-- **Cormorant Garamond + DM Sans** — luxury editorial
-- **Clash Display + Cabinet Grotesk** — bold/tech
-- **Fraunces + Inter** — warm/modern
-- **Syne + Space Mono** — futuristic
-- **Playfair Display + Lato** — classic premium
-- **Space Grotesk + Space Mono** — techy clean
-
-Rules:
-- Hero headlines: `clamp(56px, 10vw, 160px)`, tight letter-spacing (`-0.03em`), line-height `0.9–1.0`
-- Let headlines **bleed off the viewport edge** — not everything is contained
-- **Gradient text** on key headlines: `background-clip: text; -webkit-text-fill-color: transparent`
-- Small-caps labels with wide tracking for metadata/nav: `letter-spacing: 0.12em`
-- Mix italic + upright for rhythm in editorial layouts
-- `font-variant-numeric: tabular-nums` on all numbers
-
----
-
-## Step 4 — Animations & Motion (always, every project)
-
-### On every page load:
-- Elements don't just appear — they reveal with intention
-- Stagger: logo → nav → headline words → subtext → CTA → background
-- Typical timing: 200ms between each layer, total under 1.5s
-
-### On every scroll:
-- **Word/line reveals**: clip text behind a container, slide up on intersection
-  ```js
-  // Split into words, each wrapped in overflow:hidden, inner slides up
-  // Stagger 60ms per word, cubic-bezier(0.16, 1, 0.3, 1)
-  ```
-- **Fade + rise**: `opacity: 0; transform: translateY(40px)` → normal, triggered at 20% viewport
-- **Parallax depth**: background at 0.2x scroll speed, content at 1x — creates layers
-- **Scroll progress bar**: 2px line at top of page tracking scroll %
-- Native CSS scroll-driven (no JS needed for simple reveals):
-  ```css
-  .reveal {
-    animation: fade-up linear both;
-    animation-timeline: view();
-    animation-range: entry 0% entry 35%;
-  }
-  ```
-
-### Smooth scroll — always:
-```js
-import Lenis from '@studio-freight/lenis'
-const lenis = new Lenis({ duration: 1.2, easing: t => Math.min(1, 1.001 - Math.pow(2, -10*t)) })
-function raf(t) { lenis.raf(t); requestAnimationFrame(raf) }
-requestAnimationFrame(raf)
-```
-
-### On hover — nothing is static:
-- Buttons: color sweep, border animation, or scale `1.02` — always something
-- Cards: `translateY(-6px)`, shadow deepens, inner content shifts slightly
-- Images: `scale(1.04)` with `overflow: hidden` on parent
-- Links: underline draws from left `scaleX(0 → 1)` or letter-spacing expands
-- Nav items: subtle color + spacing transition
-
-### Floating / parallax elements:
-When the design calls for it (hero sections, feature showcases):
-```js
-// Elements move at different speeds on scroll — creates 3D depth
-const layers = [
-  { el: bgEl,   speed: 0.15 },
-  { el: midEl,  speed: 0.4  },
-  { el: fgEl,   speed: 0.7  },
-]
-window.addEventListener('scroll', () => {
-  layers.forEach(({ el, speed }) => {
-    el.style.transform = `translateY(${scrollY * speed}px)`
-  })
-})
-```
-
----
-
-## Step 5 — Cursor Effects (on desktop)
-
-Always add at least one cursor enhancement on creative/luxury sites:
-
-```js
-// Smooth lagging cursor
-const pos = { x: 0, y: 0 }
-const target = { x: 0, y: 0 }
-document.addEventListener('mousemove', e => { target.x = e.clientX; target.y = e.clientY })
-;(function loop() {
-  pos.x += (target.x - pos.x) * 0.1
-  pos.y += (target.y - pos.y) * 0.1
-  cursor.style.transform = `translate(${pos.x}px,${pos.y}px)`
-  requestAnimationFrame(loop)
-})()
-
-// Grow on hover
-document.querySelectorAll('a,button,[data-cursor]').forEach(el => {
-  el.addEventListener('mouseenter', () => cursor.classList.add('hover'))
-  el.addEventListener('mouseleave', () => cursor.classList.remove('hover'))
-})
+/* Swap --hue to retheme everything. Flip oklch lightness for light mode. */
 ```
-
-```css
-.cursor { width:12px; height:12px; border-radius:50%; position:fixed; pointer-events:none; z-index:9999; top:-6px; left:-6px; }
-.cursor.hover { transform: scale(3) !important; opacity: 0.5; }
-```
-
-Magnetic buttons on key CTAs:
-```js
-btn.addEventListener('mousemove', e => {
-  const r = btn.getBoundingClientRect()
-  btn.style.transform = `translate(${(e.clientX - r.left - r.width/2) * 0.3}px, ${(e.clientY - r.top - r.height/2) * 0.3}px)`
-})
-btn.addEventListener('mouseleave', () => btn.style.transform = '')
-```
-
----
-
-## Step 6 — Layout Craft
-
-- **Asymmetric grids** — break 50/50 splits. Use 60/40, 70/30, or free positioning
-- **Oversized decorative type** — giant faded text behind content, `opacity: 0.05–0.08`
-- **Image tilt** — cards and images at slight angles (`rotate: -4deg`) feel alive
-- **Glass surfaces** — `backdrop-filter: blur(20px)`, `background: white/5%`, `border: 1px solid white/10%`
-- **Diagonal section breaks** — `clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%)`
-- **Sticky scroll narratives** — element pins while content scrolls past, changing its state
-- **Full-bleed images** that escape their containers
-
----
-
-## Accessibility (always)
-
-- `prefers-reduced-motion`: disable all animations and parallax when set
-- WCAG AA contrast minimum on all text
-- Semantic HTML — `<main>`, `<nav>`, `<section>`, `<button>`, never `<div>` for interaction
-- Custom cursor is decorative — remove on touch devices
-- Keyboard navigation + visible focus states on all interactive elements
-
----
-
-## Done Checklist
-
-- [ ] Is the aesthetic named and intentional — not "modern" or "clean"?
-- [ ] Is the color system built from `--hue` with OKLCH — no hardcoded hex?
-- [ ] Real font pairing — not system fonts?
-- [ ] Do headlines reveal word by word on scroll?
-- [ ] Does every section animate on entering the viewport?
-- [ ] Do all hover states have a visible reaction?
-- [ ] Is there smooth scroll (Lenis)?
-- [ ] Is there a cursor effect on desktop?
-- [ ] Is there depth — parallax, shadows, layers, or texture?
-- [ ] Does `prefers-reduced-motion` turn off the heavy stuff?
-- [ ] Would this stop someone mid-scroll?

From fe7a308d64ae0ea261752f114ef333f86c7e20da Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 20 Apr 2026 16:07:21 +0000
Subject: [PATCH 09/12] Strict quality bar with flexible creative execution

Hard NEVER/ALWAYS rules enforce the quality standard. Five quality tests
must pass before anything ships. Effects list stays as creative inspiration
to pick from, not a checklist. Aesthetic chosen per project.

https://claude.ai/code/session_017ggBPbki5bwiHpFnqpSZ5U
---
 CLAUDE.md | 112 +++++++++++++++++++++++++++++++-----------------------
 1 file changed, 65 insertions(+), 47 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 975d648..fc7a525 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1,30 +1,46 @@
-# Frontend Quality Bar
+# Frontend Quality Standard — Non-Negotiable
 
-Every UI must be beautiful, intentional, and feel alive. Reference: Awwwards Site of the Day level.
-The effects, aesthetic, and approach change per project. The quality never drops.
+Every UI must be stunning. Not good. Not clean. Stunning.
+Reference bar: Awwwards Site of the Day. If it wouldn't win, keep going.
 
 ---
 
-## The Standard
-
-Before shipping anything ask: **would this stop someone mid-scroll?**
-If no — add more craft. Never ship flat, static, or generic.
-
----
+## Strict Rules — No Exceptions
+
+**NEVER ship:**
+- A white or gray background with no texture, gradient, or depth
+- System fonts or Inter without a deliberate pairing decision
+- Static elements that could be animated
+- Flat color fills on hero sections
+- Generic card layouts with border-radius + drop-shadow defaults
+- Buttons with no hover reaction
+- Elements that just appear — everything enters with intention
+- Pure `#ffffff` or `#000000` — always hue-tinted
+- Hardcoded hex colors — always OKLCH tokens
+
+**ALWAYS include:**
+- A named aesthetic chosen before writing one line of code
+- OKLCH color system built from a single `--hue` variable
+- A real font pairing — display + body, deliberate choice
+- Dark mode tokens from the start
+- At least one scroll-triggered animation per section
+- Motion on every interactive element (hover, focus, active)
+- Depth — shadows, layers, texture, or parallax — somewhere on every page
+- `prefers-reduced-motion` support wrapping all animation
+- WCAG AA contrast + semantic HTML + keyboard navigation
 
-## Always Do
+**The quality test — ask before calling anything done:**
+1. Would this stop someone mid-scroll?
+2. Does every interactive element react visually?
+3. Is there depth — not everything on one flat plane?
+4. Is the typography commanding, not just readable?
+5. Does it feel alive when you move through it?
 
-- Pick a named aesthetic before writing a single line of code
-- Use OKLCH color tokens built from one `--hue` variable — never hardcode hex
-- Use a real font pairing — never browser defaults
-- Dark mode tokens from the start
-- Brand-tinted neutrals — never pure `#fff` or `#000`
-- Semantic HTML + WCAG AA contrast + keyboard nav
-- Respect `prefers-reduced-motion`
+If any answer is no — add more.
 
 ---
 
-## Aesthetic Options (pick the right one per project)
+## Aesthetic — Pick One Per Project, Commit Fully
 
 | Aesthetic | Feel |
 |---|---|
@@ -43,69 +59,72 @@ If no — add more craft. Never ship flat, static, or generic.
 
 ---
 
-## Inspiration — Effects & Ideas
+## Effects & Features — Inspiration to Draw From
 
-These are possibilities to draw from, not requirements. Use what fits:
+Pick what fits. Use creatively. Don't use all of them — use the right ones.
 
 **Motion & Scroll**
 - Smooth scroll with eased deceleration (Lenis)
-- Scroll-triggered reveals — fade, rise, clip, scale
+- Scroll-triggered reveals — fade, rise, clip, scale, rotate
 - Parallax depth layers at different speeds
-- Pinned scroll narratives — element stays while content moves
+- Pinned scroll narratives
 - Horizontal scroll sections
-- Scroll progress indicator
-- Staggered text/word reveals
+- Staggered text/word/letter reveals
 - Counter animations on numbers
+- Scroll progress indicator
 
 **Cursor & Mouse**
 - Custom cursor with smooth lag
 - Magnetic buttons that follow the cursor
-- Spotlight/glow that follows mouse on hero sections
+- Spotlight/glow following mouse across hero
 - 3D card tilt on mouse move
-- Elements that drift slightly with mouse position
+- Elements that drift with mouse position
 
 **Visual Depth**
-- Grain/noise texture overlay for tactile feel
-- Floating elements at slight angles that parallax
+- Grain/noise texture overlay
+- Floating elements at angles that parallax
 - Glass surfaces with backdrop blur
-- Glows and soft light emanating from key elements
+- Glows and soft light on key elements
 - Layered z-space — not everything on one plane
+- Animated mesh gradients
 
 **Typography**
-- Headlines that bleed off viewport edges
+- Headlines bleeding off viewport edges
 - Gradient or color-clip text
-- Oversized decorative type behind content (low opacity)
-- Kinetic type — words that scale, rotate, or blur in sequence
+- Oversized decorative type behind content
+- Kinetic type — words that scale, blur, rotate in sequence
 - Italic + roman contrast in the same headline
 
-**Hover**
-- Magnetic pull on interactive elements
-- Image scale inside a clipped container
-- Underline that draws in from one side
-- Sibling blur — non-hovered items blur slightly
+**Hover States**
+- Magnetic pull on CTAs
+- Image scale inside clipped containers
+- Underline drawing in from one side
+- Sibling blur effect
 - Color sweep or border animation on buttons
+- Text scramble / letter randomize
 
 **Particles & Atmosphere**
-- Floating orbs (CSS blur + animation)
+- Floating CSS orbs (blur + keyframe)
 - Canvas particle fields
-- Three.js / WebGL for full 3D scenes
-- Animated mesh gradients
+- Three.js / WebGL 3D scenes
 - SVG path animations
+- Color-shifting backgrounds on scroll
 
 **Layout Drama**
-- Asymmetric columns — break the 50/50 grid
+- Asymmetric columns — break the grid intentionally
 - Diagonal or curved section dividers
-- Images and elements that escape their containers
-- Sticky elements that morph as you scroll past them
-- Full-bleed sections alternating with contained ones
+- Elements that escape their containers
+- Sticky elements that morph as you scroll
+- Full-bleed alternating with contained sections
+- Oversized images behind type
 
 ---
 
-## OKLCH Token Template
+## OKLCH Token System — Always
 
 ```css
 :root {
-  --hue: 250;
+  --hue: 250; /* one number rethemes everything */
   --bg:      oklch(0.07 0.015 var(--hue));
   --surface: oklch(0.12 0.02  var(--hue));
   --text:    oklch(0.95 0.01  var(--hue));
@@ -113,5 +132,4 @@ These are possibilities to draw from, not requirements. Use what fits:
   --accent:  oklch(0.70 0.28  var(--hue));
   --border:  oklch(0.22 0.02  var(--hue));
 }
-/* Swap --hue to retheme everything. Flip oklch lightness for light mode. */
 ```

From 89989dec03a5ed3b60945d5078d712b7f2f28921 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 20 Apr 2026 16:10:35 +0000
Subject: [PATCH 10/12] Minimize token usage, preserve full quality standard
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Stripped all code blocks, verbose prose, redundant words. Same strict
NEVER/ALWAYS rules, 5 quality tests, 12 aesthetics, full effects
inspiration list — compressed to minimum readable form.

https://claude.ai/code/session_017ggBPbki5bwiHpFnqpSZ5U
---
 CLAUDE.md | 167 ++++++++++++------------------------------------------
 1 file changed, 36 insertions(+), 131 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index fc7a525..401ac77 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1,135 +1,40 @@
-# Frontend Quality Standard — Non-Negotiable
-
-Every UI must be stunning. Not good. Not clean. Stunning.
-Reference bar: Awwwards Site of the Day. If it wouldn't win, keep going.
-
----
-
-## Strict Rules — No Exceptions
-
-**NEVER ship:**
-- A white or gray background with no texture, gradient, or depth
-- System fonts or Inter without a deliberate pairing decision
-- Static elements that could be animated
-- Flat color fills on hero sections
-- Generic card layouts with border-radius + drop-shadow defaults
-- Buttons with no hover reaction
-- Elements that just appear — everything enters with intention
-- Pure `#ffffff` or `#000000` — always hue-tinted
-- Hardcoded hex colors — always OKLCH tokens
-
-**ALWAYS include:**
-- A named aesthetic chosen before writing one line of code
-- OKLCH color system built from a single `--hue` variable
-- A real font pairing — display + body, deliberate choice
-- Dark mode tokens from the start
-- At least one scroll-triggered animation per section
-- Motion on every interactive element (hover, focus, active)
-- Depth — shadows, layers, texture, or parallax — somewhere on every page
-- `prefers-reduced-motion` support wrapping all animation
-- WCAG AA contrast + semantic HTML + keyboard navigation
-
-**The quality test — ask before calling anything done:**
+# Frontend Quality Standard
+
+Bar: Awwwards SOTD. Not good. Stunning. If it wouldn't win, keep going.
+
+## Strict Rules
+
+**NEVER:** white/gray flat bg · system fonts without intent · static elements that could animate · generic card defaults · buttons with no hover · elements that just appear · pure #fff/#000 · hardcoded hex
+
+**ALWAYS:** named aesthetic before first line of code · OKLCH tokens from single `--hue` · real font pairing · dark mode tokens · scroll animation every section · hover/focus/active motion on all interactive elements · depth somewhere (shadow/layer/texture/parallax) · `prefers-reduced-motion` · WCAG AA + semantic HTML + keyboard nav
+
+**5 quality tests — all must pass before done:**
 1. Would this stop someone mid-scroll?
 2. Does every interactive element react visually?
 3. Is there depth — not everything on one flat plane?
 4. Is the typography commanding, not just readable?
-5. Does it feel alive when you move through it?
-
-If any answer is no — add more.
-
----
-
-## Aesthetic — Pick One Per Project, Commit Fully
-
-| Aesthetic | Feel |
-|---|---|
-| Warm Editorial | Sand/cream, thin serif, luxury breathing room |
-| Dark OLED Luxury | True black, gold/cream, cinematic |
-| Cyberpunk | Black + neon, monospace, glitch |
-| Aurora Glass | Deep gradient, frosted glass, glowing |
-| Swiss Minimalism | Helvetica, strict grid, pure white space |
-| Brutalism | Raw borders, system fonts, loud color |
-| Block Maximalism | Giant color blocks, oversized type |
-| Retro-Futuristic | Chrome, geometric, 80s sci-fi |
-| Organic Biomorphic | Earth tones, blobs, warm serif |
-| Editorial | Magazine grid, mixed scale, unexpected breaks |
-| Glassmorphism | Frosted surfaces, blur layers, soft color |
-| Solarpunk | Greens/golds, organic + technical, hopeful |
-
----
-
-## Effects & Features — Inspiration to Draw From
-
-Pick what fits. Use creatively. Don't use all of them — use the right ones.
-
-**Motion & Scroll**
-- Smooth scroll with eased deceleration (Lenis)
-- Scroll-triggered reveals — fade, rise, clip, scale, rotate
-- Parallax depth layers at different speeds
-- Pinned scroll narratives
-- Horizontal scroll sections
-- Staggered text/word/letter reveals
-- Counter animations on numbers
-- Scroll progress indicator
-
-**Cursor & Mouse**
-- Custom cursor with smooth lag
-- Magnetic buttons that follow the cursor
-- Spotlight/glow following mouse across hero
-- 3D card tilt on mouse move
-- Elements that drift with mouse position
-
-**Visual Depth**
-- Grain/noise texture overlay
-- Floating elements at angles that parallax
-- Glass surfaces with backdrop blur
-- Glows and soft light on key elements
-- Layered z-space — not everything on one plane
-- Animated mesh gradients
-
-**Typography**
-- Headlines bleeding off viewport edges
-- Gradient or color-clip text
-- Oversized decorative type behind content
-- Kinetic type — words that scale, blur, rotate in sequence
-- Italic + roman contrast in the same headline
-
-**Hover States**
-- Magnetic pull on CTAs
-- Image scale inside clipped containers
-- Underline drawing in from one side
-- Sibling blur effect
-- Color sweep or border animation on buttons
-- Text scramble / letter randomize
-
-**Particles & Atmosphere**
-- Floating CSS orbs (blur + keyframe)
-- Canvas particle fields
-- Three.js / WebGL 3D scenes
-- SVG path animations
-- Color-shifting backgrounds on scroll
-
-**Layout Drama**
-- Asymmetric columns — break the grid intentionally
-- Diagonal or curved section dividers
-- Elements that escape their containers
-- Sticky elements that morph as you scroll
-- Full-bleed alternating with contained sections
-- Oversized images behind type
-
----
-
-## OKLCH Token System — Always
-
-```css
-:root {
-  --hue: 250; /* one number rethemes everything */
-  --bg:      oklch(0.07 0.015 var(--hue));
-  --surface: oklch(0.12 0.02  var(--hue));
-  --text:    oklch(0.95 0.01  var(--hue));
-  --muted:   oklch(0.55 0.02  var(--hue));
-  --accent:  oklch(0.70 0.28  var(--hue));
-  --border:  oklch(0.22 0.02  var(--hue));
-}
-```
+5. Does it feel alive moving through it?
+
+## Aesthetics — Pick One, Commit Fully
+
+Warm Editorial · Dark OLED Luxury · Cyberpunk · Aurora Glass · Swiss Minimalism · Brutalism · Block Maximalism · Retro-Futuristic · Organic Biomorphic · Editorial · Glassmorphism · Solarpunk
+
+## Effects — Creative Inspiration (pick what fits, not all)
+
+**Scroll & Motion:** Lenis smooth scroll · scroll-triggered reveals (fade/rise/clip/scale) · parallax depth layers · pinned narratives · horizontal scroll · staggered word/letter reveals · number counters · progress bar
+
+**Cursor & Mouse:** lagging custom cursor · magnetic buttons · mouse spotlight/glow · 3D card tilt · elements drifting with mouse
+
+**Depth & Atmosphere:** grain texture overlay · glass surfaces + backdrop blur · glows on key elements · layered z-space · animated mesh gradients · floating angled elements
+
+**Typography:** headlines bleeding off viewport · gradient clip text · oversized faded type behind content · kinetic type · italic+roman contrast
+
+**Hover:** magnetic pull · image scale in clip · underline draw · sibling blur · color sweep · text scramble
+
+**Particles:** CSS blur orbs · canvas particle fields · Three.js/WebGL · SVG path animation · scroll color-shift
+
+**Layout:** asymmetric columns · diagonal/curved dividers · elements escaping containers · sticky morphing elements · full-bleed alternating sections
+
+## Tokens
+
+Always OKLCH, single `--hue` variable. Never hardcode hex. Light/dark from lightness flip.

From 97c729526cc0969c04abf3e15f2d52073d4cf5f0 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 20 Apr 2026 16:13:22 +0000
Subject: [PATCH 11/12] =?UTF-8?q?Add=20custom=20effects=20section=20?=
 =?UTF-8?q?=E2=80=94=20any=20animation,=20full=20quality?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When asked for specific effects, execute exactly as requested at the
same standard. No effect is off-limits across CSS/JS/Canvas/WebGL/SVG.
Vague requests get a bold creative choice.

https://claude.ai/code/session_017ggBPbki5bwiHpFnqpSZ5U
---
 CLAUDE.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CLAUDE.md b/CLAUDE.md
index 401ac77..68be100 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -19,6 +19,10 @@ Bar: Awwwards SOTD. Not good. Stunning. If it wouldn't win, keep going.
 
 Warm Editorial · Dark OLED Luxury · Cyberpunk · Aurora Glass · Swiss Minimalism · Brutalism · Block Maximalism · Retro-Futuristic · Organic Biomorphic · Editorial · Glassmorphism · Solarpunk
 
+## Custom Effects
+
+When asked for a specific animation or effect — build it exactly as requested, at full quality. No effect is off-limits. If it can be done in CSS, JS, Canvas, WebGL, SVG, or Three.js — execute it. Match the same standard: intentional, smooth, polished. If the request is vague, make a creative choice and go bold.
+
 ## Effects — Creative Inspiration (pick what fits, not all)
 
 **Scroll & Motion:** Lenis smooth scroll · scroll-triggered reveals (fade/rise/clip/scale) · parallax depth layers · pinned narratives · horizontal scroll · staggered word/letter reveals · number counters · progress bar

From 4f4cdea85aefeeff29cf490d5502fc7ae95a1035 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 20 Apr 2026 16:16:54 +0000
Subject: [PATCH 12/12] =?UTF-8?q?Start=20building=20immediately=20?=
 =?UTF-8?q?=E2=80=94=20no=20asking=20for=20repos=20or=20style=20preference?=
 =?UTF-8?q?s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When asked for UI, pick an aesthetic and go. Vague requests = creative
freedom. Never stall with clarifying questions.

https://claude.ai/code/session_017ggBPbki5bwiHpFnqpSZ5U
---
 CLAUDE.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CLAUDE.md b/CLAUDE.md
index 68be100..c60f79c 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -2,6 +2,8 @@
 
 Bar: Awwwards SOTD. Not good. Stunning. If it wouldn't win, keep going.
 
+**When asked to build any UI — start immediately.** Pick an aesthetic, make bold creative decisions, and build. Never ask "do you have a repo?" or "what style do you want?" unless the task requires existing code. If the request is vague, that's creative freedom — use it.
+
 ## Strict Rules
 
 **NEVER:** white/gray flat bg · system fonts without intent · static elements that could animate · generic card defaults · buttons with no hover · elements that just appear · pure #fff/#000 · hardcoded hex