@aexol/spectral 0.7.0 → 0.7.1

package/dist/designer/data/systems/nike/tokens.css

@@ -0,0 +1,304 @@
+/* ─────────────────────────────────────────────────────────────────────────
+ * design-systems/nike/tokens.css
+ *
+ * Structured token bindings for "Design System Inspired by Nike" —
+ * the kinetic retail cathedral. A monochromatic UI (black/white/grey
+ * only) so that athletic photography and product color carry the
+ * emotional weight, with massive uppercase Nike Futura ND display
+ * typography that punches through hero imagery like a typographic
+ * shockwave. This file is the *machine-readable* form of the values
+ * described in `DESIGN.md`. Agents paste the `:root { … }` block
+ * verbatim into the first `<style>` of every artifact, then reference
+ * everything via var(--name) from then on.
+ *
+ * Brand-specific schema decisions (non-obvious bindings worth flagging
+ * for reviewers and downstream brand authors):
+ *   1. --bg is pure white (#FFFFFF) and --fg is Nike Black (#111111),
+ *      not pure black. The fractional warmth at #111111 is a
+ *      brand-determining choice ("Don't use #000000 for text" — §7
+ *      do's-and-don'ts) so we honor it strictly even though the gap
+ *      from #000 is small.
+ *   2. --surface and --surface-warm bind to two real tiers of Nike's
+ *      grey ladder: --surface → #F5F5F5 (Light Gray, Podium grey-100,
+ *      the search-fill / placeholder / skeleton tier) and
+ *      --surface-warm → #FAFAFA (Snow, grey-50, the lightest near-
+ *      white differentiation tier). Collapsing surface-warm to an
+ *      alias would erase a real brand feature — Nike walks the full
+ *      50/100/200 surface ramp.
+ *   3. --accent is bound to Nike Black (#111111), the same value as
+ *      --fg. Nike's UI accent IS black: §9 ("Quick Color Reference")
+ *      lists "Primary CTA: Nike Black (#111111)" and §7 forbids
+ *      brand colors beyond the grey scale for UI elements ("product
+ *      photography is the color"). The schema's ≤2 visible accent
+ *      uses per screen aligns naturally because Nike already self-
+ *      polices its UI to a single chromatic move.
+ *   4. --accent-hover is bound to #707072 (Grey-500 / Secondary Text),
+ *      not a black-mix darkening. Nike's documented primary-button
+ *      hover SHIFTS to grey rather than darkening (§4 — "Hover:
+ *      background shifts to Grey-500"); the schema's default formula
+ *      would fight that motion. --accent-active darkens to true
+ *      black (#000000) — the only place pure black appears in the
+ *      system, reserved for the press-feedback moment.
+ *   5. --fg-2 aliases to --fg, while --muted (#707072) and --meta
+ *      (#9E9EA0) bind to independent values. Nike's text hierarchy
+ *      is essentially binary at the primary tier (no intermediate
+ *      between Nike Black and Secondary Text), but it does keep a
+ *      separate tertiary / disabled tier for metadata.
+ *   6. --border-soft binds to #E5E5E5 (Hover Gray / grey-200) — Nike's
+ *      §6 documents the only sanctioned divider as
+ *      `0px -1px 0px 0px #E5E5E5 inset`. The hairline #CACACB
+ *      (--border) reads as a card edge; #E5E5E5 reads as a row-
+ *      separator whisper.
+ *   7. --radius-pill is bound to 30px, NOT 9999px. Nike's signature
+ *      pill button uses 30px literally (§4 — "fully rounded pill
+ *      (30px)") and the number is itself a brand-recognisable
+ *      detail. Apple makes the same kind of choice with 980px; we
+ *      follow that precedent rather than collapsing to the schema
+ *      default.
+ *   8. --elev-raised is ring-only (`0 0 0 1px var(--border)`),
+ *      identical to --elev-ring. §6 declares Nike's elevation model
+ *      "radically flat — no card shadows, no hover lifts, no
+ *      floating elements." Binding raised to a blur shadow would
+ *      contradict the brand; we bind it to the ring so artifacts
+ *      that reference --elev-raised still resolve, but produce the
+ *      flat / hairline look Nike intends.
+ *   9. --focus-ring is the documented 2px solid blue ring
+ *      `0 0 0 2px rgba(39, 93, 197, 1)` from §4 / §6, NOT the
+ *      schema's transparent-mixed accent halo. Nike's focus indicator
+ *      is a deliberate chromatic break — the only blue moment in the
+ *      whole UI — and we keep it verbatim.
+ *  10. --tracking-display is -0.02em. The DESIGN.md hierarchy table
+ *      leaves display letter-spacing as "—", but the user-facing
+ *      brief calls for "tight tracking" on the BIG uppercase
+ *      condensed Futura display; -0.02em (≈ -1.92px on 96px)
+ *      compresses the Futura ND silhouette into the monolithic
+ *      stadium-scoreboard block §3 describes without crushing
+ *      smaller display tiers.
+ *  11. --leading-tight is 0.90, the most aggressive tight-leading
+ *      binding in any brand on the repo. §3 calls it "impossibly
+ *      tight" and the typographic identity depends on it; ascenders
+ *      and descenders nearly touch on the 96px display.
+ *
+ * Contract sources:
+ *   - Standard token names: design-systems/_schema/tokens.schema.ts
+ *       (TOKEN_SCHEMA — every name below appears there or as an
+ *        explicit B-slot.)
+ *   - A2 fallback values: design-systems/_schema/defaults.css
+ *       (We override --accent-on, --accent-hover, --accent-active,
+ *        --success, --warn, --danger, --radius-md, --radius-lg,
+ *        --radius-pill, --elev-raised, --focus-ring; the rest match
+ *        defaults.)
+ *
+ * Keep this file additive: never invent token names not also documented
+ * in DESIGN.md or the shared schema.
+ * ─────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* ─── Surface (3 levels) ──────────────────────────────────────────
+   * Nike's surface ladder runs 50 → 100 → 200 across grey-50/100/200.
+   * --bg is the white retail canvas (the most common default page
+   * background); --surface is the Light Gray feature/skeleton tier;
+   * --surface-warm is the Snow near-white differentiation tier that
+   * appears between hero bands and merchandise grids on nike.com.
+   * All three bind to real values — collapsing surface-warm would
+   * erase a real brand feature. */
+  --bg: #ffffff;             /* Nike White — primary page canvas */
+  --surface: #f5f5f5;        /* Light Gray (Podium grey-100) — fill / skeleton */
+  --surface-warm: #fafafa;   /* Snow (Podium grey-50) — lightest tier */
+
+  /* ─── Foreground ramp (4 levels) ─────────────────────────────────
+   * Nike's text neutrals are explicitly named in DESIGN.md §2:
+   * Nike Black (primary text — #111111, deliberately not #000000),
+   * Secondary Text (#707072, descriptive copy / metadata / price
+   * labels), and Disabled Text (#9E9EA0, inactive elements). The
+   * brand's hierarchy is binary at the primary tier (no #2 stop
+   * between #111111 and #707072), so --fg-2 collapses to var(--fg);
+   * --muted and --meta bind to independent values. */
+  --fg: #111111;             /* Nike Black — primary text, headings, nav links */
+  --fg-2: var(--fg);         /* alias — no intermediate between primary and muted */
+  --muted: #707072;          /* Secondary Text (grey-500) — descriptive copy */
+  --meta: #9e9ea0;           /* Disabled Text (grey-400) — tertiary / metadata */
+
+  /* ─── Border (2 levels) ──────────────────────────────────────────
+   * Nike's border palette is restrained: --border (#CACACB, grey-300)
+   * is the standard input / divider weight; --border-soft (#E5E5E5,
+   * grey-200) is the documented inset-divider color that whispers
+   * between rows in dense product grids without competing with the
+   * #CACACB hairline. */
+  --border: #cacacb;         /* Border Secondary (grey-300) — input borders, dividers */
+  --border-soft: #e5e5e5;    /* Hover Gray (grey-200) — inset row separator */
+
+  /* ─── Accent ──────────────────────────────────────────────────────
+   * Nike's UI accent IS black. §9 ("Quick Color Reference") lists
+   * Primary CTA as Nike Black (#111111); §7 ("Don't introduce brand
+   * colors beyond the grey scale for UI elements") forbids using a
+   * chromatic accent. Product photography carries all the color, so
+   * the schema's "≤2 visible uses per screen" cap aligns naturally
+   * with Nike's already-monochrome UI policy. */
+  --accent: #111111;         /* Nike Black — primary action color */
+  --accent-on: #ffffff;      /* white label on black fill */
+
+  /* ─── Accent states ───────────────────────────────────────────────
+   * Nike's documented primary-button hover shifts to Grey-500 (§4 —
+   * "Hover: background shifts to Grey-500 (#707072)") rather than
+   * darkening, so we override the schema's black-mix formula with
+   * the literal grey-500 value. --accent-active darkens to pure
+   * black — the ONLY place #000000 appears in the entire system,
+   * reserved for the press-feedback moment when Nike Black
+   * compresses one stop further. */
+  --accent-hover: #707072;   /* Grey-500 — documented hover, not a darken */
+  --accent-active: #000000;  /* True black — the only #000000 in the system */
+
+  /* ─── Semantic ────────────────────────────────────────────────────
+   * Nike reserves color exclusively for semantic meaning (red=error,
+   * green=success, yellow=warning) — the only chromatic moves in the
+   * whole UI besides product photography. Values come straight from
+   * §2's "Semantic & Accent" block. */
+  --success: #007d48;        /* Success Green — confirmation, availability */
+  --warn: #fca600;           /* Yellow-500 — warning state */
+  --danger: #d30005;         /* Nike Red — critical errors, sale badges */
+
+  /* ─── Typography ──────────────────────────────────────────────────
+   * Nike's documented split is THREE families that we collapse onto
+   * the schema's two slots via fallback chains:
+   *   - Nike Futura ND: custom condensed Futura, 96px hero display
+   *     ONLY (§7 forbids it below 24px). Falls back to Helvetica Now
+   *     Display Medium for headings.
+   *   - Helvetica Now Display Medium: 24–32px section heads.
+   *   - Helvetica Now Text: navigation, body, controls.
+   *
+   * --font-display chains Nike Futura ND → Helvetica Now Display
+   * Medium → Helvetica Neue, so hero h1 lands on Futura when
+   * available and gracefully degrades to Helvetica Now Display
+   * (Nike's documented heading face) on every other surface.
+   * --font-body holds the workhorse Helvetica Now Text stack. */
+  --font-display:
+    "Nike Futura ND", "Helvetica Now Display Medium", "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --font-body:
+    "Helvetica Now Text Medium", "Helvetica Now Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --font-mono:
+    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
+
+  /* Type scale (px) — derived from DESIGN.md §3 hierarchy table.
+   * Nike's documented sizes are 12 / 14 / 16 / 24 / 32 / 96; the
+   * --text-lg and --text-3xl slots interpolate cleanly into the
+   * existing system (20px = emphasized body / promo links;
+   * 48px = mid-display, between H1 and Hero). The 96px display is
+   * the brand ceiling — the typographic shockwave §3 describes. */
+  --text-xs: 12px;           /* Small / Tiny — timestamps, legal text */
+  --text-sm: 14px;           /* Caption / Link Small / Button Small */
+  --text-base: 16px;         /* Body / Link / Button / H3 — Nike's reading baseline */
+  --text-lg: 20px;           /* Promoted body — interpolation tier */
+  --text-xl: 24px;           /* Heading 2 — subsection titles */
+  --text-2xl: 32px;          /* Heading 1 — section heads */
+  --text-3xl: 48px;          /* Mid-display — interpolation tier */
+  --text-4xl: 96px;          /* Display Hero — typographic shockwave */
+
+  /* Nike's leading envelope is unusually airy in the body (1.75 —
+   * generous for product browsing) and uniquely tight at the top
+   * (0.90 — the "impossibly tight" display ceiling §3 calls a
+   * stadium scoreboard). Both numbers come straight from §3. */
+  --leading-body: 1.75;      /* Body — comfortable product-browsing rhythm */
+  --leading-tight: 0.9;      /* Hero Display — ascenders nearly touch descenders */
+
+  /* Display tracking compresses to -0.02em — condensed Futura ND
+   * wants slight letter-spacing tightening to read as the monolithic
+   * uppercase block §3 describes (≈ -1.92px on the 96px hero).
+   * Body type stays at 0 / component-controlled. */
+  --tracking-display: -0.02em;
+
+  /* ─── Spacing ─────────────────────────────────────────────────────
+   * Nike's grid is 4px base / 8px primary multiples (§5). The shared
+   * schema's 4-8-12-16-20-24-32-48 scale is verbatim Nike — no
+   * overrides needed. Component-internal values (the 4–12px product-
+   * grid gaps that create Nike's "dense superstore" feel) stay
+   * inline at the call site. */
+  --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-8: 32px;           /* section breaks */
+  --space-12: 48px;          /* major section padding */
+
+  /* ─── Section rhythm ──────────────────────────────────────────────
+   * Nike's section padding scales 80 → 48 → 32 across desktop /
+   * tablet / phone (§5 / §8 — "Section padding: 80px → 48px → 32px
+   * → 24px as viewport narrows"). The 80px desktop top is the hero-
+   * section padding from the §5 spacing scale (--space-10 in Nike's
+   * native vocabulary). */
+  --section-y-desktop: 80px;
+  --section-y-tablet: 48px;
+  --section-y-phone: 32px;
+
+  /* ─── Radius ──────────────────────────────────────────────────────
+   * Nike uses purposeful radius tiers (§5): 0px on product imagery,
+   * 8px on form inputs (non-search), 20px on UI containers, 24px on
+   * search inputs, 30px on buttons (full pill), 50% on circular
+   * icons. Mapped onto the schema:
+   *   --radius-sm   →  8px   compact controls and form fields
+   *   --radius-md   → 20px   interactive containers (Nike's card)
+   *   --radius-lg   → 24px   search inputs / medium pills
+   *   --radius-pill → 30px   Nike's signature button capsule —
+   *                          we keep the literal value rather than
+   *                          collapse to 9999px because the number
+   *                          itself is a brand-recognisable detail
+   *                          (same precedent as Apple's 980px). */
+  --radius-sm: 8px;
+  --radius-md: 20px;
+  --radius-lg: 24px;
+  --radius-pill: 30px;
+
+  /* ─── Elevation (3 levels) ────────────────────────────────────────
+   * Nike's elevation philosophy is radically flat (§6 — "no card
+   * shadows, no hover lifts, no floating elements"). Three sanctioned
+   * levels:
+   *   - flat   → none (the default; tonal contrast does the work)
+   *   - ring   → hairline 1px box-shadow border (the only sanctioned
+   *              container outline)
+   *   - raised → SAME as ring. We deliberately collapse raised onto
+   *              the ring tier because Nike refuses blur shadows.
+   *              Components that reference var(--elev-raised) still
+   *              resolve, but produce the flat / hairline result Nike
+   *              intends — never the Material-flavoured float that
+   *              would betray the brand. */
+  --elev-flat: none;
+  --elev-ring: 0 0 0 1px var(--border);
+  --elev-raised: 0 0 0 1px var(--border);
+
+  /* ─── Focus ring ──────────────────────────────────────────────────
+   * Nike's keyboard-focus signal is the documented 2px solid blue
+   * ring at rgba(39, 93, 197, 1) — §4 / §6. This is the ONLY blue
+   * moment in the entire UI, a deliberate chromatic break from the
+   * monochrome canvas to satisfy WCAG focus visibility. We bind the
+   * literal value rather than the schema's transparent-mixed accent
+   * formula because Nike's focus is intentionally NOT the accent
+   * (which is black, indistinguishable from the surface it would
+   * outline). */
+  --focus-ring: 0 0 0 2px rgba(39, 93, 197, 1);
+
+  /* ─── Motion ──────────────────────────────────────────────────────
+   * Nike's transitions are all 200ms ease (§4 — "Transition:
+   * background 200ms ease", "border-color 200ms ease", "opacity
+   * 200ms ease for image swap on hover"). The schema defaults match
+   * already; we keep them verbatim. --motion-fast (150ms) covers
+   * micro-states like hover-tints and focus; --motion-base (200ms)
+   * is the documented hero-state duration. */
+  --motion-fast: 150ms;
+  --motion-base: 200ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+
+  /* ─── Layout ──────────────────────────────────────────────────────
+   * Nike's content scaffolding (§5) is 1920px max container with
+   * 1440px standard content width. We bind --container-max to 1440px
+   * because that is the documented STANDARD content width, the one
+   * artifacts should target — the 1920px ceiling is reserved for
+   * full-bleed hero photography that breaks out of the container.
+   * Gutters step 48 → 24 → 16 across desktop / tablet / phone, the
+   * exact horizontal-padding values from §5. */
+  --container-max: 1440px;
+  --container-gutter-desktop: 48px;
+  --container-gutter-tablet: 24px;
+  --container-gutter-phone: 16px;
+}

package/dist/designer/data/systems/notion/DESIGN.md

@@ -0,0 +1,312 @@
+# Design System Inspired by Notion
+
+> Category: Productivity & SaaS
+> All-in-one workspace. Warm minimalism, serif headings, soft surfaces.
+
+## 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