oh-my-opencode 4.9.2 → 4.11.0

package/packages/omo-codex/plugin/skills/frontend/references/design/design-system-architecture.md

@@ -0,0 +1,217 @@
+---
+name: design-system-architecture
+description: "Mandatory reference for the Design System Gate. Defines DESIGN.md structure, creation workflow, validation rules, and memory management. Loaded automatically when the agent needs to create or update a project's design system."
+---
+
+# Design System Architecture
+
+Every frontend project MUST have a `DESIGN.md` at its root. This file is the single source of truth for all visual decisions. No component is written without reading it first.
+
+## When to Create
+
+- **New project**: Create `DESIGN.md` during initial setup, before any UI component.
+- **Existing project without one**: Extract the design system from existing code before continuing work.
+- **Existing project with one**: Read it. Follow it. Update it only when a genuinely new pattern emerges.
+
+## DESIGN.md Structure
+
+The file has 7 sections. Every section is mandatory. Skip nothing.
+
+```markdown
+# [Project Name] Design System
+
+## 1. Atmosphere & Identity
+
+One paragraph. What this product FEELS like. Not what it does — how it feels to use.
+Name the signature — the one visual idea that makes this product recognizable.
+
+Example: "A quiet command center. Dense when needed, spacious when not.
+The signature is muted depth — surfaces separated by subtle tonal shifts
+rather than borders, creating layers you feel more than see."
+
+## 2. Color
+
+### Palette
+
+| Role | Token | Light | Dark | Usage |
+|------|-------|-------|------|-------|
+| Surface/primary | --surface-primary | #FFFFFF | #0A0A0A | Main background |
+| Surface/secondary | --surface-secondary | #F8F8F8 | #141414 | Cards, panels |
+| Surface/elevated | --surface-elevated | #FFFFFF | #1A1A1A | Modals, popovers |
+| Text/primary | --text-primary | #0A0A0A | #FAFAFA | Headlines, body |
+| Text/secondary | --text-secondary | #6B6B6B | #A0A0A0 | Captions, hints |
+| Text/tertiary | --text-tertiary | #9B9B9B | #666666 | Disabled, muted |
+| Border/default | --border-default | #E5E5E5 | #2A2A2A | Dividers, outlines |
+| Border/subtle | --border-subtle | #F0F0F0 | #1E1E1E | Soft separations |
+| Accent/primary | --accent-primary | #2563EB | #3B82F6 | CTAs, links, focus |
+| Accent/hover | --accent-hover | #1D4ED8 | #60A5FA | Hover state |
+| Status/success | --status-success | #16A34A | #22C55E | Confirmations |
+| Status/warning | --status-warning | #D97706 | #F59E0B | Cautions |
+| Status/error | --status-error | #DC2626 | #EF4444 | Errors, destructive |
+| Status/info | --status-info | #2563EB | #3B82F6 | Informational |
+
+### Rules
+- Surface hierarchy creates depth without shadows or borders where possible.
+- Accent is used ONLY for interactive elements. Never decorative.
+- Never introduce a color not in this table. Extend the table first.
+
+## 3. Typography
+
+### Scale
+
+| Level | Size | Weight | Line Height | Tracking | Usage |
+|-------|------|--------|-------------|----------|-------|
+| Display | 48px / 3rem | 700 | 1.1 | -0.02em | Hero, page title |
+| H1 | 36px / 2.25rem | 700 | 1.2 | -0.015em | Section headers |
+| H2 | 28px / 1.75rem | 600 | 1.3 | -0.01em | Subsection headers |
+| H3 | 22px / 1.375rem | 600 | 1.4 | 0 | Card titles |
+| Body/lg | 18px / 1.125rem | 400 | 1.6 | 0 | Lead paragraphs |
+| Body | 16px / 1rem | 400 | 1.6 | 0 | Default text |
+| Body/sm | 14px / 0.875rem | 400 | 1.5 | 0 | Secondary info |
+| Caption | 12px / 0.75rem | 500 | 1.4 | 0.02em | Labels, metadata |
+| Overline | 11px / 0.6875rem | 600 | 1.3 | 0.08em | Section labels, uppercase |
+
+### Font Stack
+- Primary: [specify — e.g. "Inter, system-ui, -apple-system, sans-serif"]
+- Mono: [specify — e.g. "JetBrains Mono, Fira Code, monospace"]
+- Serif (if used): [specify]
+
+### Rules
+- Max 2 font families per project. 3 only with explicit justification.
+- Body text never below 14px.
+- Headings that wrap to 4+ lines are too large — use clamp().
+
+## 4. Spacing & Layout
+
+### Base Unit
+All spacing derives from a base of **4px**.
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| --space-1 | 4px | Tight: icon-to-label |
+| --space-2 | 8px | Compact: list items, inline groups |
+| --space-3 | 12px | Default: form field padding |
+| --space-4 | 16px | Standard: card padding, input height context |
+| --space-5 | 20px | Comfortable: section inner spacing |
+| --space-6 | 24px | Generous: card padding (default) |
+| --space-8 | 32px | Separated: between card groups |
+| --space-10 | 40px | Sections within a page |
+| --space-12 | 48px | Major section breaks |
+| --space-16 | 64px | Page-level vertical rhythm |
+| --space-20 | 80px | Hero spacing |
+| --space-24 | 96px | Maximum section separation |
+
+### Grid
+- Max content width: [specify — e.g. 1280px]
+- Column system: [specify — e.g. "12-column, 24px gutter, 16px margin at mobile"]
+- Breakpoints: sm 640px, md 768px, lg 1024px, xl 1280px, 2xl 1536px
+
+### Rules
+- No magic numbers. Every spacing value maps to a token.
+- Asymmetric spacing is intentional, not accidental — document why.
+
+## 5. Components
+
+Document reusable patterns as they emerge. Format:
+
+### [Component Name]
+- **Structure**: HTML/JSX outline
+- **Variants**: list
+- **Spacing**: which tokens
+- **States**: default, hover, active, focus, disabled, loading, error
+- **Accessibility**: keyboard, ARIA, contrast
+- **Motion**: entry/exit animations
+
+Start with components used 2+ times. Do not pre-document components
+that don't exist yet.
+
+## 6. Motion & Interaction
+
+### Timing
+
+| Type | Duration | Easing | Usage |
+|------|----------|--------|-------|
+| Micro | 100-150ms | ease-out | Button press, toggle |
+| Standard | 200-300ms | ease-in-out | Panel open, tab switch |
+| Emphasis | 400-600ms | cubic-bezier(0.16, 1, 0.3, 1) | Page transition, hero entry |
+| Scroll-driven | tied to scroll | linear | Parallax, progress, reveal |
+
+### Rules
+- Only animate `transform` and `opacity`. Never animate layout properties.
+- Every interactive element has hover + active + focus states.
+- Scroll-triggered animations use `IntersectionObserver`, not scroll listeners.
+- Reduced motion: respect `prefers-reduced-motion` — disable non-essential animation.
+
+## 7. Depth & Surface
+
+### Strategy
+Choose ONE and commit: [borders-only | shadows | tonal-shift | mixed]
+
+If shadows:
+| Level | Value | Usage |
+|-------|-------|-------|
+| Subtle | 0 1px 2px rgba(0,0,0,0.04) | Cards at rest |
+| Default | 0 2px 8px rgba(0,0,0,0.08) | Elevated cards, dropdowns |
+| Prominent | 0 8px 24px rgba(0,0,0,0.12) | Modals, popovers |
+
+If borders:
+| Type | Value | Usage |
+|------|-------|-------|
+| Default | 1px solid var(--border-default) | Cards, dividers |
+| Subtle | 1px solid var(--border-subtle) | Soft separations |
+
+If tonal-shift:
+Surfaces use progressively lighter/darker shades. No borders, no shadows.
+```
+
+## Creation Workflow
+
+### For New Projects
+
+1. **Ask or infer the product domain** — SaaS dashboard? Marketing site? Dev tool?
+2. **Write the Atmosphere paragraph** — one chance to establish identity.
+3. **Define palette** — derive from atmosphere. Not random. Not generic.
+4. **Set typography** — match the atmosphere. Editorial = serif. Technical = mono-heavy. Clean = geometric sans.
+5. **Lock spacing** — base-4 system. Customize only the section-level values.
+6. **Document initial components** — only those you are about to build.
+7. **Choose depth strategy** — one. Not "a mix."
+8. **Write it to `DESIGN.md`** at project root.
+
+### For Existing Projects (Extraction)
+
+1. **Read all CSS/styling files** — find the actual tokens in use.
+2. **Identify the implicit system** — what colors, fonts, spacing values repeat?
+3. **Codify it** — write the `DESIGN.md` reflecting what EXISTS, not what you wish existed.
+4. **Flag inconsistencies** — note where the code deviates from its own patterns.
+5. **Propose consolidation** — but do not apply it until approved.
+
+## Validation Rules
+
+After every component implementation, check:
+
+- [ ] All colors reference tokens from Section 2. No raw hex outside `DESIGN.md`.
+- [ ] All font sizes match Section 3 scale. No arbitrary sizes.
+- [ ] All spacing values are multiples of `--space-1` (4px). No magic numbers.
+- [ ] Interactive elements have all required states from Section 6.
+- [ ] Depth treatment matches the chosen strategy from Section 7.
+- [ ] Component reused 2+ times? Documented in Section 5.
+- [ ] Motion follows the timing table. No arbitrary durations.
+
+## Memory Management
+
+### When to UPDATE DESIGN.md
+
+- New reusable component emerges (used 2+ times) → add to Section 5
+- Color added to serve a genuine new semantic role → add to Section 2
+- Spacing token insufficient for a real need → add to Section 4
+- User explicitly changes direction ("make it warmer", "go brutalist")
+
+### When NOT to Update
+
+- One-off styling for a unique section — use inline override, don't pollute the system
+- "I might need this later" — you won't. Add it when you do.
+- Temporary experiment — experiments don't get tokens
+
+### Discipline
+
+The design system that grows every week is dying. The one that holds its size or shrinks is getting sharper. Every addition must justify itself by removing ambiguity, not adding options.

package/packages/omo-codex/plugin/skills/frontend/references/design/elevenlabs.md

@@ -0,0 +1,265 @@
+# Design System Inspired by ElevenLabs
+
+## 1. Visual Theme & Atmosphere
+
+ElevenLabs' website is a study in restrained elegance — a near-white canvas (`#ffffff`, `#f5f5f5`) where typography and subtle shadows do all the heavy lifting. The design feels like a premium audio product brochure: clean, spacious, and confident enough to let the content speak (literally, given ElevenLabs makes voice AI). There's an almost Apple-like quality to the whitespace strategy, but warmer — the occasional warm stone tint (`#f5f2ef`, `#777169`) prevents the purity from feeling clinical.
+
+The typography system is built on a fascinating duality: Waldenburg at weight 300 (light) for display headings creates ethereal, whisper-thin titles that feel like sound waves rendered in type — delicate, precise, and surprisingly impactful at large sizes. This light-weight display approach is the design's signature — where most sites use bold headings to grab attention, ElevenLabs uses lightness to create intrigue. Inter handles all body and UI text with workmanlike reliability, using slight positive letter-spacing (0.14px–0.18px) that gives body text an airy, well-spaced quality. WaldenburgFH appears as a bold uppercase variant for specific button labels.
+
+What makes ElevenLabs distinctive is its multi-layered shadow system. Rather than simple box-shadows, elements use complex stacks: inset border-shadows (`rgba(0,0,0,0.075) 0px 0px 0px 0.5px inset`), outline shadows (`rgba(0,0,0,0.06) 0px 0px 0px 1px`), and soft elevation shadows (`rgba(0,0,0,0.04) 0px 4px 4px`) — all at remarkably low opacities. The result is a design where surfaces seem to barely exist, floating just above the page with the lightest possible touch. Pill-shaped buttons (9999px) with warm-tinted backgrounds (`rgba(245,242,239,0.8)`) and warm shadows (`rgba(78,50,23,0.04)`) add a tactile, physical quality.
+
+**Key Characteristics:**
+- Near-white canvas with warm undertones (`#f5f5f5`, `#f5f2ef`)
+- Waldenburg weight 300 (light) for display — ethereal, whisper-thin headings
+- Inter with positive letter-spacing (0.14–0.18px) for body — airy readability
+- Multi-layered shadow stacks at sub-0.1 opacity — surfaces barely exist
+- Pill buttons (9999px) with warm stone-tinted backgrounds
+- WaldenburgFH bold uppercase for specific CTA labels
+- Warm shadow tints: `rgba(78, 50, 23, 0.04)` — shadows have color, not just darkness
+- Geist Mono / ui-monospace for code snippets
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Pure White** (`#ffffff`): Primary background, card surfaces, button backgrounds
+- **Light Gray** (`#f5f5f5`): Secondary surface, subtle section differentiation
+- **Warm Stone** (`#f5f2ef`): Button background (at 80% opacity) — the warm signature
+- **Black** (`#000000`): Primary text, headings, dark buttons
+
+### Neutral Scale
+- **Dark Gray** (`#4e4e4e`): Secondary text, descriptions
+- **Warm Gray** (`#777169`): Tertiary text, muted links, decorative underlines
+- **Near White** (`#f6f6f6`): Alternate light surface
+
+### Interactive
+- **Grid Cyan** (`#7fffff`): `--grid-column-bg`, at 25% opacity — decorative grid overlay
+- **Ring Blue** (`rgb(147 197 253 / 0.5)`): `--tw-ring-color`, focus ring
+- **Border Light** (`#e5e5e5`): Explicit borders
+- **Border Subtle** (`rgba(0, 0, 0, 0.05)`): Ultra-subtle bottom borders
+
+### Shadows
+- **Inset Border** (`rgba(0,0,0,0.075) 0px 0px 0px 0.5px inset`): Internal edge definition
+- **Inset Dark** (`rgba(0,0,0,0.1) 0px 0px 0px 0.5px inset`): Stronger inset variant
+- **Outline Ring** (`rgba(0,0,0,0.06) 0px 0px 0px 1px`): Shadow-as-border
+- **Soft Elevation** (`rgba(0,0,0,0.04) 0px 4px 4px`): Gentle lift
+- **Card Shadow** (`rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px`): Button/card elevation
+- **Warm Shadow** (`rgba(78,50,23,0.04) 0px 6px 16px`): Warm-tinted button shadow
+- **Edge Shadow** (`rgba(0,0,0,0.08) 0px 0px 0px 0.5px`): Subtle edge definition
+- **Inset Ring** (`rgba(0,0,0,0.1) 0px 0px 0px 1px inset`): Strong inset border
+
+## 3. Typography Rules
+
+### Font Families
+- **Display**: `Waldenburg`, fallback: `Waldenburg Fallback`
+- **Display Bold**: `WaldenburgFH`, fallback: `WaldenburgFH Fallback`
+- **Body / UI**: `Inter`, fallback: `Inter Fallback`
+- **Monospace**: `Geist Mono` or `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | Waldenburg | 48px (3.00rem) | 300 | 1.08 (tight) | -0.96px | Whisper-thin, ethereal |
+| Section Heading | Waldenburg | 36px (2.25rem) | 300 | 1.17 (tight) | normal | Light display |
+| Card Heading | Waldenburg | 32px (2.00rem) | 300 | 1.13 (tight) | normal | Light card titles |
+| Body Large | Inter | 20px (1.25rem) | 400 | 1.35 | normal | Introductions |
+| Body | Inter | 18px (1.13rem) | 400 | 1.44–1.60 | 0.18px | Standard reading text |
+| Body Standard | Inter | 16px (1.00rem) | 400 | 1.50 | 0.16px | UI text |
+| Body Medium | Inter | 16px (1.00rem) | 500 | 1.50 | 0.16px | Emphasized body |
+| Nav / UI | Inter | 15px (0.94rem) | 500 | 1.33–1.47 | 0.15px | Navigation links |
+| Button | Inter | 15px (0.94rem) | 500 | 1.47 | normal | Button labels |
+| Button Uppercase | WaldenburgFH | 14px (0.88rem) | 700 | 1.10 (tight) | 0.7px | `text-transform: uppercase` |
+| Caption | Inter | 14px (0.88rem) | 400–500 | 1.43–1.50 | 0.14px | Metadata |
+| Small | Inter | 13px (0.81rem) | 500 | 1.38 | normal | Tags, badges |
+| Code | Geist Mono | 13px (0.81rem) | 400 | 1.85 (relaxed) | normal | Code blocks |
+| Micro | Inter | 12px (0.75rem) | 500 | 1.33 | normal | Tiny labels |
+| Tiny | Inter | 10px (0.63rem) | 400 | 1.60 (relaxed) | normal | Fine print |
+
+### Principles
+- **Light as the hero weight**: Waldenburg at 300 is the defining typographic choice. Where other design systems use bold for impact, ElevenLabs uses lightness — thin strokes that feel like audio waveforms, creating intrigue through restraint.
+- **Positive letter-spacing on body**: Inter uses +0.14px to +0.18px tracking across body text, creating an airy, well-spaced reading rhythm that contrasts with the tight display tracking (-0.96px).
+- **WaldenburgFH for emphasis**: A bold (700) uppercase variant of Waldenburg appears only in specific CTA button labels with 0.7px letter-spacing — the one place where the type system gets loud.
+- **Monospace as ambient**: Geist Mono at relaxed line-height (1.85) for code blocks feels unhurried and readable.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Black Pill**
+- Background: `#000000`
+- Text: `#ffffff`
+- Padding: 0px 14px
+- Radius: 9999px (full pill)
+- Use: Primary CTA
+
+**White Pill (Shadow-bordered)**
+- Background: `#ffffff`
+- Text: `#000000`
+- Radius: 9999px
+- Shadow: `rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px`
+- Use: Secondary CTA on white
+
+**Warm Stone Pill**
+- Background: `rgba(245, 242, 239, 0.8)` (warm translucent)
+- Text: `#000000`
+- Padding: 12px 20px 12px 14px (asymmetric)
+- Radius: 30px
+- Shadow: `rgba(78, 50, 23, 0.04) 0px 6px 16px` (warm-tinted)
+- Use: Featured CTA, hero action — the signature warm button
+
+**Uppercase Waldenburg Button**
+- Font: WaldenburgFH 14px weight 700
+- Text-transform: uppercase
+- Letter-spacing: 0.7px
+- Use: Specific bold CTA labels
+
+### Cards & Containers
+- Background: `#ffffff`
+- Border: `1px solid #e5e5e5` or shadow-as-border
+- Radius: 16px–24px
+- Shadow: multi-layer stack (inset + outline + elevation)
+- Content: product screenshots, code examples, audio waveform previews
+
+### Inputs & Forms
+- Textarea: padding 12px 20px, transparent text at default
+- Select: white background, standard styling
+- Radio: standard with tw-ring focus
+- Focus: `var(--tw-ring-offset-shadow)` ring system
+
+### Navigation
+- Clean white sticky header
+- Inter 15px weight 500 for nav links
+- Pill CTAs right-aligned (black primary, white secondary)
+- Mobile: hamburger collapse at 1024px
+
+### Image Treatment
+- Product screenshots and audio waveform visualizations
+- Warm gradient backgrounds in feature sections
+- 20px–24px radius on image containers
+- Full-width sections alternating white and light gray
+
+### Distinctive Components
+
+**Audio Waveform Sections**
+- Colorful gradient backgrounds showcasing voice AI capabilities
+- Warm amber, blue, and green gradients behind product demos
+- Screenshots of the ElevenLabs product interface
+
+**Warm Stone CTA Block**
+- `rgba(245,242,239,0.8)` background with warm shadow
+- Asymmetric padding (more right padding)
+- Creates a physical, tactile quality unique to ElevenLabs
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 1px, 3px, 4px, 8px, 9px, 10px, 11px, 12px, 16px, 18px, 20px, 24px, 28px, 32px, 40px
+
+### Grid & Container
+- Centered content with generous max-width
+- Single-column hero, expanding to feature grids
+- Full-width gradient sections for product showcases
+- White card grids on light gray backgrounds
+
+### Whitespace Philosophy
+- **Apple-like generosity**: Massive vertical spacing between sections creates a premium, unhurried pace. Each section is an exhibit.
+- **Warm emptiness**: The whitespace isn't cold — the warm stone undertones and warm shadows give empty space a tactile, physical quality.
+- **Typography-led rhythm**: The light-weight Waldenburg headings create visual "whispers" that draw the eye through vast white space.
+
+### Border Radius Scale
+- Minimal (2px): Small links, inline elements
+- Subtle (4px): Nav items, tab panels, tags
+- Standard (8px): Small containers
+- Comfortable (10px–12px): Medium cards, dropdowns
+- Card (16px): Standard cards, articles
+- Large (18px–20px): Featured cards, code panels
+- Section (24px): Large panels, section containers
+- Warm Button (30px): Warm stone CTA
+- Pill (9999px): Primary buttons, navigation pills
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Page background, text blocks |
+| Inset Edge (Level 0.5) | `rgba(0,0,0,0.075) 0px 0px 0px 0.5px inset, #fff 0px 0px 0px 0px inset` | Internal border definition |
+| Outline Ring (Level 1) | `rgba(0,0,0,0.06) 0px 0px 0px 1px` + `rgba(0,0,0,0.04) 0px 1px 2px` + `rgba(0,0,0,0.04) 0px 2px 4px` | Shadow-as-border for cards |
+| Card (Level 2) | `rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px` | Button elevation, prominent cards |
+| Warm Lift (Level 3) | `rgba(78,50,23,0.04) 0px 6px 16px` | Featured CTAs — warm-tinted |
+| Focus (Accessibility) | `var(--tw-ring-offset-shadow)` blue ring | Keyboard focus |
+
+**Shadow Philosophy**: ElevenLabs uses the most refined shadow system of any design system analyzed. Every shadow is at sub-0.1 opacity, many include both outward cast AND inward inset components, and the warm CTA shadows use an actual warm color (`rgba(78,50,23,...)`) rather than neutral black. The inset half-pixel borders (`0px 0px 0px 0.5px inset`) create edges so subtle they're felt rather than seen — surfaces define themselves through the lightest possible touch.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Waldenburg weight 300 for all display headings — the lightness IS the brand
+- Apply multi-layer shadows (inset + outline + elevation) at sub-0.1 opacity
+- Use warm stone tints (`#f5f2ef`, `rgba(245,242,239,0.8)`) for featured elements
+- Apply positive letter-spacing (+0.14px to +0.18px) on Inter body text
+- Use 9999px radius for primary buttons — pill shape is standard
+- Use warm-tinted shadows (`rgba(78,50,23,0.04)`) on featured CTAs
+- Keep the page predominantly white with subtle gray section differentiation
+- Use WaldenburgFH bold uppercase ONLY for specific CTA button labels
+
+### Don't
+- Don't use bold (700) Waldenburg for headings — weight 300 is non-negotiable
+- Don't use heavy shadows (>0.1 opacity) — the ethereal quality requires whisper-level depth
+- Don't use cool gray borders — the system is warm-tinted throughout
+- Don't skip the inset shadow component — half-pixel inset borders define edges
+- Don't apply negative letter-spacing to body text — Inter uses positive tracking
+- Don't use sharp corners (<8px) on cards — the generous radius is structural
+- Don't introduce brand colors — the palette is intentionally achromatic with warm undertones
+- Don't make buttons opaque and heavy — the warm translucent stone treatment is the signature
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <1024px | Single column, hamburger nav, stacked sections |
+| Desktop | >1024px | Full layout, horizontal nav, multi-column grids |
+
+### Touch Targets
+- Pill buttons with generous padding (12px–20px)
+- Navigation links at 15px with adequate spacing
+- Select dropdowns maintain comfortable sizing
+
+### Collapsing Strategy
+- Navigation: horizontal → hamburger at 1024px
+- Feature grids: multi-column → stacked
+- Hero: maintains centered layout, font scales proportionally
+- Gradient sections: full-width maintained, content stacks
+- Spacing compresses proportionally
+
+### Image Behavior
+- Product screenshots scale responsively
+- Gradient backgrounds simplify on mobile
+- Audio waveform previews maintain aspect ratio
+- Rounded corners maintained across breakpoints
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Background: Pure White (`#ffffff`) or Light Gray (`#f5f5f5`)
+- Text: Black (`#000000`)
+- Secondary text: Dark Gray (`#4e4e4e`)
+- Muted text: Warm Gray (`#777169`)
+- Warm surface: Warm Stone (`rgba(245, 242, 239, 0.8)`)
+- Border: `#e5e5e5` or `rgba(0,0,0,0.05)`
+
+### Example Component Prompts
+- "Create a hero on white background. Headline at 48px Waldenburg weight 300, line-height 1.08, letter-spacing -0.96px, black text. Subtitle at 18px Inter weight 400, line-height 1.60, letter-spacing 0.18px, #4e4e4e text. Two pill buttons: black (9999px, 0px 14px padding) and warm stone (rgba(245,242,239,0.8), 30px radius, 12px 20px padding, warm shadow rgba(78,50,23,0.04) 0px 6px 16px)."
+- "Design a card: white background, 20px radius. Shadow: rgba(0,0,0,0.06) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 1px 2px, rgba(0,0,0,0.04) 0px 2px 4px. Title at 32px Waldenburg weight 300, body at 16px Inter weight 400 letter-spacing 0.16px, #4e4e4e."
+- "Build a white pill button: white bg, 9999px radius. Shadow: rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px. Text at 15px Inter weight 500."
+- "Create an uppercase CTA label: 14px WaldenburgFH weight 700, text-transform uppercase, letter-spacing 0.7px."
+- "Design navigation: white sticky header. Inter 15px weight 500. Black pill CTA right-aligned. Border-bottom: rgba(0,0,0,0.05)."
+
+### Iteration Guide
+1. Start with white — the warm undertone comes from shadows and stone surfaces, not backgrounds
+2. Waldenburg 300 for headings — never bold, the lightness is the identity
+3. Multi-layer shadows: always include inset + outline + elevation at sub-0.1 opacity
+4. Positive letter-spacing on Inter body (+0.14px to +0.18px) — the airy reading quality
+5. Warm stone CTA is the signature — `rgba(245,242,239,0.8)` with `rgba(78,50,23,0.04)` shadow
+6. Pill (9999px) for buttons, generous radius (16px–24px) for cards