elanous 0.2.0 → 0.2.4

package/docs/design/systems/tom-modern/DESIGN.md

@@ -0,0 +1,361 @@
+# Tom Modern Design
+
+> Category: Starter
+> Editorial-technical design system. Neutral canvas, single vermillion accent, sharp corners, Geist typography, hard shadows, structured composition.
+
+## 1. Visual Theme & Atmosphere
+
+Tom Modern Design is an editorial-technical design family: structured, sharp, restrained, premium, intentional, anti-generic. It reads like a deliberate design — not a mass-generated startup template.
+
+The system sits on a near-white neutral canvas (`#fafafa`) with deep ink text (`#27272a`). One primary accent — vermillion (`#ff5a00`) — carries all interactive emphasis. Typography is Geist Sans for body and Geist Mono for labels, metadata, and technical notes. Every corner is sharp (0px radius). Shadows are hard-offset, never soft.
+
+Atmosphere comes from a subtle 30px grid overlay on the page background, structural lines, and the contrast between quiet white zones and dense information bands. The design avoids decorative noise — no blobs, no gradients, no glow effects.
+
+**Key signals:**
+- Neutral near-white canvas with strong ink contrast
+- Single vermillion accent reserved for CTAs, links, and highlights
+- Sharp 0px corners throughout — rectangular silhouette is the brand
+- Hard offset shadows (`8px 8px 0`) for elevation
+- Geist Sans/Mono typography with strong hierarchy
+- Editorial split layouts with asymmetric composition
+- Uppercase compact labels for eyebrows and metadata
+
+**Anti-patterns to avoid:**
+- Generic centered startup heroes
+- Purple gradients by default
+- Rounded cards and buttons
+- Beige or cream backgrounds
+- Blob-based decorative elements
+- Repetitive identical card grids
+
+## 2. Color Palette & Roles
+
+### Primary
+
+| Token | Hex | Role |
+|---|---|---|
+| `--accent` | `#ff5a00` | Primary accent — CTAs, links, interactive highlights, accent words |
+
+### Surfaces
+
+| Token | Hex | Role |
+|---|---|---|
+| `--bg` | `#fafafa` | Page background — neutral near-white, never warm |
+| `--surface` | `#ffffff` | Card and panel surfaces |
+| `--surface-warm` | `var(--surface)` | Alternate surface for section rhythm (aliases to surface) |
+
+### Text
+
+| Token | Hex | Role |
+|---|---|---|
+| `--fg` | `#27272a` | Primary text — headlines, body, buttons |
+| `--fg-2` | `#52525b` | Secondary text — descriptions, lead paragraphs |
+| `--muted` | `#71717a` | Muted text — captions, labels, metadata |
+
+### Borders
+
+| Token | Hex | Role |
+|---|---|---|
+| `--border` | `#969696` | Primary borders — card outlines, structural lines |
+| `--border-soft` | `#d4d4d8` | Muted borders — subtle separators |
+
+### Shadows (brand-specific)
+
+| Token | Value | Role |
+|---|---|---|
+| `--tm-shadow-hard` | `8px 8px 0 rgba(150,150,150,0.12)` | Hard offset shadow — hover states, emphasis |
+| `--tm-shadow-soft` | `4px 4px 0 rgba(150,150,150,0.1)` | Soft offset shadow — default card state |
+
+### Code Window (brand-specific)
+
+| Token | Hex | Role |
+|---|---|---|
+| `--tm-code-bg` | `#111517` | Code window background |
+| `--tm-code-panel` | `#151a1d` | Code window header |
+| `--tm-code-text` | `#d8dee9` | Code text |
+
+### Background Pattern
+
+The page background uses a 30px grid:
+```css
+background-image:
+    linear-gradient(rgba(150, 150, 150, 0.04) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(150, 150, 150, 0.04) 1px, transparent 1px);
+background-size: 30px 30px;
+```
+
+## 3. Typography Rules
+
+### Font Families
+
+- **Primary:** Geist Sans — body, headlines, buttons, navigation
+- **Mono:** Geist Mono — labels, metadata, code, technical notes
+
+### Hierarchy
+
+| Token | Size | Weight | Line Height | Letter Spacing | Use |
+|---|---|---|---|---|---|
+| Display | `clamp(2.3rem, 5vw, 4.8rem)` | 700 | 0.96 | -0.04em | Hero headlines |
+| Section | `clamp(21px, 2vw, 25px)` | 700 | 1.15 | -0.03em | Section titles |
+| Card | 18px | 700 | 1.38 | -0.03em | Card titles |
+| Body | 14px | 400 | 1.6 | 0 | Body text |
+| Caption | 12px | 400 | 1.4 | 0 | Captions, fine print |
+| Eyebrow | 12px | 700 | 1 | 0.14em | Uppercase labels |
+| Button | 13px | 700 | 1 | 0.08em | Button labels |
+| Mono | 12px | 700 | 1 | 0.14em | Technical labels |
+
+### Principles
+
+- **Geist Sans** runs across every surface — display, body, UI, buttons
+- **Geist Mono** is reserved for labels, metadata, code, and technical microcopy
+- Display headlines use weight 700 with tight line-height (0.96–1.15)
+- Body text uses weight 400 with generous line-height (1.6)
+- Uppercase labels use 0.14em letter-spacing for the "machined" feel
+- One accent word per headline: `<span class="title-highlight">word</span>`
+
+### Font Substitutes
+
+If Geist is unavailable:
+- **Inter** at weights 400/500/600/700 — slightly narrower; bump font-size by ~3%
+- **Manrope** at weights 400/500/600/700 — closer proportion, gentler curves
+- **IBM Plex Sans** at weights 400/500/600/700 — wider, more mechanical feel
+
+## 4. Component Stylings
+
+### Buttons
+
+- **Primary:** Dark fill (`--fg`), white text, 0px radius, hard shadow on hover
+- **Secondary:** Transparent, dark text, 1px border, white fill on hover
+- **Block:** Full-width variant of any button
+
+### Cards
+
+- **Frame:** White surface, 1px border, soft shadow
+- **Panel:** White surface, 1px border, hard shadow, accent top-border (4px)
+- **Feature card:** 2-column grid with optional full-width variant
+- **Feature 3-card:** 3-column grid with icon headers
+
+### Navigation
+
+- **Header:** Sticky, blurred background (`rgba(250,250,250,0.88)`), 1px bottom border
+- **Nav links:** Geist Sans, secondary text color
+- **CTA button:** Dark fill, same as primary button
+
+### Forms
+
+- **Input:** White background, 1px border, 44px height, accent border on focus
+- **Textarea:** Same as input, resizable
+- **Label:** Mono font, uppercase, muted color
+
+### Premium Components
+
+- **Token Card:** Dark gradient (`#14192B` → `#1B2A3D` → `#11393A`), holographic sheen animation, mono typography, perforation line with circular cutouts
+- **Code Window:** Dark background (`#111517`), macOS-style traffic light dots, atmospheric gradient overlay, 7 syntax highlighting tokens
+
+### Tabs
+
+- **Tab nav:** Horizontal, mono font, uppercase, accent bottom-border on active
+- **Tab panel:** Hidden by default, shown with `.is-active` class
+
+### FAQ
+
+- **Item:** Frame with expandable answer
+- **Question:** Full-width button, plus/minus icon
+- **Answer:** Hidden by default, shown when `.is-open`
+
+## 5. Layout Principles
+
+### Container
+
+- Max width: 1240px
+- Padding: `min(100% - 40px, 1240px)`
+- Centered with `margin: 0 auto`
+
+### Section
+
+- Vertical padding: 96px
+- Alternate sections use `rgba(255,255,255,0.72)` background with 1px borders
+
+### Grid System
+
+- **Hero:** 2-column split (0.92fr / 1.08fr) with 42px gap
+- **Feature grid:** 2-column with optional full-width cards
+- **Feature 3-col:** 3-column with icon headers
+- **Updates/Pain:** 3-column grid
+- **Pricing/Contact:** 2-column split
+- **Footer:** 3-column (2fr / 1fr / 1fr)
+
+### Section Rhythm
+
+Sections alternate between:
+1. White background (`--bg`)
+2. Alternate surface (`rgba(255,255,255,0.72)` with borders)
+
+This creates visual rhythm without color changes.
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|---|---|---|
+| 0 — Flat | No shadow, no border | Body text, section backgrounds |
+| 1 — Border | 1px `--border` border | Cards, panels, inputs |
+| 2 — Soft shadow | `4px 4px 0 rgba(150,150,150,0.1)` | Default card state |
+| 3 — Hard shadow | `8px 8px 0 rgba(150,150,150,0.12)` | Hover states, emphasis |
+| 4 — Code shadow | `0 28px 90px rgba(22,22,22,0.14)` | Code window only |
+
+The system uses **color contrast** (surface vs. background) rather than shadow depth for hierarchy. Shadows are reserved for interactive feedback and premium components.
+
+## 7. Do's and Don'ts
+
+### Do
+
+- Use `{colors.primary}` for CTAs, links, and interactive highlights — keep it reserved
+- Set display headlines in Geist Sans at weight 700 with tight line-height
+- Keep body copy at weight 400 — the contrast between heavy display and light body is the typographic signature
+- Use `{rounded.none}` (0px) by default — the sharp rectangular silhouette IS the brand
+- Align spacing to `{spacing.section}` (96px) between major bands
+- Frame product photography inside `{rounded.xl}` containers
+- Set button labels in uppercase with 0.08em letter-spacing
+- Use hard shadows for hover effects, soft shadows for default state
+- Use `{typography.button}` for all button labels
+
+### Don't
+
+- Don't introduce accent colors outside the detected palette — the system is closed by design
+- Don't bold body type — body stays at weight 400
+- Don't add soft drop-shadows or atmospheric gradients — the brand uses hard borders and flat fills
+- Don't round buttons above `{rounded.sm}` — a soft button reads as a different brand
+- Don't use beige or cream backgrounds — the canvas must be neutral (`#fafafa`)
+- Don't use decorative motion everywhere — animation must be purposeful
+- Don't drop ink text opacity to create hierarchy — switch surface or shift to `{colors.muted}`
+- Don't use multiple accent words in one heading — one per section maximum
+
+## 8. Responsive Behavior
+
+### Breakpoints
+
+| Name | Width | Key Changes |
+|---|---|---|
+| Mobile | < 560px | Single column, compact padding (24px), smaller type |
+| Tablet | 560–980px | 2-column grids, stacked hero |
+| Desktop | > 980px | Full layout, 1240px max-width |
+
+### Touch Targets
+
+- Minimum 44×44px for all interactive elements
+- Buttons: 44px height + 24px horizontal padding
+- Nav links: extend tap area to full row height
+
+### Collapsing Strategy
+
+- **Hero:** Stacks to single column below 980px
+- **Feature grids:** 2-col → 1-col below 980px
+- **3-col grids:** 3-col → 2-col → 1-col
+- **Footer:** 3-col → 2-col → 1-col
+- **Navigation:** Hamburger menu on mobile (not included in CSS — implement per project)
+
+### Image Behavior
+
+- Hero photography fills full width
+- Product thumbnails maintain aspect ratio
+- Lifestyle photography uses horizontal cropping on mobile
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+
+```
+Background:  #fafafa (neutral near-white)
+Surface:     #ffffff (pure white)
+Text:        #27272a (near-black)
+Secondary:   #52525b
+Muted:       #71717a
+Accent:      #ff5a00 (vermillion)
+Border:      #969696
+Border-muted: #d4d4d8
+```
+
+### Ready-to-Use Prompt
+
+```
+Create a landing page in Tom Modern Design style:
+
+- Background: #fafafa with 30px grid overlay
+- Typography: Geist Sans for body, Geist Mono for labels
+- Colors: #27272a text, #ff5a00 accent, #ffffff surfaces
+- Corners: 0px (sharp, never rounded)
+- Shadows: 8px 8px 0 rgba(150,150,150,0.12) on hover
+- Layout: split hero, 2-col feature grid, structured sections
+- Buttons: uppercase, 0.08em letter-spacing, dark fill primary
+- Cards: white surface, 1px border, soft shadow
+- Sections: alternate between white and rgba(255,255,255,0.72)
+- One accent word per headline using <span class="title-highlight">
+- Eyebrows: uppercase mono labels above section titles
+```
+
+### Required Font Loading
+
+When generating HTML with Tom Modern, load Geist explicitly. `tokens.css`
+declares the `Geist Sans` and `Geist Mono` family names, but generated
+artifacts do not automatically inherit the `@font-face` block from
+`components.html`.
+
+Use this loader before any generated CSS that references `--font-display`,
+`--font-body`, or `--font-mono`:
+
+```css
+@font-face {
+    font-family: 'Geist Sans';
+    src: url('https://cdn.jsdelivr.net/npm/geist@1.7.2/dist/fonts/geist-sans/Geist-Variable.woff2') format('woff2');
+    font-weight: 100 900;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Geist Mono';
+    src: url('https://cdn.jsdelivr.net/npm/geist@1.7.2/dist/fonts/geist-mono/GeistMono-Variable.woff2') format('woff2');
+    font-weight: 100 900;
+    font-display: swap;
+}
+```
+
+If the host project can self-serve fonts, prefer bundling equivalent local
+woff2 files under `fonts/` while keeping the same family names.
+
+### Component Classes
+
+```css
+/* Layout */
+.container          /* max-width 1240px, centered */
+.section            /* 96px vertical padding */
+.section-alt        /* alternate background */
+.frame              /* card with border + shadow */
+
+/* Typography */
+.eyebrow            /* uppercase mono label */
+.title-highlight    /* accent-colored text */
+.section-head       /* section header */
+
+/* Buttons */
+.button             /* base button */
+.button-primary     /* dark filled */
+.button-secondary   /* transparent outlined */
+.button-block       /* full-width */
+
+/* Hero */
+.hero-grid          /* 2-col layout */
+.hero-lead          /* lead paragraph */
+.hero-actions       /* button group */
+
+/* Features */
+.feature-grid       /* 2-col with wide cards */
+.feature-3col       /* 3-col with icons */
+
+/* Interactive */
+.tab-shell          /* tab container */
+.faq-item           /* accordion item */
+
+/* Premium */
+.key-card           /* dark gradient with sheen */
+.tm-code-window     /* code editor display */
+```

package/docs/design/systems/tom-modern/manifest.json

@@ -0,0 +1,16 @@
+{
+    "schemaVersion": "od-design-system-project/v1",
+    "id": "tom-modern",
+    "name": "Tom Modern Design",
+    "category": "Starter",
+    "description": "Editorial-technical design system. Neutral canvas, single vermillion accent, sharp corners, Geist typography, hard shadows, structured composition.",
+    "source": {
+        "type": "bundled",
+        "origin": "https://github.com/Tom-Opencart/tom-modern-html-style-rule"
+    },
+    "files": {
+        "design": "DESIGN.md",
+        "tokens": "tokens.css",
+        "components": "components.html"
+    }
+}

package/docs/design/systems/tom-modern/tokens.css

@@ -0,0 +1,99 @@
+/* Tom Modern Design System — tokens.css */
+/* Source: https://github.com/Tom-Opencart/tom-modern-html-style-rule */
+
+:root {
+  /* ─── Surface ──────────────────────────────────────────────────── */
+  --bg: #fafafa;
+  --surface: #ffffff;
+  --surface-warm: var(--surface);
+
+  /* ─── Foreground ───────────────────────────────────────────────── */
+  --fg: #27272a;
+  --fg-2: #52525b;
+  --muted: #71717a;
+  --meta: var(--muted);
+
+  /* ─── Border ───────────────────────────────────────────────────── */
+  --border: #969696;
+  --border-soft: #d4d4d8;
+
+  /* ─── Accent ───────────────────────────────────────────────────── */
+  --accent: #ff5a00;
+  --accent-on: #ffffff;
+  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
+  --accent-active: color-mix(in oklab, var(--accent), black 14%);
+
+  /* ─── Semantic ─────────────────────────────────────────────────── */
+  --success: #16a34a;
+  --warn: #eab308;
+  --danger: #dc2626;
+
+  /* ─── Typography ───────────────────────────────────────────────── */
+  --font-display: 'Geist Sans', 'Geist', system-ui, -apple-system, sans-serif;
+  --font-body: 'Geist Sans', 'Geist', system-ui, -apple-system, sans-serif;
+  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+
+  /* Type scale */
+  --text-xs: 11px;
+  --text-sm: 13px;
+  --text-base: 15px;
+  --text-lg: 18px;
+  --text-xl: 22px;
+  --text-2xl: 28px;
+  --text-3xl: 38px;
+  --text-4xl: 48px;
+
+  --leading-body: 1.65;
+  --leading-tight: 0.96;
+  --tracking-display: -0.04em;
+
+  /* ─── Spacing ──────────────────────────────────────────────────── */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-12: 48px;
+
+  /* ─── Section rhythm ───────────────────────────────────────────── */
+  --section-y-desktop: 96px;
+  --section-y-tablet: 64px;
+  --section-y-phone: 48px;
+
+  /* ─── Radius ───────────────────────────────────────────────────── */
+  --radius-sm: 0px;
+  --radius-md: 0px;
+  --radius-lg: 0px;
+  --radius-pill: 0px;
+
+  /* ─── Elevation ────────────────────────────────────────────────── */
+  --elev-flat: none;
+  --elev-ring: 0 0 0 1px var(--border);
+  --elev-raised: 4px 4px 0 rgba(150, 150, 150, 0.1);
+
+  /* ─── Focus ────────────────────────────────────────────────────── */
+  --focus-ring: 0 0 0 2px var(--accent);
+
+  /* ─── Motion ───────────────────────────────────────────────────── */
+  --motion-fast: 150ms;
+  --motion-base: 200ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+
+  /* ─── Layout ───────────────────────────────────────────────────── */
+  --container-max: 1240px;
+  --container-gutter-desktop: 20px;
+  --container-gutter-tablet: 16px;
+  --container-gutter-phone: 12px;
+
+  /* ─── Brand-specific extensions ────────────────────────────────── */
+  --tm-accent-soft: rgba(255, 90, 0, 0.08);
+  --tm-shadow-hard: 8px 8px 0 rgba(150, 150, 150, 0.12);
+  --tm-shadow-soft: 4px 4px 0 rgba(150, 150, 150, 0.1);
+  --tm-shadow-code: 0 28px 90px rgba(22, 22, 22, 0.14);
+  --tm-header-height: 82px;
+  --tm-code-bg: #111517;
+  --tm-code-panel: #151a1d;
+  --tm-code-text: #d8dee9;
+}

package/docs/design/systems/vibrant/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Vibrant
+
+> Category: Bold & Expressive
+> Lively, colorful design with bold playful typography, warm accents, and dynamic visual energy.
+
+## 1. Visual Theme & Atmosphere
+
+Lively, colorful design with bold playful typography, warm accents, and dynamic visual energy.
+
+- **Visual style:** modern, clean, bold, playful
+- **Color stance:** primary, secondary, neutral, success
+- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
+
+## 2. Color
+
+- **Primary:** `#7C61D4` — Token from style foundations.
+- **Secondary:** `#EAAE87` — Token from style foundations.
+- **Success:** `#16A34A` — Token from style foundations.
+- **Warning:** `#D97706` — Token from style foundations.
+- **Danger:** `#DC2626` — Token from style foundations.
+- **Surface:** `#FFFFFF` — Token from style foundations.
+- **Text:** `#2F281D` — Token from style foundations.
+- **Neutral:** `#FFFFFF` — Derived from the surface token for official format compatibility.
+
+- Favor Primary (#7C61D4) for CTA emphasis.
+- Use Surface (#FFFFFF) for large backgrounds and cards.
+- Keep body copy on Text (#2F281D) for legibility.
+
+## 3. Typography
+
+- **Scale:** 14/16/18/24/32/40
+- **Families:** primary=Noto Sans, display=Fascinate, mono=Fira Code
+- **Weights:** 100, 200, 300, 400, 500, 600, 700, 800, 900
+- Headings should carry the style personality; body text should optimize scanability and contrast.
+
+## 4. Spacing & Grid
+
+- **Spacing scale:** 2/4/8/12/16/24/32/48
+- Keep vertical rhythm consistent across sections and components.
+- Align columns and modules to a predictable grid; avoid ad-hoc offsets.
+
+## 5. Layout & Composition
+
+- Prefer clear content blocks with consistent internal padding.
+- Keep hierarchy obvious: headline → support text → primary action.
+- Use whitespace to separate concerns before adding borders or shadows.
+
+## 6. Components
+
+- Buttons: primary action uses `#7C61D4`; secondary actions stay neutral.
+- Inputs: strong focus-visible states, clear labels, and predictable error messaging.
+- Cards/sections: use consistent radii, spacing, and elevation strategy across the page.
+
+## 7. Motion & Interaction
+
+- Use subtle transitions that emphasize Primary (#7C61D4) as the interaction signal.
+- Default to short, purposeful transitions (150–250ms) with stable easing.
+- Ensure hover, focus-visible, active, disabled, and loading states are explicit.
+
+## 8. Voice & Brand
+
+- Tone should reflect the visual style: concise, confident, and product-specific.
+- Keep microcopy action-oriented and avoid generic filler language.
+- Preserve the style identity in headlines while keeping UI labels literal and clear.
+
+## 9. Anti-patterns
+
+- Do not introduce off-palette colors when an existing token can solve the problem.
+- Do not flatten hierarchy by using the same type size/weight for all text.
+- Do not add decorative effects that reduce readability or accessibility.
+- Do not mix unrelated visual metaphors in the same interface.

package/docs/design/systems/vibrant/manifest.json

@@ -0,0 +1,54 @@
+{
+  "schemaVersion": "od-design-system-project/v1",
+  "id": "vibrant",
+  "name": "Vibrant",
+  "category": "Bold & Expressive",
+  "description": "Bundled OpenDesign package for Vibrant, derived from curated DESIGN.md, tokens.css, and components.html fixtures.",
+  "source": {
+    "type": "bundled",
+    "origin": "OpenDesign curated bundled fixture"
+  },
+  "files": {
+    "design": "DESIGN.md",
+    "tokens": "tokens.css",
+    "designTokens": "design-tokens.json",
+    "tailwind": "tailwind-v4.css",
+    "components": "components.html"
+  },
+  "usage": "USAGE.md",
+  "componentsManifest": "components.manifest.json",
+  "importMode": "normalized",
+  "craft": {
+    "applies": [],
+    "suggested": [
+      "color",
+      "accessibility-baseline"
+    ],
+    "exemptions": []
+  },
+  "preview": {
+    "dir": "preview",
+    "pages": [
+      {
+        "path": "preview/colors.html",
+        "role": "colors",
+        "title": "Colors"
+      },
+      {
+        "path": "preview/typography.html",
+        "role": "typography",
+        "title": "Typography"
+      },
+      {
+        "path": "preview/spacing.html",
+        "role": "spacing",
+        "title": "Spacing"
+      }
+    ]
+  },
+  "sourceFiles": {
+    "evidence": "source/evidence.md",
+    "tokens": "source/tokens.source.json",
+    "report": "source/token-contract.report.json"
+  }
+}

package/docs/design/systems/vibrant/tokens.css

@@ -0,0 +1,63 @@
+/* design-systems/vibrant/tokens.css
+ * Structured token bindings for Vibrant.
+ * vibrant visual system with saturated accents, warm surfaces, and optimistic product energy.
+ */
+
+:root {
+  --bg: #fff8d7;
+  --surface: #ffffff;
+  --surface-warm: #ffef9f;
+  --fg: #1d1836;
+  --fg-2: #4c426c;
+  --muted: #796f91;
+  --meta: #ff6b00;
+  --border: #eadfba;
+  --border-soft: #f5eccd;
+  --accent: #ff6b00;
+  --accent-on: #ffffff;
+  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
+  --accent-active: color-mix(in oklab, var(--accent), black 14%);
+  --success: #2e9d57;
+  --warn: #ffb020;
+  --danger: #e5484d;
+  --font-display: Inter, system-ui, sans-serif;
+  --font-body: Inter, system-ui, sans-serif;
+  --font-mono: "SF Mono", ui-monospace, Menlo, monospace;
+  --text-xs: 12px;
+  --text-sm: 14px;
+  --text-base: 16px;
+  --text-lg: 18px;
+  --text-xl: 24px;
+  --text-2xl: 36px;
+  --text-3xl: 54px;
+  --text-4xl: 76px;
+  --leading-body: 1.52;
+  --leading-tight: 1.06;
+  --tracking-display: -0.025em;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-12: 48px;
+  --section-y-desktop: 96px;
+  --section-y-tablet: 68px;
+  --section-y-phone: 48px;
+  --radius-sm: 10px;
+  --radius-md: 16px;
+  --radius-lg: 24px;
+  --radius-pill: 9999px;
+  --elev-flat: none;
+  --elev-ring: 0 0 0 1px var(--border);
+  --elev-raised: 0 18px 44px rgba(29, 24, 54, 0.14);
+  --focus-ring: 0 0 0 4px rgba(255, 107, 0, 0.26);
+  --motion-fast: 150ms;
+  --motion-base: 240ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --container-max: 1180px;
+  --container-gutter-desktop: 36px;
+  --container-gutter-tablet: 24px;
+  --container-gutter-phone: 16px;
+}