oh-my-opencode 4.10.0 → 4.11.0

package/packages/shared-skills/skills/frontend/references/design/nike.md

@@ -0,0 +1,363 @@
+# Design System Inspired by Nike
+
+## 1. Visual Theme & Atmosphere
+
+Nike.com is a kinetic retail cathedral — a site that channels the explosive energy of sport into a digital shopping experience. The design operates on a principle of radical simplicity: strip everything back to black, white, and grey so that athletic photography and product color can dominate without competition. The result feels less like a website and more like a sports editorial laid out with the precision of a luxury magazine. Every pixel of real estate is either selling product or driving toward product.
+
+The "Podium CDS" (Nike's internal Core Design System) establishes an aggressively monochromatic foundation. The UI disappears into black (`#111111`) text and white surfaces, allowing hero photography — sweating athletes, mid-air shoes, stadium energy — to carry the emotional weight. When color does appear in the UI, it's almost exclusively functional: red for errors, blue for links, green for success. The product itself is the color story. This restraint creates a visual paradox: the most colorful pages on the internet feel the most minimal, because all vibrancy comes from merchandise rather than interface.
+
+The typography system is the other half of Nike's visual identity. Massive uppercase headlines in Nike Futura ND — a custom condensed Futura variant with impossibly tight line-height (0.90) — punch through hero imagery like a typographic shockwave. Below the headlines, the workhorse Helvetica Now family handles everything from navigation to product descriptions with Swiss-precision clarity. This split between expressive display type and functional body type mirrors Nike's brand duality: inspiration meets execution.
+
+**Key Characteristics:**
+- Monochromatic UI (black/white/grey) that lets product photography be the only color source
+- Massive uppercase display typography (96px, line-height 0.90) that punches through hero images
+- Full-bleed photography with no border radius — imagery fills every available edge
+- Pill-shaped buttons (30px radius) as the primary interactive element
+- 8px spacing grid with athletic discipline — every measurement snaps to the system
+- Category-driven shopping architecture with large navigational image cards
+- Shadow-free, border-minimal elevation model — surface differentiation through grey shifts only
+
+## 2. Color Palette & Roles
+
+### Primary
+
+- **Nike Black** (`#111111`): The foundation — primary text, button backgrounds, nav text, hero overlays. Deliberately not pure black (#000000), creating a fractionally softer reading experience
+- **Nike White** (`#FFFFFF`): Primary page canvas, button text on dark, card surfaces, nav bar background
+
+### Surface & Background
+
+- **Snow** (`#FAFAFA`): Lightest surface, near-white subtle differentiation (--podium-cds-color-grey-50)
+- **Light Gray** (`#F5F5F5`): Secondary background, search input fill, image placeholder, loading skeleton (--podium-cds-color-grey-100)
+- **Hover Gray** (`#E5E5E5`): Hover state background, disabled button fill (--podium-cds-color-grey-200)
+- **Dark Surface** (`#28282A`): Primary background on dark/inverted sections (--podium-cds-color-grey-800)
+- **Deep Charcoal** (`#1F1F21`): Inverse primary background, darkest non-black surface (--podium-cds-color-grey-900)
+- **Dark Hover** (`#39393B`): Hover state on dark backgrounds (--podium-cds-color-grey-700)
+
+### Neutrals & Text
+
+- **Primary Text** (`#111111`): Main body text, headings, nav links (--podium-cds-color-text-primary)
+- **Secondary Text** (`#707072`): Descriptive copy, metadata, timestamps, price labels (--podium-cds-color-text-secondary)
+- **Disabled Text** (`#9E9EA0`): Inactive elements, unavailable options (--podium-cds-color-text-disabled)
+- **Disabled Inverse** (`#4B4B4D`): Disabled text on dark backgrounds (--podium-cds-color-text-disabled-inverse)
+- **Border Primary** (`#707072`): Standard border color, matching secondary text
+- **Border Secondary** (`#CACACB`): Subtle borders, input borders, divider lines (--podium-cds-color-grey-300)
+- **Border Disabled** (`#CACACB`): Inactive border state
+- **Border Active** (`#111111`): Active/focused border, matching primary text
+
+### Semantic & Accent
+
+- **Nike Red** (`#D30005`): Critical errors, sale badges, urgent notifications (--podium-cds-color-red-600)
+- **Bright Red** (`#EE0005`): Red-500, slightly lighter red for emphasis
+- **Nike Orange Badge** (`#D33918`): Badge text, promotional callouts (--podium-cds-color-text-badge)
+- **Orange Flash** (`#FF5000`): Expressive orange accent (--podium-cds-color-orange-400)
+- **Success Green** (`#007D48`): Confirmation, availability, positive states (--podium-cds-color-green-600)
+- **Success Inverse** (`#1EAA52`): Success on dark backgrounds (--podium-cds-color-green-500)
+- **Link Blue** (`#1151FF`): Text links, informational highlights (--podium-cds-color-blue-500)
+- **Info Inverse** (`#1190FF`): Links on dark backgrounds (--podium-cds-color-blue-400)
+- **Warning Yellow** (`#FEDF35`): Warning backgrounds, attention banners (--podium-cds-color-yellow-200)
+- **Focus Ring** (`rgba(39, 93, 197, 1)`): Keyboard focus indicator ring
+
+### Extended Color Spectrum (Podium CDS)
+
+Each color ramp runs 50–900 for expressive use in campaigns and product pages:
+
+- **Red**: `#FFE5E5` → `#EE0005` → `#530300`
+- **Orange**: `#FFE2D6` → `#FF5000` → `#3E1009`
+- **Yellow**: `#FEF087` → `#FCA600` → `#99470A`
+- **Green**: `#DFFFB9` → `#1EAA52` → `#003C2A`
+- **Teal**: `#D4FFFB` → `#008E98` → `#043441`
+- **Blue**: `#D6EEFF` → `#1151FF` → `#020664`
+- **Purple**: `#E4E1FC` → `#6E0FF6` → `#1C0060`
+- **Pink**: `#FFE1F3` → `#ED1AA0` → `#4C012D`
+
+### Gradient System
+
+Nike avoids UI gradients. When gradients appear, they are photographic — applied to product hero backgrounds (e.g., a red shoe on a red-to-deeper-red gradient). The design system itself is flat-color only.
+
+## 3. Typography Rules
+
+### Font Family
+
+**Display:** Nike Futura ND (custom condensed Futura variant exclusive to Nike)
+- Fallbacks: Helvetica Now Text Medium, Helvetica, Arial
+- Used exclusively for large uppercase display headlines
+- Characteristically tight line-height (0.90) and uppercase transform
+
+**Heading:** Helvetica Now Display Medium
+- Fallbacks: Helvetica, Arial
+- Used for section headings and product titles at 24–32px
+
+**Body Medium:** Helvetica Now Text Medium (weight 500)
+- Fallbacks: Helvetica, Arial
+- Used for links, buttons, captions, emphasized body text
+
+**Body:** Helvetica Now Text (weight 400)
+- Fallbacks: Helvetica, Arial
+- Used for standard body copy, descriptions, metadata
+
+**Arabic:** Neue Frutiger Arabic — locale-specific alternative
+
+### Hierarchy
+
+| Role | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|--------|-------------|----------------|-------|
+| Display | 96px | 500 | 0.90 | — | Nike Futura ND, uppercase, hero headlines |
+| Heading 1 | 32px | 500 | 1.20 | — | Helvetica Now Display Medium, section titles |
+| Heading 2 | 24px | 500 | 1.20 | — | Helvetica Now Display Medium, subsections |
+| Heading 3 | 16px | 500 | 1.50 | — | Helvetica Now Text Medium, card titles |
+| Body | 16px | 400 | 1.75 | — | Helvetica Now Text, product descriptions |
+| Body Medium | 16px | 500 | 1.75 | — | Helvetica Now Text Medium, emphasized text |
+| Link | 16px | 500 | 1.75 | — | Helvetica Now Text Medium, navigation links |
+| Link Small | 14px | 500 | 1.86 | — | Helvetica Now Text Medium, footer/utility links |
+| Button | 16px | 500 | 1.50 | — | Helvetica Now Text Medium, CTA text |
+| Button Small | 14px | 500 | 1.50 | — | Helvetica Now Text Medium, secondary buttons |
+| Caption | 14px | 500 | 1.50 | — | Helvetica Now Text Medium, price labels |
+| Small | 12px | 500 | 1.50 | — | Helvetica Now Text Medium, timestamps |
+| Tiny | 12px | 400 | 1.50 | — | Helvetica Now Text, legal text |
+
+### Principles
+
+Nike's typography is a study in tension. The display layer — Nike Futura ND at 96px with a devastating 0.90 line-height — is engineered to feel like a stadium scoreboard: massive, condensed, uppercase, impossible to ignore. It transforms headlines into battle cries. Below the display layer, Helvetica Now provides a clinical counterpoint: Swiss-precision legibility with generous 1.75 line-height for comfortable product browsing. Weight 500 (Medium) dominates throughout the body text, giving Nike's prose a slight assertiveness without the heaviness of bold — every sentence reads like a confident recommendation, not a shout.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary**
+- Background: Nike Black (`#111111`)
+- Text: White (`#FFFFFF`), 16px/500, Helvetica Now Text Medium
+- Border: none
+- Border radius: fully rounded pill (30px)
+- Padding: ~12px 24px
+- Hover: background shifts to Grey-500 (`#707072`), text hover color
+- Active: scale(0) ripple effect with opacity 0.5
+- Focus: 2px box-shadow ring in `rgba(39, 93, 197, 1)`
+- Transition: background 200ms ease
+
+**Primary on Dark**
+- Background: White (`#FFFFFF`)
+- Text: Black (`#111111`)
+- Hover: background shifts to Grey-300 (`#CACACB`)
+
+**Secondary (Outlined)**
+- Background: transparent
+- Text: Nike Black (`#111111`)
+- Border: 1.5px solid `#CACACB` (grey-300)
+- Border radius: 30px
+- Hover: border darkens to `#707072`, background to grey-200
+
+**Disabled**
+- Background: Grey-200 (`#E5E5E5`)
+- Text: Grey-400 (`#9E9EA0`)
+- Cursor: not-allowed
+
+**Icon Button**
+- Background: Grey-100 (`#F5F5F5`)
+- Shape: 30px radius (or 50% for circular)
+- Padding: 6px
+- Hover: Grey-500 background
+
+### Cards & Containers
+
+- Background: White (`#FFFFFF`) — no visible card boundary in most cases
+- Border radius: 0px for product image cards (edge-to-edge imagery), 20px for interactive containers
+- Shadow: none — Nike uses no card shadows whatsoever
+- Hover: no lift effect on product cards; underline on text links within cards
+- Product cards: image on top (no radius), text metadata below with 12px gap
+- Category cards: full-bleed photography with text overlay on dark gradient
+- Transition: opacity 200ms ease for image swap on hover
+
+### Inputs & Forms
+
+- Background: Grey-100 (`#F5F5F5`)
+- Border: 1px solid `#CACACB` when visible, or borderless on search
+- Border radius: 24px (search inputs), 8px (form inputs)
+- Font: Helvetica Now Text, 16px
+- Focus: border shifts to `#111111` (border-active), 2px focus ring in `rgba(39, 93, 197, 1)`
+- Error: border `#D30005` (critical)
+- Placeholder: Grey-500 (`#707072`)
+- Transition: border-color 200ms ease
+
+### Navigation
+
+- Background: White (`#FFFFFF`), sticky
+- Height: ~60px desktop
+- Left: Nike Swoosh logo (24x24px SVG)
+- Center: Category links (New & Featured, Men, Women, Kids, Sale) in 16px/500 Helvetica Now Text Medium
+- Right: Search (24px radius input), Favorites, Cart icons
+- Hover: text color shifts to Grey-500 (`#707072`)
+- Mobile: hamburger menu, full-screen overlay
+- Top banner: promotional message bar with dark background (#111111) and white text
+
+### Image Treatment
+
+- Hero images: full-bleed, no border radius, edge-to-edge
+- Product grid: square (1:1) or 4:3 aspect ratio, no border radius
+- Category cards: 16:9 or 4:3, full-bleed with text overlay
+- Image placeholder: Grey-100 (`#F5F5F5`) solid background
+- Lazy loading: native loading="lazy", skeleton uses #F5F5F5 bg
+- Product hover: secondary image swap (front → side view)
+
+### Promotional Banners
+
+- Full-width dark (`#111111`) background with white text
+- Tight padding (8-12px vertical)
+- Centered text, 12px/500 Helvetica Now Text Medium
+- Used for shipping promotions, member benefits, sale announcements
+
+## 5. Layout Principles
+
+### Spacing System
+
+Base unit: 4px (primary grid is 8px multiples)
+
+| Token | Value | Use |
+|-------|-------|-----|
+| space-1 | 4px | Tight icon gaps, inline spacing |
+| space-2 | 8px | Base unit, button icon gaps |
+| space-3 | 12px | Card internal padding, tight margins |
+| space-4 | 16px | Standard padding, nav spacing |
+| space-5 | 20px | Product card gaps |
+| space-6 | 24px | Section internal padding, grid gaps |
+| space-7 | 32px | Section breaks |
+| space-8 | 48px | Major section padding |
+| space-9 | 64px | Hero section padding |
+| space-10 | 80px | Large section spacing |
+
+### Grid & Container
+
+- Max container width: 1920px
+- Standard content width: ~1440px with horizontal padding
+- Product grid: 3-column on desktop, 2-column on tablet, 1-column on mobile
+- Category grid: 3-column with full-bleed images
+- Grid gap: 4-12px between product cards (intentionally tight)
+- Horizontal padding: 48px desktop, 24px tablet, 16px mobile
+
+### Whitespace Philosophy
+
+Nike's whitespace strategy is deliberately aggressive — not in the luxurious, breathing way of a fashion brand, but in a compressed, high-density way that fills every pixel with either content or intentional absence. Product grids use minimal gaps (4-12px) to create a sense of abundance and choice. Section breaks are generous (48-80px) to separate shopping contexts. The overall effect is a store that feels packed with product while remaining navigable — like a well-organized athletic superstore.
+
+### Border Radius Scale
+
+| Value | Context |
+|-------|---------|
+| 0px | Product images, hero photography (sharp edges) |
+| 8px | Form inputs (non-search) |
+| 18px | Small interactive elements |
+| 20px | Containers, cards with UI content |
+| 24px | Search inputs, medium pills |
+| 30px | Buttons, tags, filters (full pill) |
+| 50% | Circular icon buttons, avatar placeholders |
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat | No shadow, no border | Default state for everything |
+| Divider | `0px -1px 0px 0px #E5E5E5 inset` | Subtle inset line between sections |
+| Focus | `0 0 0 2px rgba(39, 93, 197, 1)` | Keyboard focus ring |
+| Overlay | Dark scrim over photography | Text-on-image legibility |
+
+Nike's elevation philosophy is radically flat. There are no card shadows, no hover lifts, no floating elements. Depth is communicated exclusively through color — dark sections recede, light sections advance, grey shifts indicate state changes. This flatness reinforces the athletic, no-nonsense brand personality: no visual frills, just direct communication. The only "shadow" in the entire system is a 1px inset divider line and the accessibility-required focus ring.
+
+### Decorative Depth
+
+- **Hero photography overlays**: Dark gradient scrims over full-bleed photography for text readability
+- **Product background gradients**: Colored backgrounds behind hero product shots (e.g., red shoe on red gradient)
+- **Banner bars**: Solid dark (#111111) promotional strips at page top
+
+## 7. Do's and Don'ts
+
+### Do
+
+- Use Nike Black (#111111) for all primary text — never pure #000000
+- Keep buttons pill-shaped (30px radius) and limited to primary/secondary variants
+- Use full-bleed, edge-to-edge photography for hero sections — no border radius on images
+- Let product photography provide all color vibrancy; keep UI monochromatic
+- Use uppercase Nike Futura ND ONLY for display headlines (96px+)
+- Maintain tight product grid gaps (4-12px) for a dense, abundant feel
+- Use Grey-100 (#F5F5F5) for all input and placeholder backgrounds
+- Reserve color exclusively for semantic meaning (red=error, green=success, blue=link)
+- Use weight 500 (Medium) for all interactive text elements
+
+### Don't
+
+- Don't add shadows to cards — Nike's elevation model is entirely flat
+- Don't use border radius on product imagery — only UI elements get rounded corners
+- Don't introduce brand colors beyond the grey scale for UI elements
+- Don't use Nike Futura ND below 24px — it's exclusively a display face
+- Don't add hover lift effects — Nike cards don't animate on hover
+- Don't use regular weight (400) for buttons or links — always use 500
+- Don't place colored backgrounds behind UI elements — color is reserved for product contexts
+- Don't use more than two levels of text hierarchy per card (title + body)
+- Don't add decorative dividers — the 1px inset is the only divider pattern
+- Don't soften the contrast — Nike's design deliberately pushes black-on-white to maximum
+
+## 8. Responsive Behavior
+
+### Breakpoints
+
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <640px | Single column, hamburger nav, display text scales down, tight 16px padding |
+| Small Tablet | 640-768px | 2-column product grid begins, nav still collapsed |
+| Tablet | 768-960px | 2-column grids, category cards scale, horizontal padding 24px |
+| Small Desktop | 960-1024px | Nav expands to full horizontal, 3-column product grid |
+| Desktop | 1024-1440px | Full layout, expanded nav, 3-column grids, 48px padding |
+| Large Desktop | >1440px | Max-width container centered, increased margins, hero images full-bleed |
+
+### Touch Targets
+
+- Minimum touch target: 44x44px (WCAG AAA)
+- Mobile nav icons: 48x48px touch area
+- Product cards: full surface is tappable
+- Filter pills: minimum 36px height with 12px padding
+
+### Collapsing Strategy
+
+- **Navigation**: Full category links → hamburger menu below 960px; search, favorites, cart icons remain visible
+- **Product grids**: 3-col → 2-col at 960px → 1-col at 640px
+- **Hero sections**: Display text scales from 96px → 64px → 48px; hero images remain full-bleed at all sizes
+- **Category cards**: 3-col → 2-col → 1-col with maintained full-bleed imagery
+- **Section padding**: 80px → 48px → 32px → 24px as viewport narrows
+- **Promotional banner**: text wraps or truncates, maintains dark background
+
+### Image Behavior
+
+- Responsive images via Nike CDN (`c.static-nike.com`) with width parameters
+- Product images: srcset with multiple resolutions (w_320, w_640, w_960, w_1920)
+- Hero images: full-bleed at all breakpoints, aspect ratio shifts (16:9 desktop → 4:3 mobile)
+- Lazy loading: native loading="lazy", grey-100 placeholder during load
+- Art direction: hero crops change between desktop and mobile compositions
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+
+- Primary CTA: Nike Black (`#111111`)
+- Background: White (`#FFFFFF`)
+- Secondary surface: Light Gray (`#F5F5F5`)
+- Heading text: Nike Black (`#111111`)
+- Body text / hover: Secondary Text (`#707072`)
+- Border: Border Secondary (`#CACACB`)
+- Error: Nike Red (`#D30005`)
+- Link: Link Blue (`#1151FF`)
+
+### Example Component Prompts
+
+- "Create a product hero section with full-bleed edge-to-edge photography, no border radius, a dark gradient overlay for text, and a massive uppercase 96px/500 headline in Nike Futura style with 0.90 line-height and a Nike Black (#111111) pill button (30px radius)"
+- "Design a 3-column product card grid with square images (no border radius), 4px gap between cards, product name in 16px/500 Nike Black (#111111), price in 14px/500, and secondary text in Grey-500 (#707072)"
+- "Build a sticky white navigation bar with a left-aligned logo, centered category links in 16px/500 (#111111) with hover color #707072, and right-aligned search (24px radius, #F5F5F5 background), favorites, and cart icons"
+- "Create a promotional banner strip with #111111 background, white 12px/500 centered text, and 8px vertical padding — full width, no border radius"
+- "Design a secondary outlined button with transparent background, 1.5px #CACACB border, 30px pill radius, 16px/500 #111111 text, hover border darkening to #707072"
+
+### Iteration Guide
+
+When refining existing screens generated with this design system:
+1. Focus on ONE component at a time
+2. Reference specific color names and hex codes from this document
+3. Remember: product photography is the color — UI stays monochromatic
+4. Use the grey scale for state changes: #F5F5F5 → #E5E5E5 → #CACACB → #707072
+5. If something feels too colorful in the UI, it probably is — Nike keeps UI greyscale
+6. Display type (Nike Futura) should ALWAYS be uppercase and never below 24px
+7. Body type (Helvetica Now) should almost always be weight 500 for interactive elements

package/packages/shared-skills/skills/frontend/references/design/notion.md

@@ -0,0 +1,309 @@
+# Design System Inspired by Notion
+
+## 1. Visual Theme & Atmosphere
+
+Notion's website embodies the philosophy of the tool itself: a blank canvas that gets out of your way. The design system is built on warm neutrals rather than cold grays, creating a distinctly approachable minimalism that feels like quality paper rather than sterile glass. The page canvas is pure white (`#ffffff`) but the text isn't pure black -- it's a warm near-black (`rgba(0,0,0,0.95)`) that softens the reading experience imperceptibly. The warm gray scale (`#f6f5f4`, `#31302e`, `#615d59`, `#a39e98`) carries subtle yellow-brown undertones, giving the interface a tactile, almost analog warmth.
+
+The custom NotionInter font (a modified Inter) is the backbone of the system. At display sizes (64px), it uses aggressive negative letter-spacing (-2.125px), creating headlines that feel compressed and precise. The weight range is broader than typical systems: 400 for body, 500 for UI elements, 600 for semi-bold labels, and 700 for display headings. OpenType features `"lnum"` (lining numerals) and `"locl"` (localized forms) are enabled on larger text, adding typographic sophistication that rewards close reading.
+
+What makes Notion's visual language distinctive is its border philosophy. Rather than heavy borders or shadows, Notion uses ultra-thin `1px solid rgba(0,0,0,0.1)` borders -- borders that exist as whispers, barely perceptible division lines that create structure without weight. The shadow system is equally restrained: multi-layer stacks with cumulative opacity never exceeding 0.05, creating depth that's felt rather than seen.
+
+**Key Characteristics:**
+- NotionInter (modified Inter) with negative letter-spacing at display sizes (-2.125px at 64px)
+- Warm neutral palette: grays carry yellow-brown undertones (`#f6f5f4` warm white, `#31302e` warm dark)
+- Near-black text via `rgba(0,0,0,0.95)` -- not pure black, creating micro-warmth
+- Ultra-thin borders: `1px solid rgba(0,0,0,0.1)` throughout -- whisper-weight division
+- Multi-layer shadow stacks with sub-0.05 opacity for barely-there depth
+- Notion Blue (`#0075de`) as the singular accent color for CTAs and interactive elements
+- Pill badges (9999px radius) with tinted blue backgrounds for status indicators
+- 8px base spacing unit with an organic, non-rigid scale
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Notion Black** (`rgba(0,0,0,0.95)` / `#000000f2`): Primary text, headings, body copy. The 95% opacity softens pure black without sacrificing readability.
+- **Pure White** (`#ffffff`): Page background, card surfaces, button text on blue.
+- **Notion Blue** (`#0075de`): Primary CTA, link color, interactive accent -- the only saturated color in the core UI chrome.
+
+### Brand Secondary
+- **Deep Navy** (`#213183`): Secondary brand color, used sparingly for emphasis and dark feature sections.
+- **Active Blue** (`#005bab`): Button active/pressed state -- darker variant of Notion Blue.
+
+### Warm Neutral Scale
+- **Warm White** (`#f6f5f4`): Background surface tint, section alternation, subtle card fill. The yellow undertone is key.
+- **Warm Dark** (`#31302e`): Dark surface background, dark section text. Warmer than standard grays.
+- **Warm Gray 500** (`#615d59`): Secondary text, descriptions, muted labels.
+- **Warm Gray 300** (`#a39e98`): Placeholder text, disabled states, caption text.
+
+### Semantic Accent Colors
+- **Teal** (`#2a9d99`): Success states, positive indicators.
+- **Green** (`#1aae39`): Confirmation, completion badges.
+- **Orange** (`#dd5b00`): Warning states, attention indicators.
+- **Pink** (`#ff64c8`): Decorative accent, feature highlights.
+- **Purple** (`#391c57`): Premium features, deep accents.
+- **Brown** (`#523410`): Earthy accent, warm feature sections.
+
+### Interactive
+- **Link Blue** (`#0075de`): Primary link color with underline-on-hover.
+- **Link Light Blue** (`#62aef0`): Lighter link variant for dark backgrounds.
+- **Focus Blue** (`#097fe8`): Focus ring on interactive elements.
+- **Badge Blue Bg** (`#f2f9ff`): Pill badge background, tinted blue surface.
+- **Badge Blue Text** (`#097fe8`): Pill badge text, darker blue for readability.
+
+### Shadows & Depth
+- **Card Shadow** (`rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px`): Multi-layer card elevation.
+- **Deep Shadow** (`rgba(0,0,0,0.01) 0px 1px 3px, rgba(0,0,0,0.02) 0px 3px 7px, rgba(0,0,0,0.02) 0px 7px 15px, rgba(0,0,0,0.04) 0px 14px 28px, rgba(0,0,0,0.05) 0px 23px 52px`): Five-layer deep elevation for modals and featured content.
+- **Whisper Border** (`1px solid rgba(0,0,0,0.1)`): Standard division border -- cards, dividers, sections.
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: `NotionInter`, with fallbacks: `Inter, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, Segoe UI Emoji, Segoe UI Symbol`
+- **OpenType Features**: `"lnum"` (lining numerals) and `"locl"` (localized forms) enabled on display and heading text.
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | NotionInter | 64px (4.00rem) | 700 | 1.00 (tight) | -2.125px | Maximum compression, billboard headlines |
+| Display Secondary | NotionInter | 54px (3.38rem) | 700 | 1.04 (tight) | -1.875px | Secondary hero, feature headlines |
+| Section Heading | NotionInter | 48px (3.00rem) | 700 | 1.00 (tight) | -1.5px | Feature section titles, with `"lnum"` |
+| Sub-heading Large | NotionInter | 40px (2.50rem) | 700 | 1.50 | normal | Card headings, feature sub-sections |
+| Sub-heading | NotionInter | 26px (1.63rem) | 700 | 1.23 (tight) | -0.625px | Section sub-titles, content headers |
+| Card Title | NotionInter | 22px (1.38rem) | 700 | 1.27 (tight) | -0.25px | Feature cards, list titles |
+| Body Large | NotionInter | 20px (1.25rem) | 600 | 1.40 | -0.125px | Introductions, feature descriptions |
+| Body | NotionInter | 16px (1.00rem) | 400 | 1.50 | normal | Standard reading text |
+| Body Medium | NotionInter | 16px (1.00rem) | 500 | 1.50 | normal | Navigation, emphasized UI text |
+| Body Semibold | NotionInter | 16px (1.00rem) | 600 | 1.50 | normal | Strong labels, active states |
+| Body Bold | NotionInter | 16px (1.00rem) | 700 | 1.50 | normal | Headlines at body size |
+| Nav / Button | NotionInter | 15px (0.94rem) | 600 | 1.33 | normal | Navigation links, button text |
+| Caption | NotionInter | 14px (0.88rem) | 500 | 1.43 | normal | Metadata, secondary labels |
+| Caption Light | NotionInter | 14px (0.88rem) | 400 | 1.43 | normal | Body captions, descriptions |
+| Badge | NotionInter | 12px (0.75rem) | 600 | 1.33 | 0.125px | Pill badges, tags, status labels |
+| Micro Label | NotionInter | 12px (0.75rem) | 400 | 1.33 | 0.125px | Small metadata, timestamps |
+
+### Principles
+- **Compression at scale**: NotionInter at display sizes uses -2.125px letter-spacing at 64px, progressively relaxing to -0.625px at 26px and normal at 16px. The compression creates density at headlines while maintaining readability at body sizes.
+- **Four-weight system**: 400 (body/reading), 500 (UI/interactive), 600 (emphasis/navigation), 700 (headings/display). The broader weight range compared to most systems allows nuanced hierarchy.
+- **Warm scaling**: Line height tightens as size increases -- 1.50 at body (16px), 1.23-1.27 at sub-headings, 1.00-1.04 at display. This creates denser, more impactful headlines.
+- **Badge micro-tracking**: The 12px badge text uses positive letter-spacing (0.125px) -- the only positive tracking in the system, creating wider, more legible small text.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Blue**
+- Background: `#0075de` (Notion Blue)
+- Text: `#ffffff`
+- Padding: 8px 16px
+- Radius: 4px (subtle)
+- Border: `1px solid transparent`
+- Hover: background darkens to `#005bab`
+- Active: scale(0.9) transform
+- Focus: `2px solid` focus outline, `var(--shadow-level-200)` shadow
+- Use: Primary CTA ("Get Notion free", "Try it")
+
+**Secondary / Tertiary**
+- Background: `rgba(0,0,0,0.05)` (translucent warm gray)
+- Text: `#000000` (near-black)
+- Padding: 8px 16px
+- Radius: 4px
+- Hover: text color shifts, scale(1.05)
+- Active: scale(0.9) transform
+- Use: Secondary actions, form submissions
+
+**Ghost / Link Button**
+- Background: transparent
+- Text: `rgba(0,0,0,0.95)`
+- Decoration: underline on hover
+- Use: Tertiary actions, inline links
+
+**Pill Badge Button**
+- Background: `#f2f9ff` (tinted blue)
+- Text: `#097fe8`
+- Padding: 4px 8px
+- Radius: 9999px (full pill)
+- Font: 12px weight 600
+- Use: Status badges, feature labels, "New" tags
+
+### Cards & Containers
+- Background: `#ffffff`
+- Border: `1px solid rgba(0,0,0,0.1)` (whisper border)
+- Radius: 12px (standard cards), 16px (featured/hero cards)
+- Shadow: `rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px`
+- Hover: subtle shadow intensification
+- Image cards: 12px top radius, image fills top half
+
+### Inputs & Forms
+- Background: `#ffffff`
+- Text: `rgba(0,0,0,0.9)`
+- Border: `1px solid #dddddd`
+- Padding: 6px
+- Radius: 4px
+- Focus: blue outline ring
+- Placeholder: warm gray `#a39e98`
+
+### Navigation
+- Clean horizontal nav on white, not sticky
+- Brand logo left-aligned (33x34px icon + wordmark)
+- Links: NotionInter 15px weight 500-600, near-black text
+- Hover: color shift to `var(--color-link-primary-text-hover)`
+- CTA: blue pill button ("Get Notion free") right-aligned
+- Mobile: hamburger menu collapse
+- Product dropdowns with multi-level categorized menus
+
+### Image Treatment
+- Product screenshots with `1px solid rgba(0,0,0,0.1)` border
+- Top-rounded images: `12px 12px 0px 0px` radius
+- Dashboard/workspace preview screenshots dominate feature sections
+- Warm gradient backgrounds behind hero illustrations (decorative character illustrations)
+
+### Distinctive Components
+
+**Feature Cards with Illustrations**
+- Large illustrative headers (The Great Wave, product UI screenshots)
+- 12px radius card with whisper border
+- Title at 22px weight 700, description at 16px weight 400
+- Warm white (`#f6f5f4`) background variant for alternating sections
+
+**Trust Bar / Logo Grid**
+- Company logos (trusted teams section) in their brand colors
+- Horizontal scroll or grid layout with team counts
+- Metric display: large number + description pattern
+
+**Metric Cards**
+- Large number display (e.g., "$4,200 ROI")
+- NotionInter 40px+ weight 700 for the metric
+- Description below in warm gray body text
+- Whisper-bordered card container
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 2px, 3px, 4px, 5px, 6px, 7px, 8px, 11px, 12px, 14px, 16px, 24px, 32px
+- Non-rigid organic scale with fractional values (5.6px, 6.4px) for micro-adjustments
+
+### Grid & Container
+- Max content width: approximately 1200px
+- Hero: centered single-column with generous top padding (80-120px)
+- Feature sections: 2-3 column grids for cards
+- Full-width warm white (`#f6f5f4`) section backgrounds for alternation
+- Code/dashboard screenshots as contained with whisper border
+
+### Whitespace Philosophy
+- **Generous vertical rhythm**: 64-120px between major sections. Notion lets content breathe with vast vertical padding.
+- **Warm alternation**: White sections alternate with warm white (`#f6f5f4`) sections, creating gentle visual rhythm without harsh color breaks.
+- **Content-first density**: Body text blocks are compact (line-height 1.50) but surrounded by ample margin, creating islands of readable content in a sea of white space.
+
+### Border Radius Scale
+- Micro (4px): Buttons, inputs, functional interactive elements
+- Subtle (5px): Links, list items, menu items
+- Standard (8px): Small cards, containers, inline elements
+- Comfortable (12px): Standard cards, feature containers, image tops
+- Large (16px): Hero cards, featured content, promotional blocks
+- Full Pill (9999px): Badges, pills, status indicators
+- Circle (100%): Tab indicators, avatars
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow, no border | Page background, text blocks |
+| Whisper (Level 1) | `1px solid rgba(0,0,0,0.1)` | Standard borders, card outlines, dividers |
+| Soft Card (Level 2) | 4-layer shadow stack (max opacity 0.04) | Content cards, feature blocks |
+| Deep Card (Level 3) | 5-layer shadow stack (max opacity 0.05, 52px blur) | Modals, featured panels, hero elements |
+| Focus (Accessibility) | `2px solid var(--focus-color)` outline | Keyboard focus on all interactive elements |
+
+**Shadow Philosophy**: Notion's shadow system uses multiple layers with extremely low individual opacity (0.01 to 0.05) that accumulate into soft, natural-looking elevation. The 4-layer card shadow spans from 1.04px to 18px blur, creating a gradient of depth rather than a single hard shadow. The 5-layer deep shadow extends to 52px blur at 0.05 opacity, producing ambient occlusion that feels like natural light rather than computer-generated depth. This layered approach makes elements feel embedded in the page rather than floating above it.
+
+### Decorative Depth
+- Hero section: decorative character illustrations (playful, hand-drawn style)
+- Section alternation: white to warm white (`#f6f5f4`) background shifts
+- No hard section borders -- separation comes from background color changes and spacing
+
+## 7. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile Small | <400px | Tight single column, minimal padding |
+| Mobile | 400-600px | Standard mobile, stacked layout |
+| Tablet Small | 600-768px | 2-column grids begin |
+| Tablet | 768-1080px | Full card grids, expanded padding |
+| Desktop Small | 1080-1200px | Standard desktop layout |
+| Desktop | 1200-1440px | Full layout, maximum content width |
+| Large Desktop | >1440px | Centered, generous margins |
+
+### Touch Targets
+- Buttons use comfortable padding (8px-16px vertical)
+- Navigation links at 15px with adequate spacing
+- Pill badges have 8px horizontal padding for tap targets
+- Mobile menu toggle uses standard hamburger button
+
+### Collapsing Strategy
+- Hero: 64px display -> scales to 40px -> 26px on mobile, maintains proportional letter-spacing
+- Navigation: horizontal links + blue CTA -> hamburger menu
+- Feature cards: 3-column -> 2-column -> single column stacked
+- Product screenshots: maintain aspect ratio with responsive images
+- Trust bar logos: grid -> horizontal scroll on mobile
+- Footer: multi-column -> stacked single column
+- Section spacing: 80px+ -> 48px on mobile
+
+### Image Behavior
+- Workspace screenshots maintain whisper border at all sizes
+- Hero illustrations scale proportionally
+- Product screenshots use responsive images with consistent border radius
+- Full-width warm white sections maintain edge-to-edge treatment
+
+## 8. Accessibility & States
+
+### Focus System
+- All interactive elements receive visible focus indicators
+- Focus outline: `2px solid` with focus color + shadow level 200
+- Tab navigation supported throughout all interactive components
+- High contrast text: near-black on white exceeds WCAG AAA (>14:1 ratio)
+
+### Interactive States
+- **Default**: Standard appearance with whisper borders
+- **Hover**: Color shift on text, scale(1.05) on buttons, underline on links
+- **Active/Pressed**: scale(0.9) transform, darker background variant
+- **Focus**: Blue outline ring with shadow reinforcement
+- **Disabled**: Warm gray (`#a39e98`) text, reduced opacity
+
+### Color Contrast
+- Primary text (rgba(0,0,0,0.95)) on white: ~18:1 ratio
+- Secondary text (#615d59) on white: ~5.5:1 ratio (WCAG AA)
+- Blue CTA (#0075de) on white: ~4.6:1 ratio (WCAG AA for large text)
+- Badge text (#097fe8) on badge bg (#f2f9ff): ~4.5:1 ratio (WCAG AA for large text)
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary CTA: Notion Blue (`#0075de`)
+- Background: Pure White (`#ffffff`)
+- Alt Background: Warm White (`#f6f5f4`)
+- Heading text: Near-Black (`rgba(0,0,0,0.95)`)
+- Body text: Near-Black (`rgba(0,0,0,0.95)`)
+- Secondary text: Warm Gray 500 (`#615d59`)
+- Muted text: Warm Gray 300 (`#a39e98`)
+- Border: `1px solid rgba(0,0,0,0.1)`
+- Link: Notion Blue (`#0075de`)
+- Focus ring: Focus Blue (`#097fe8`)
+
+### Example Component Prompts
+- "Create a hero section on white background. Headline at 64px NotionInter weight 700, line-height 1.00, letter-spacing -2.125px, color rgba(0,0,0,0.95). Subtitle at 20px weight 600, line-height 1.40, color #615d59. Blue CTA button (#0075de, 4px radius, 8px 16px padding, white text) and ghost button (transparent bg, near-black text, underline on hover)."
+- "Design a card: white background, 1px solid rgba(0,0,0,0.1) border, 12px radius. Use shadow stack: rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.85px, rgba(0,0,0,0.02) 0px 0.8px 2.93px, rgba(0,0,0,0.01) 0px 0.175px 1.04px. Title at 22px NotionInter weight 700, letter-spacing -0.25px. Body at 16px weight 400, color #615d59."
+- "Build a pill badge: #f2f9ff background, #097fe8 text, 9999px radius, 4px 8px padding, 12px NotionInter weight 600, letter-spacing 0.125px."
+- "Create navigation: white header. NotionInter 15px weight 600 for links, near-black text. Blue pill CTA 'Get Notion free' right-aligned (#0075de bg, white text, 4px radius)."
+- "Design an alternating section layout: white sections alternate with warm white (#f6f5f4) sections. Each section has 64-80px vertical padding, max-width 1200px centered. Section heading at 48px weight 700, line-height 1.00, letter-spacing -1.5px."
+
+### Iteration Guide
+1. Always use warm neutrals -- Notion's grays have yellow-brown undertones (#f6f5f4, #31302e, #615d59, #a39e98), never blue-gray
+2. Letter-spacing scales with font size: -2.125px at 64px, -1.875px at 54px, -0.625px at 26px, normal at 16px
+3. Four weights: 400 (read), 500 (interact), 600 (emphasize), 700 (announce)
+4. Borders are whispers: 1px solid rgba(0,0,0,0.1) -- never heavier
+5. Shadows use 4-5 layers with individual opacity never exceeding 0.05
+6. The warm white (#f6f5f4) section background is essential for visual rhythm
+7. Pill badges (9999px) for status/tags, 4px radius for buttons and inputs
+8. Notion Blue (#0075de) is the only saturated color in core UI -- use it sparingly for CTAs and links