@w3kits-com/plugin-opendesign 0.1.8 → 0.1.9

package/dist/__w3kits/assets/design-systems/claude/DESIGN.md

@@ -0,0 +1,315 @@
+# Design System Inspired by Claude (Anthropic)
+
+> Category: AI & LLM
+> Anthropic's AI assistant. Warm terracotta accent, clean editorial layout.
+
+## 1. Visual Theme & Atmosphere
+
+Claude's interface is a literary salon reimagined as a product page — warm, unhurried, and quietly intellectual. The entire experience is built on a parchment-toned canvas (`#f5f4ed`) that deliberately evokes the feeling of high-quality paper rather than a digital surface. Where most AI product pages lean into cold, futuristic aesthetics, Claude's design radiates human warmth, as if the AI itself has good taste in interior design.
+
+The signature move is the custom Anthropic Serif typeface — a medium-weight serif with generous proportions that gives every headline the gravitas of a book title. Combined with organic, hand-drawn-feeling illustrations in terracotta (`#c96442`), black, and muted green, the visual language says "thoughtful companion" rather than "powerful tool." The serif headlines breathe at tight-but-comfortable line-heights (1.10–1.30), creating a cadence that feels more like reading an essay than scanning a product page.
+
+What makes Claude's design truly distinctive is its warm neutral palette. Every gray has a yellow-brown undertone (`#5e5d59`, `#87867f`, `#4d4c48`) — there are no cool blue-grays anywhere. Borders are cream-tinted (`#f0eee6`, `#e8e6dc`), shadows use warm transparent blacks, and even the darkest surfaces (`#141413`, `#30302e`) carry a barely perceptible olive warmth. This chromatic consistency creates a space that feels lived-in and trustworthy.
+
+**Key Characteristics:**
+- Warm parchment canvas (`#f5f4ed`) evoking premium paper, not screens
+- Custom Anthropic type family: Serif for headlines, Sans for UI, Mono for code
+- Terracotta brand accent (`#c96442`) — warm, earthy, deliberately un-tech
+- Exclusively warm-toned neutrals — every gray has a yellow-brown undertone
+- Organic, editorial illustrations replacing typical tech iconography
+- Ring-based shadow system (`0px 0px 0px 1px`) creating border-like depth without visible borders
+- Magazine-like pacing with generous section spacing and serif-driven hierarchy
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Anthropic Near Black** (`#141413`): The primary text color and dark-theme surface — not pure black but a warm, almost olive-tinted dark that's gentler on the eyes. The warmest "black" in any major tech brand.
+- **Terracotta Brand** (`#c96442`): The core brand color — a burnt orange-brown used for primary CTA buttons, brand moments, and the signature accent. Deliberately earthy and un-tech.
+- **Coral Accent** (`#d97757`): A lighter, warmer variant of the brand color used for text accents, links on dark surfaces, and secondary emphasis.
+
+### Secondary & Accent
+- **Error Crimson** (`#b53333`): A deep, warm red for error states — serious without being alarming.
+- **Focus Blue** (`#3898ec`): Standard blue for input focus rings — the only cool color in the entire system, used purely for accessibility.
+
+### Surface & Background
+- **Parchment** (`#f5f4ed`): The primary page background — a warm cream with a yellow-green tint that feels like aged paper. The emotional foundation of the entire design.
+- **Ivory** (`#faf9f5`): The lightest surface — used for cards and elevated containers on the Parchment background. Barely distinguishable but creates subtle layering.
+- **Pure White** (`#ffffff`): Reserved for specific button surfaces and maximum-contrast elements.
+- **Warm Sand** (`#e8e6dc`): Button backgrounds and prominent interactive surfaces — a noticeably warm light gray.
+- **Dark Surface** (`#30302e`): Dark-theme containers, nav borders, and elevated dark elements — warm charcoal.
+- **Deep Dark** (`#141413`): Dark-theme page background and primary dark surface.
+
+### Neutrals & Text
+- **Charcoal Warm** (`#4d4c48`): Button text on light warm surfaces — the go-to dark-on-light text.
+- **Olive Gray** (`#5e5d59`): Secondary body text — a distinctly warm medium-dark gray.
+- **Stone Gray** (`#87867f`): Tertiary text, footnotes, and de-emphasized metadata.
+- **Dark Warm** (`#3d3d3a`): Dark text links and emphasized secondary text.
+- **Warm Silver** (`#b0aea5`): Text on dark surfaces — a warm, parchment-tinted light gray.
+
+### Semantic & Accent
+- **Border Cream** (`#f0eee6`): Standard light-theme border — barely visible warm cream, creating the gentlest possible containment.
+- **Border Warm** (`#e8e6dc`): Prominent borders, section dividers, and emphasized containment on light surfaces.
+- **Border Dark** (`#30302e`): Standard border on dark surfaces — maintains the warm tone.
+- **Ring Warm** (`#d1cfc5`): Shadow ring color for button hover/focus states.
+- **Ring Subtle** (`#dedc01`): Secondary ring variant for lighter interactive surfaces.
+- **Ring Deep** (`#c2c0b6`): Deeper ring for active/pressed states.
+
+### Gradient System
+- Claude's design is **gradient-free** in the traditional sense. Depth and visual richness come from the interplay of warm surface tones, organic illustrations, and light/dark section alternation. The warm palette itself creates a "gradient" effect as the eye moves through cream → sand → stone → charcoal → black sections.
+
+## 3. Typography Rules
+
+### Font Family
+- **Headline**: `Anthropic Serif`, with fallback: `Georgia`
+- **Body / UI**: `Anthropic Sans`, with fallback: `Arial`
+- **Code**: `Anthropic Mono`, with fallback: `Arial`
+
+*Note: These are custom typefaces. For external implementations, Georgia serves as the serif substitute and system-ui/Inter as the sans substitute.*
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display / Hero | Anthropic Serif | 64px (4rem) | 500 | 1.10 (tight) | normal | Maximum impact, book-title presence |
+| Section Heading | Anthropic Serif | 52px (3.25rem) | 500 | 1.20 (tight) | normal | Feature section anchors |
+| Sub-heading Large | Anthropic Serif | 36–36.8px (~2.3rem) | 500 | 1.30 | normal | Secondary section markers |
+| Sub-heading | Anthropic Serif | 32px (2rem) | 500 | 1.10 (tight) | normal | Card titles, feature names |
+| Sub-heading Small | Anthropic Serif | 25–25.6px (~1.6rem) | 500 | 1.20 | normal | Smaller section titles |
+| Feature Title | Anthropic Serif | 20.8px (1.3rem) | 500 | 1.20 | normal | Small feature headings |
+| Body Serif | Anthropic Serif | 17px (1.06rem) | 400 | 1.60 (relaxed) | normal | Serif body text (editorial passages) |
+| Body Large | Anthropic Sans | 20px (1.25rem) | 400 | 1.60 (relaxed) | normal | Intro paragraphs |
+| Body / Nav | Anthropic Sans | 17px (1.06rem) | 400–500 | 1.00–1.60 | normal | Navigation links, UI text |
+| Body Standard | Anthropic Sans | 16px (1rem) | 400–500 | 1.25–1.60 | normal | Standard body, button text |
+| Body Small | Anthropic Sans | 15px (0.94rem) | 400–500 | 1.00–1.60 | normal | Compact body text |
+| Caption | Anthropic Sans | 14px (0.88rem) | 400 | 1.43 | normal | Metadata, descriptions |
+| Label | Anthropic Sans | 12px (0.75rem) | 400–500 | 1.25–1.60 | 0.12px | Badges, small labels |
+| Overline | Anthropic Sans | 10px (0.63rem) | 400 | 1.60 | 0.5px | Uppercase overline labels |
+| Micro | Anthropic Sans | 9.6px (0.6rem) | 400 | 1.60 | 0.096px | Smallest text |
+| Code | Anthropic Mono | 15px (0.94rem) | 400 | 1.60 | -0.32px | Inline code, terminal |
+
+### Principles
+- **Serif for authority, sans for utility**: Anthropic Serif carries all headline content with medium weight (500), giving every heading the gravitas of a published title. Anthropic Sans handles all functional UI text — buttons, labels, navigation — with quiet efficiency.
+- **Single weight for serifs**: All Anthropic Serif headings use weight 500 — no bold, no light. This creates a consistent "voice" across all headline sizes, as if the same author wrote every heading.
+- **Relaxed body line-height**: Most body text uses 1.60 line-height — significantly more generous than typical tech sites (1.4–1.5). This creates a reading experience closer to a book than a dashboard.
+- **Tight-but-not-compressed headings**: Line-heights of 1.10–1.30 for headings are tight but never claustrophobic. The serif letterforms need breathing room that sans-serif fonts don't.
+- **Micro letter-spacing on labels**: Small sans text (12px and below) uses deliberate letter-spacing (0.12px–0.5px) to maintain readability at tiny sizes.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Warm Sand (Secondary)**
+- Background: Warm Sand (`#e8e6dc`)
+- Text: Charcoal Warm (`#4d4c48`)
+- Padding: 0px 12px 0px 8px (asymmetric — icon-first layout)
+- Radius: comfortably rounded (8px)
+- Shadow: ring-based (`#e8e6dc 0px 0px 0px 0px, #d1cfc5 0px 0px 0px 1px`)
+- The workhorse button — warm, unassuming, clearly interactive
+
+**White Surface**
+- Background: Pure White (`#ffffff`)
+- Text: Anthropic Near Black (`#141413`)
+- Padding: 8px 16px 8px 12px
+- Radius: generously rounded (12px)
+- Hover: shifts to secondary background color
+- Clean, elevated button for light surfaces
+
+**Dark Charcoal**
+- Background: Dark Surface (`#30302e`)
+- Text: Ivory (`#faf9f5`)
+- Padding: 0px 12px 0px 8px
+- Radius: comfortably rounded (8px)
+- Shadow: ring-based (`#30302e 0px 0px 0px 0px, ring 0px 0px 0px 1px`)
+- The inverted variant for dark-on-light emphasis
+
+**Brand Terracotta**
+- Background: Terracotta Brand (`#c96442`)
+- Text: Ivory (`#faf9f5`)
+- Radius: 8–12px
+- Shadow: ring-based (`#c96442 0px 0px 0px 0px, #c96442 0px 0px 0px 1px`)
+- The primary CTA — the only button with chromatic color
+
+**Dark Primary**
+- Background: Anthropic Near Black (`#141413`)
+- Text: Warm Silver (`#b0aea5`)
+- Padding: 9.6px 16.8px
+- Radius: generously rounded (12px)
+- Border: thin solid Dark Surface (`1px solid #30302e`)
+- Used on dark theme surfaces
+
+### Cards & Containers
+- Background: Ivory (`#faf9f5`) or Pure White (`#ffffff`) on light surfaces; Dark Surface (`#30302e`) on dark
+- Border: thin solid Border Cream (`1px solid #f0eee6`) on light; `1px solid #30302e` on dark
+- Radius: comfortably rounded (8px) for standard cards; generously rounded (16px) for featured; very rounded (32px) for hero containers and embedded media
+- Shadow: whisper-soft (`rgba(0,0,0,0.05) 0px 4px 24px`) for elevated content
+- Ring shadow: `0px 0px 0px 1px` patterns for interactive card states
+- Section borders: `1px 0px 0px` (top-only) for list item separators
+
+### Inputs & Forms
+- Text: Anthropic Near Black (`#141413`)
+- Padding: 1.6px 12px (very compact vertical)
+- Border: standard warm borders
+- Focus: ring with Focus Blue (`#3898ec`) border-color — the only cool color moment
+- Radius: generously rounded (12px)
+
+### Navigation
+- Sticky top nav with warm background
+- Logo: Claude wordmark in Anthropic Near Black
+- Links: mix of Near Black (`#141413`), Olive Gray (`#5e5d59`), and Dark Warm (`#3d3d3a`)
+- Nav border: `1px solid #30302e` (dark) or `1px solid #f0eee6` (light)
+- CTA: Terracotta Brand button or White Surface button
+- Hover: text shifts to foreground-primary, no decoration
+
+### Image Treatment
+- Product screenshots showing the Claude chat interface
+- Generous border-radius on media (16–32px)
+- Embedded video players with rounded corners
+- Dark UI screenshots provide contrast against warm light canvas
+- Organic, hand-drawn illustrations for conceptual sections
+
+### Distinctive Components
+
+**Model Comparison Cards**
+- Opus 4.5, Sonnet 4.5, Haiku 4.5 presented in a clean card grid
+- Each model gets a bordered card with name, description, and capability badges
+- Border Warm (`#e8e6dc`) separation between items
+
+**Organic Illustrations**
+- Hand-drawn-feeling vector illustrations in terracotta, black, and muted green
+- Abstract, conceptual rather than literal product diagrams
+- The primary visual personality — no other AI company uses this style
+
+**Dark/Light Section Alternation**
+- The page alternates between Parchment light and Near Black dark sections
+- Creates a reading rhythm like chapters in a book
+- Each section feels like a distinct environment
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 3px, 4px, 6px, 8px, 10px, 12px, 16px, 20px, 24px, 30px
+- Button padding: asymmetric (0px 12px 0px 8px) or balanced (8px 16px)
+- Card internal padding: approximately 24–32px
+- Section vertical spacing: generous (estimated 80–120px between major sections)
+
+### Grid & Container
+- Max container width: approximately 1200px, centered
+- Hero: centered with editorial layout
+- Feature sections: single-column or 2–3 column card grids
+- Model comparison: clean 3-column grid
+- Full-width dark sections breaking the container for emphasis
+
+### Whitespace Philosophy
+- **Editorial pacing**: Each section breathes like a magazine spread — generous top/bottom margins create natural reading pauses.
+- **Serif-driven rhythm**: The serif headings establish a literary cadence that demands more whitespace than sans-serif designs.
+- **Content island approach**: Sections alternate between light and dark environments, creating distinct "rooms" for each message.
+
+### Border Radius Scale
+- Sharp (4px): Minimal inline elements
+- Subtly rounded (6–7.5px): Small buttons, secondary interactive elements
+- Comfortably rounded (8–8.5px): Standard buttons, cards, containers
+- Generously rounded (12px): Primary buttons, input fields, nav elements
+- Very rounded (16px): Featured containers, video players, tab lists
+- Highly rounded (24px): Tag-like elements, highlighted containers
+- Maximum rounded (32px): Hero containers, embedded media, large cards
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow, no border | Parchment background, inline text |
+| Contained (Level 1) | `1px solid #f0eee6` (light) or `1px solid #30302e` (dark) | Standard cards, sections |
+| Ring (Level 2) | `0px 0px 0px 1px` ring shadows using warm grays | Interactive cards, buttons, hover states |
+| Whisper (Level 3) | `rgba(0,0,0,0.05) 0px 4px 24px` | Elevated feature cards, product screenshots |
+| Inset (Level 4) | `inset 0px 0px 0px 1px` at 15% opacity | Active/pressed button states |
+
+**Shadow Philosophy**: Claude communicates depth through **warm-toned ring shadows** rather than traditional drop shadows. The signature `0px 0px 0px 1px` pattern creates a border-like halo that's softer than an actual border — it's a shadow pretending to be a border, or a border that's technically a shadow. When drop shadows do appear, they're extremely soft (0.05 opacity, 24px blur) — barely visible lifts that suggest floating rather than casting.
+
+### Decorative Depth
+- **Light/Dark alternation**: The most dramatic depth effect comes from alternating between Parchment (`#f5f4ed`) and Near Black (`#141413`) sections — entire sections shift elevation by changing the ambient light level.
+- **Warm ring halos**: Button and card interactions use ring shadows that match the warm palette — never cool-toned or generic gray.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Parchment (`#f5f4ed`) as the primary light background — the warm cream tone IS the Claude personality
+- Use Anthropic Serif at weight 500 for all headlines — the single-weight consistency is intentional
+- Use Terracotta Brand (`#c96442`) only for primary CTAs and the highest-signal brand moments
+- Keep all neutrals warm-toned — every gray should have a yellow-brown undertone
+- Use ring shadows (`0px 0px 0px 1px`) for interactive element states instead of drop shadows
+- Maintain the editorial serif/sans hierarchy — serif for content headlines, sans for UI
+- Use generous body line-height (1.60) for a literary reading experience
+- Alternate between light and dark sections to create chapter-like page rhythm
+- Apply generous border-radius (12–32px) for a soft, approachable feel
+
+### Don't
+- Don't use cool blue-grays anywhere — the palette is exclusively warm-toned
+- Don't use bold (700+) weight on Anthropic Serif — weight 500 is the ceiling for serifs
+- Don't introduce saturated colors beyond Terracotta — the palette is deliberately muted
+- Don't use sharp corners (< 6px radius) on buttons or cards — softness is core to the identity
+- Don't apply heavy drop shadows — depth comes from ring shadows and background color shifts
+- Don't use pure white (`#ffffff`) as a page background — Parchment (`#f5f4ed`) or Ivory (`#faf9f5`) are always warmer
+- Don't use geometric/tech-style illustrations — Claude's illustrations are organic and hand-drawn-feeling
+- Don't reduce body line-height below 1.40 — the generous spacing supports the editorial personality
+- Don't use monospace fonts for non-code content — Anthropic Mono is strictly for code
+- Don't mix in sans-serif for headlines — the serif/sans split is the typographic identity
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Small Mobile | <479px | Minimum layout, stacked everything, compact typography |
+| Mobile | 479–640px | Single column, hamburger nav, reduced heading sizes |
+| Large Mobile | 640–767px | Slightly wider content area |
+| Tablet | 768–991px | 2-column grids begin, condensed nav |
+| Desktop | 992px+ | Full multi-column layout, expanded nav, maximum hero typography (64px) |
+
+### Touch Targets
+- Buttons use generous padding (8–16px vertical minimum)
+- Navigation links adequately spaced for thumb navigation
+- Card surfaces serve as large touch targets
+- Minimum recommended: 44x44px
+
+### Collapsing Strategy
+- **Navigation**: Full horizontal nav collapses to hamburger on mobile
+- **Feature sections**: Multi-column → stacked single column
+- **Hero text**: 64px → 36px → ~25px progressive scaling
+- **Model cards**: 3-column → stacked vertical
+- **Section padding**: Reduces proportionally but maintains editorial rhythm
+- **Illustrations**: Scale proportionally, maintain aspect ratios
+
+### Image Behavior
+- Product screenshots scale proportionally within rounded containers
+- Illustrations maintain quality at all sizes
+- Video embeds maintain 16:9 aspect ratio with rounded corners
+- No art direction changes between breakpoints
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Brand CTA: "Terracotta Brand (#c96442)"
+- Page Background: "Parchment (#f5f4ed)"
+- Card Surface: "Ivory (#faf9f5)"
+- Primary Text: "Anthropic Near Black (#141413)"
+- Secondary Text: "Olive Gray (#5e5d59)"
+- Tertiary Text: "Stone Gray (#87867f)"
+- Borders (light): "Border Cream (#f0eee6)"
+- Dark Surface: "Dark Surface (#30302e)"
+
+### Example Component Prompts
+- "Create a hero section on Parchment (#f5f4ed) with a headline at 64px Anthropic Serif weight 500, line-height 1.10. Use Anthropic Near Black (#141413) text. Add a subtitle in Olive Gray (#5e5d59) at 20px Anthropic Sans with 1.60 line-height. Place a Terracotta Brand (#c96442) CTA button with Ivory text, 12px radius."
+- "Design a feature card on Ivory (#faf9f5) with a 1px solid Border Cream (#f0eee6) border and comfortably rounded corners (8px). Title in Anthropic Serif at 25px weight 500, description in Olive Gray (#5e5d59) at 16px Anthropic Sans. Add a whisper shadow (rgba(0,0,0,0.05) 0px 4px 24px)."
+- "Build a dark section on Anthropic Near Black (#141413) with Ivory (#faf9f5) headline text in Anthropic Serif at 52px weight 500. Use Warm Silver (#b0aea5) for body text. Borders in Dark Surface (#30302e)."
+- "Create a button in Warm Sand (#e8e6dc) with Charcoal Warm (#4d4c48) text, 8px radius, and a ring shadow (0px 0px 0px 1px #d1cfc5). Padding: 0px 12px 0px 8px."
+- "Design a model comparison grid with three cards on Ivory surfaces. Each card gets a Border Warm (#e8e6dc) top border, model name in Anthropic Serif at 25px, and description in Olive Gray at 15px Anthropic Sans."
+
+### Iteration Guide
+1. Focus on ONE component at a time
+2. Reference specific color names — "use Olive Gray (#5e5d59)" not "make it gray"
+3. Always specify warm-toned variants — no cool grays
+4. Describe serif vs sans usage explicitly — "Anthropic Serif for the heading, Anthropic Sans for the label"
+5. For shadows, use "ring shadow (0px 0px 0px 1px)" or "whisper shadow" — never generic "drop shadow"
+6. Specify the warm background — "on Parchment (#f5f4ed)" or "on Near Black (#141413)"
+7. Keep illustrations organic and conceptual — describe "hand-drawn-feeling" style

package/dist/__w3kits/assets/design-systems/clay/DESIGN.md

@@ -0,0 +1,307 @@
+# Design System Inspired by Clay
+
+> Category: Design & Creative
+> Creative agency. Organic shapes, soft gradients, art-directed layout.
+
+## 1. Visual Theme & Atmosphere
+
+Clay's website is a warm, playful celebration of color that treats B2B data enrichment like a craft rather than an enterprise chore. The design language is built on a foundation of warm cream backgrounds (`#faf9f7`) and oat-toned borders (`#dad4c8`, `#eee9df`) that give every surface the tactile quality of handmade paper. Against this artisanal canvas, a vivid swatch palette explodes with personality — Matcha green, Slushie cyan, Lemon gold, Ube purple, Pomegranate pink, Blueberry navy, and Dragonfruit magenta — each named like flavors at a juice bar, not colors in an enterprise UI kit.
+
+The typography is anchored by Roobert, a geometric sans-serif with character, loaded with an extensive set of OpenType stylistic sets (`"ss01"`, `"ss03"`, `"ss10"`, `"ss11"`, `"ss12"`) that give the text a distinctive, slightly quirky personality. At display scale (80px, weight 600), Roobert uses aggressive negative letter-spacing (-3.2px) that compresses headlines into punchy, billboard-like statements. Space Mono serves as the monospace companion for code and technical labels, completing the craft-meets-tech duality.
+
+What makes Clay truly distinctive is its hover micro-animations: buttons on hover rotate slightly (`rotateZ(-8deg)`), translate upward (`translateY(-80%)`), change background to a contrasting swatch color, and cast a hard offset shadow (`rgb(0,0,0) -7px 7px`). This playful hover behavior — where a button literally tilts and jumps on interaction — creates a sense of physical delight that's rare in B2B software. Combined with generously rounded containers (24px–40px radius), dashed borders alongside solid ones, and a multi-layer shadow system that includes inset highlights, Clay feels like a design system that was made by people who genuinely enjoy making things.
+
+**Key Characteristics:**
+- Warm cream canvas (`#faf9f7`) with oat-toned borders (`#dad4c8`) — artisanal, not clinical
+- Named swatch palette: Matcha, Slushie, Lemon, Ube, Pomegranate, Blueberry, Dragonfruit
+- Roobert font with 5 OpenType stylistic sets — quirky geometric character
+- Playful hover animations: rotateZ(-8deg) + translateY(-80%) + hard offset shadow
+- Space Mono for code and technical labels
+- Generous border radius: 24px cards, 40px sections, 1584px pills
+- Mixed border styles: solid + dashed in the same interface
+- Multi-layer shadow with inset highlight: `0px 1px 1px` + `-1px inset` + `-0.5px`
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Clay Black** (`#000000`): Text, headings, pricing card text, `--_theme--pricing-cards---text`
+- **Pure White** (`#ffffff`): Card backgrounds, button backgrounds, inverse text
+- **Warm Cream** (`#faf9f7`): Page background — the warm, paper-like canvas
+
+### Swatch Palette — Named Colors
+
+**Matcha (Green)**
+- **Matcha 300** (`#84e7a5`): `--_swatches---color--matcha-300`, light green accent
+- **Matcha 600** (`#078a52`): `--_swatches---color--matcha-600`, mid green
+- **Matcha 800** (`#02492a`): `--_swatches---color--matcha-800`, deep green for dark sections
+
+**Slushie (Cyan)**
+- **Slushie 500** (`#3bd3fd`): `--_swatches---color--slushie-500`, bright cyan accent
+- **Slushie 800** (`#0089ad`): `--_swatches---color--slushie-800`, deep teal
+
+**Lemon (Gold)**
+- **Lemon 400** (`#f8cc65`): `--_swatches---color--lemon-400`, warm pale gold
+- **Lemon 500** (`#fbbd41`): `--_swatches---color--lemon-500`, primary gold
+- **Lemon 700** (`#d08a11`): `--_swatches---color--lemon-700`, deep amber
+- **Lemon 800** (`#9d6a09`): `--_swatches---color--lemon-800`, dark amber
+
+**Ube (Purple)**
+- **Ube 300** (`#c1b0ff`): `--_swatches---color--ube-300`, soft lavender
+- **Ube 800** (`#43089f`): `--_swatches---color--ube-800`, deep purple
+- **Ube 900** (`#32037d`): `--_swatches---color--ube-900`, darkest purple
+
+**Pomegranate (Pink/Red)**
+- **Pomegranate 400** (`#fc7981`): `--_swatches---color--pomegranate-400`, warm coral-pink
+
+**Blueberry (Navy Blue)**
+- **Blueberry 800** (`#01418d`): `--_swatches---color--blueberry-800`, deep navy
+
+### Neutral Scale (Warm)
+- **Warm Silver** (`#9f9b93`): Secondary/muted text, footer links
+- **Warm Charcoal** (`#55534e`): Tertiary text, dark muted links
+- **Dark Charcoal** (`#333333`): Link text on light backgrounds
+
+### Surface & Border
+- **Oat Border** (`#dad4c8`): Primary border — warm, cream-toned structural lines
+- **Oat Light** (`#eee9df`): Secondary lighter border
+- **Cool Border** (`#e6e8ec`): Cool-toned border for contrast sections
+- **Dark Border** (`#525a69`): Border on dark sections
+- **Light Frost** (`#eff1f3`): Subtle button background (at 0% opacity on hover)
+
+### Badges
+- **Badge Blue Bg** (`#f0f8ff`): Blue-tinted badge surface
+- **Badge Blue Text** (`#3859f9`): Vivid blue badge text
+- **Focus Ring** (`rgb(20, 110, 245) solid 2px`): Accessibility focus indicator
+
+### Shadows
+- **Clay Shadow** (`rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px`): Multi-layer with inset highlight — the signature
+- **Hard Offset** (`rgb(0,0,0) -7px 7px`): Hover state — playful hard shadow
+
+## 3. Typography Rules
+
+### Font Families
+- **Primary**: `Roobert`, fallback: `Arial`
+- **Monospace**: `Space Mono`
+- **OpenType Features**: `"ss01"`, `"ss03"`, `"ss10"`, `"ss11"`, `"ss12"` on all Roobert text (display uses all 5; body/UI uses `"ss03"`, `"ss10"`, `"ss11"`, `"ss12"`)
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | Roobert | 80px (5.00rem) | 600 | 1.00 (tight) | -3.2px | All 5 stylistic sets |
+| Display Secondary | Roobert | 60px (3.75rem) | 600 | 1.00 (tight) | -2.4px | All 5 stylistic sets |
+| Section Heading | Roobert | 44px (2.75rem) | 600 | 1.10 (tight) | -0.88px to -1.32px | All 5 stylistic sets |
+| Card Heading | Roobert | 32px (2.00rem) | 600 | 1.10 (tight) | -0.64px | All 5 stylistic sets |
+| Feature Title | Roobert | 20px (1.25rem) | 600 | 1.40 | -0.4px | All 5 stylistic sets |
+| Sub-heading | Roobert | 20px (1.25rem) | 500 | 1.50 | -0.16px | 4 stylistic sets (no ss01) |
+| Body Large | Roobert | 20px (1.25rem) | 400 | 1.40 | normal | 4 stylistic sets |
+| Body | Roobert | 18px (1.13rem) | 400 | 1.60 (relaxed) | -0.36px | 4 stylistic sets |
+| Body Standard | Roobert | 16px (1.00rem) | 400 | 1.50 | normal | 4 stylistic sets |
+| Body Medium | Roobert | 16px (1.00rem) | 500 | 1.20–1.40 | -0.16px to -0.32px | 4–5 stylistic sets |
+| Button | Roobert | 16px (1.00rem) | 500 | 1.50 | -0.16px | 4 stylistic sets |
+| Button Large | Roobert | 24px (1.50rem) | 400 | 1.50 | normal | 4 stylistic sets |
+| Button Small | Roobert | 12.8px (0.80rem) | 500 | 1.50 | -0.128px | 4 stylistic sets |
+| Nav Link | Roobert | 15px (0.94rem) | 500 | 1.60 (relaxed) | normal | 4 stylistic sets |
+| Caption | Roobert | 14px (0.88rem) | 400 | 1.50–1.60 | -0.14px | 4 stylistic sets |
+| Small | Roobert | 12px (0.75rem) | 400 | 1.50 | normal | 4 stylistic sets |
+| Uppercase Label | Roobert | 12px (0.75rem) | 600 | 1.20 (tight) | 1.08px | `text-transform: uppercase`, 4 sets |
+| Badge | Roobert | 9.6px | 600 | — | — | Pill badges |
+
+### Principles
+- **Five stylistic sets as identity**: The combination of `"ss01"`, `"ss03"`, `"ss10"`, `"ss11"`, `"ss12"` on Roobert creates a distinctive typographic personality. `ss01` is reserved for headings and emphasis — body text omits it, creating a subtle hierarchy through glyph variation.
+- **Aggressive display compression**: -3.2px at 80px, -2.4px at 60px — the most compressed display tracking alongside the most generous body spacing (1.60 line-height), creating dramatic contrast.
+- **Weight 600 for headings, 500 for UI, 400 for body**: Clean three-tier system where each weight has a strict role.
+- **Uppercase labels with positive tracking**: 12px uppercase at 1.08px letter-spacing creates the systematic wayfinding pattern.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary (Transparent with Hover Animation)**
+- Background: transparent (`rgba(239, 241, 243, 0)`)
+- Text: `#000000`
+- Padding: 6.4px 12.8px
+- Border: none (or `1px solid #717989` for outlined variant)
+- Hover: background shifts to swatch color (e.g., `#434346`), text to white, `rotateZ(-8deg)`, `translateY(-80%)`, hard shadow `rgb(0,0,0) -7px 7px`
+- Focus: `rgb(20, 110, 245) solid 2px` outline
+
+**White Solid**
+- Background: `#ffffff`
+- Text: `#000000`
+- Padding: 6.4px
+- Hover: oat-200 swatch color, animated rotation + shadow
+- Use: Primary CTA on colored sections
+
+**Ghost Outlined**
+- Background: transparent
+- Text: `#000000`
+- Padding: 8px
+- Border: `1px solid #717989`
+- Radius: 4px
+- Hover: dragonfruit swatch color, white text, animated rotation
+
+### Cards & Containers
+- Background: `#ffffff` on cream canvas
+- Border: `1px solid #dad4c8` (warm oat) or `1px dashed #dad4c8`
+- Radius: 12px (standard cards), 24px (feature cards/images), 40px (section containers/footer)
+- Shadow: `rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px`
+- Colorful section backgrounds using swatch palette (matcha, slushie, ube, lemon)
+
+### Inputs & Forms
+- Text: `#000000`
+- Border: `1px solid #717989`
+- Radius: 4px
+- Focus: `rgb(20, 110, 245) solid 2px` outline
+
+### Navigation
+- Sticky top nav on cream background
+- Roobert 15px weight 500 for nav links
+- Clay logo left-aligned
+- CTA buttons right-aligned with pill radius
+- Border bottom: `1px solid #dad4c8`
+- Mobile: hamburger collapse at 767px
+
+### Image Treatment
+- Product screenshots in white cards with oat borders
+- Colorful illustrated sections with swatch background colors
+- 8px–24px radius on images
+- Full-width colorful section backgrounds
+
+### Distinctive Components
+
+**Swatch Color Sections**
+- Full-width sections with swatch-colored backgrounds (matcha green, slushie cyan, ube purple, lemon gold)
+- White text on dark swatches, black text on light swatches
+- Each section tells a distinct product story through its color
+
+**Playful Hover Buttons**
+- Rotate -8deg + translate upward on hover
+- Hard offset shadow (`-7px 7px`) instead of soft blur
+- Background transitions to contrasting swatch color
+- Creates a physical, toy-like interaction quality
+
+**Dashed Border Elements**
+- Dashed borders (`1px dashed #dad4c8`) alongside solid borders
+- Used for secondary containers and decorative elements
+- Adds a hand-drawn, craft-like quality
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 1px, 2px, 4px, 6.4px, 8px, 12px, 12.8px, 16px, 18px, 20px, 24px
+
+### Grid & Container
+- Max content width centered
+- Feature sections alternate between white cards and colorful swatch backgrounds
+- Card grids: 2–3 columns on desktop
+- Full-width colorful sections break the grid
+- Footer with generous 40px radius container
+
+### Whitespace Philosophy
+- **Warm, generous breathing**: The cream background provides a warm rest between content blocks. Spacing is generous but not austere — it feels inviting, like a well-set table.
+- **Color as spatial rhythm**: The alternating swatch-colored sections create visual rhythm through hue rather than just whitespace. Each color section is its own "room."
+- **Craft-like density inside cards**: Within cards, content is compact and well-organized, contrasting with the generous outer spacing.
+
+### Border Radius Scale
+- Sharp (4px): Ghost buttons, inputs
+- Standard (8px): Small cards, images, links
+- Badge (11px): Tag badges
+- Card (12px): Standard cards, buttons
+- Feature (24px): Feature cards, images, panels
+- Section (40px): Large sections, footer, containers
+- Pill (1584px): CTAs, pill-shaped buttons
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow, cream canvas | Page background |
+| Clay Shadow (Level 1) | `rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px inset, rgba(0,0,0,0.05) 0px -0.5px` | Cards, buttons — multi-layer with inset highlight |
+| Hover Hard (Level 2) | `rgb(0,0,0) -7px 7px` | Hover state — playful hard offset shadow |
+| Focus (Level 3) | `rgb(20, 110, 245) solid 2px` | Keyboard focus ring |
+
+**Shadow Philosophy**: Clay's shadow system is uniquely three-layered: a downward cast (`0px 1px 1px`), an upward inset highlight (`0px -1px 1px inset`), and a subtle edge (`0px -0.5px 1px`). This creates a "pressed into clay" quality where elements feel both raised AND embedded — like a clay tablet where content is stamped into the surface. The hover hard shadow (`-7px 7px`) is deliberately retro-graphic, referencing print-era drop shadows and adding physical playfulness.
+
+### Decorative Depth
+- Full-width swatch-colored sections create dramatic depth through color contrast
+- Dashed borders add visual texture alongside solid borders
+- Product illustrations with warm, organic art style
+
+## 7. Do's and Don'ts
+
+### Do
+- Use warm cream (`#faf9f7`) as the page background — the warmth is the identity
+- Apply all 5 OpenType stylistic sets on Roobert headings: `"ss01", "ss03", "ss10", "ss11", "ss12"`
+- Use the named swatch palette (Matcha, Slushie, Lemon, Ube, Pomegranate, Blueberry) for section backgrounds
+- Apply the playful hover animation: `rotateZ(-8deg)`, `translateY(-80%)`, hard shadow `-7px 7px`
+- Use warm oat borders (`#dad4c8`) — not neutral gray
+- Mix solid and dashed borders for visual variety
+- Use generous radius: 24px for cards, 40px for sections
+- Use weight 600 exclusively for headings, 500 for UI, 400 for body
+
+### Don't
+- Don't use cool gray backgrounds — the warm cream (`#faf9f7`) is non-negotiable
+- Don't use neutral gray borders (`#ccc`, `#ddd`) — always use the warm oat tones
+- Don't mix more than 2 swatch colors in the same section
+- Don't skip the OpenType stylistic sets — they define Roobert's character
+- Don't use subtle hover effects — the rotation + hard shadow is the signature interaction
+- Don't use small border radius (<12px) on feature cards — the generous rounding is structural
+- Don't use standard shadows (blur-based) — Clay uses hard offset and multi-layer inset
+- Don't forget the uppercase labels with 1.08px tracking — they're the wayfinding system
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile Small | <479px | Single column, tight padding |
+| Mobile | 479–767px | Standard mobile, stacked layout |
+| Tablet | 768–991px | 2-column grids, condensed nav |
+| Desktop | 992px+ | Full layout, 3-column grids, expanded sections |
+
+### Touch Targets
+- Buttons: minimum 6.4px + 12.8px padding for adequate touch area
+- Nav links: 15px font with generous spacing
+- Mobile: full-width buttons for easy tapping
+
+### Collapsing Strategy
+- Hero: 80px → 60px → smaller display text
+- Navigation: horizontal → hamburger at 767px
+- Feature sections: multi-column → stacked
+- Colorful sections: maintain full-width but compress padding
+- Card grids: 3-column → 2-column → single column
+
+### Image Behavior
+- Product screenshots scale proportionally
+- Colorful section illustrations adapt to viewport width
+- Rounded corners maintained across breakpoints
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Background: Warm Cream (`#faf9f7`)
+- Text: Clay Black (`#000000`)
+- Secondary text: Warm Silver (`#9f9b93`)
+- Border: Oat Border (`#dad4c8`)
+- Green accent: Matcha 600 (`#078a52`)
+- Cyan accent: Slushie 500 (`#3bd3fd`)
+- Gold accent: Lemon 500 (`#fbbd41`)
+- Purple accent: Ube 800 (`#43089f`)
+- Pink accent: Pomegranate 400 (`#fc7981`)
+
+### Example Component Prompts
+- "Create a hero on warm cream (#faf9f7) background. Headline at 80px Roobert weight 600, line-height 1.00, letter-spacing -3.2px, OpenType 'ss01 ss03 ss10 ss11 ss12', black text. Subtitle at 20px weight 400, line-height 1.40, #9f9b93 text. Two buttons: white solid pill (12px radius) and ghost outlined (4px radius, 1px solid #717989)."
+- "Design a colorful section with Matcha 800 (#02492a) background. Heading at 44px Roobert weight 600, letter-spacing -1.32px, white text. Body at 18px weight 400, line-height 1.60, #84e7a5 text. White card inset with oat border (#dad4c8), 24px radius."
+- "Build a button with playful hover: default transparent background, black text, 16px Roobert weight 500. On hover: background #434346, text white, transform rotateZ(-8deg) translateY(-80%), hard shadow rgb(0,0,0) -7px 7px."
+- "Create a card: white background, 1px solid #dad4c8 border, 24px radius. Shadow: rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset. Title at 32px Roobert weight 600, letter-spacing -0.64px."
+- "Design an uppercase label: 12px Roobert weight 600, text-transform uppercase, letter-spacing 1.08px, OpenType 'ss03 ss10 ss11 ss12'."
+
+### Iteration Guide
+1. Start with warm cream (#faf9f7) — never cool white
+2. Swatch colors are for full sections, not small accents — go bold with matcha, slushie, ube
+3. Oat borders (#dad4c8) everywhere — dashed variants for decoration
+4. OpenType stylistic sets are mandatory — they make Roobert look like Roobert
+5. Hover animations are the signature — rotation + hard shadow, not subtle fades
+6. Generous radius: 24px cards, 40px sections — nothing looks sharp or corporate
+7. Three weights: 600 (headings), 500 (UI), 400 (body) — strict roles