musememory 1.11.0 → 2.0.0

package/.agents/brand/a11y.md

@@ -0,0 +1,32 @@
+# ♿ Accessibility (A11y) Baseline Standard
+
+> **Target Standard**: WCAG 2.2 Level AA · Principle Zero: Accessibility is a pre-condition for use.
+
+---
+
+## 1. Core Mandates
+
+1. **Semantic HTML First**: Always prefer native elements (`<button>`, `<a>`, `<dialog>`, `<details>`, `<label>`). Never use `<div onClick=...>` or `<span onClick=...>`.
+2. **Color Contrast (SC 1.4.3, 1.4.11)**:
+   - Body & Normal Text: Minimum **4.5:1** contrast ratio against background.
+   - Large Text (≥18px / 14px bold) & UI Elements: Minimum **3:1** contrast ratio.
+   - Never convey state with color alone; use **Icon + Text + Color**.
+3. **Keyboard & Focus Management (SC 2.1.1, 2.4.7)**:
+   - 100% of interactive flows must be operable via Tab / Enter / Space / Arrow keys.
+   - Visible focus ring (minimum 2px thickness with 3:1 contrast) on every interactive element.
+   - Never suppress focus (`outline: none` without a high-contrast replacement is forbidden).
+4. **Modals & Dialogs**:
+   - Use native `<dialog>` with `showModal()` or trap focus inside custom modals.
+   - Focus moves into modal on open and returns to triggering element upon close.
+5. **Touch Targets (SC 2.5.8)**:
+   - Minimum interactive hit area of **24×24 CSS pixels** (WCAG AA floor); **44×44 CSS pixels** recommended as the agency ergonomic standard.
+6. **Forms & Labels**:
+   - Every input must have a programmatically linked `<label>` via `id`/`htmlFor` or direct element wrapping.
+   - Visible error messages with `aria-describedby` linkage.
+
+---
+
+## 2. Automated & Verification Checkpoints
+
+- **Zero Axe-Core Violations**: All automated test suites and page builds must pass `axe-core` audits with zero critical or serious violations.
+- **Screen Reader Parity**: Accessible names (`aria-label`, visible text) must accurately describe control actions without duplicating visible strings awkwardly.

package/.agents/brand/bem-conventions.md

@@ -0,0 +1,42 @@
+# 📐 Semantic BEM CSS Class Architecture
+
+> **Purpose**: Standardized Block-Element-Modifier convention for modular, self-documenting, conflict-free styling.
+
+---
+
+## 1. Naming Structure
+
+```
+.block                    → Standalone component root (e.g., .card, .navbar, .modal)
+.block__element           → Child part of block (e.g., .card__title, .navbar__item)
+.block--modifier          → Variant of block (e.g., .card--featured, .btn--primary)
+.block__element--modifier → Variant of element (e.g., .navbar__link--active)
+```
+
+---
+
+## 2. Core Rules
+
+1. **Block**: Lowercase, hyphen-separated for multi-word names (`.pricing-table`, `.hero-banner`).
+2. **Element**: Separated by double underscore (`__`) (`.pricing-table__tier`, `.hero-banner__heading`).
+3. **Modifier**: Separated by double hyphen (`--`) (`.pricing-table--highlighted`, `.btn--danger`).
+4. **Shallow Depth**: Never nest elements beyond one level (`.block__element` ONLY; never `.block__element__subelement`).
+5. **Separation of Concerns**: Avoid using tag selectors (`div`, `p`, `span`) directly in stylesheets. Target explicit BEM classes.
+
+---
+
+## 3. Reference Implementation
+
+```html
+<article class="card card--featured">
+  <img class="card__image" src="/img/coffee.webp" alt="Artisan blend coffee bag" />
+  <div class="card__body">
+    <h3 class="card__title">Signature Dark Roast</h3>
+    <p class="card__description">Notes of dark chocolate, toasted hazelnut, and caramel.</p>
+    <div class="card__footer">
+      <span class="card__price">$18.00</span>
+      <button class="btn btn--primary btn--sm">Add to Cart</button>
+    </div>
+  </div>
+</article>
+```

package/.agents/brand/design.md

@@ -0,0 +1,45 @@
+# 🎨 Brand Identity, Design Tokens & UI Architecture
+
+> **Purpose**: Single source of truth for visual identity, design tokens, component states, and responsive styling.
+
+---
+
+## 1. Token Architecture
+
+All design tokens are defined in `./.agents/brand/tokens/` in W3C DTCG format and mapped to CSS custom properties.
+
+```
+.agents/brand/tokens/
+├── colors.json          # OKLCH color palettes (Light & Dark modes)
+├── typography.json      # Fluid typography scales via clamp()
+├── spacing.json         # 4px/8px baseline grid
+├── radii.json           # Border radii tokens
+├── shadows.json         # Elevation & depth layers
+├── motion.json          # Durations, easings, spring configs
+└── base.css             # Compiled CSS Custom Properties
+```
+
+---
+
+## 2. The 7 Non-Negotiable UI Component States
+
+Every interactive component and page must explicitly handle and render all 7 states:
+
+| State | Design & Engineering Requirement |
+| :--- | :--- |
+| **1. Default** | Clean resting state with tokenized colors, padding, and typography. |
+| **2. Loading** | **Full Skeleton UI** mirroring actual content layout. Never render a raw isolated spinner. |
+| **3. Empty** | Friendly, helpful empty-state copy with an immediate primary CTA (e.g., *"Create your first order"*). |
+| **4. Error** | **Inline error message with a retry button**. Do not rely on evanescent toasts alone; never swallow errors. |
+| **5. Focus** | **2px high-contrast visible focus ring** (`outline: 2px solid var(--color-primary); outline-offset: 2px;`). Never `outline: none`. |
+| **6. Disabled** | `opacity: 0.6`, `cursor: not-allowed`, pointer events suppressed, zero hover animations. |
+| **7. Mobile (<640px)** | Stacks vertically, full-width touch-friendly CTAs (minimum 44×44px hit area). |
+
+---
+
+## 3. Visual Density & Styling Rules
+
+- **Tokens Only**: Never introduce arbitrary hex codes (`#1a2b3c`) or ad-hoc pixel values (`margin: 13px`). Use CSS variables (`var(--color-primary)`) or UnoCSS/Tailwind theme tokens.
+- **Fluid Typography**: Use `clamp()` for responsive font sizes (14px–16px body, 24px–32px headings).
+- **Surface Elevation**: Layer cards and elevated modals using `--color-surface-elevated` and `--shadow-md`.
+- **Reference Screenshots**: Reference UI mocks, wireframes, and design snapshots are stored in `./.agents/brand/screenshots/`. Agents inspect these images before constructing or styling matching views.

package/.agents/brand/screenshots/README.md

@@ -0,0 +1,9 @@
+# 📸 Reference Screenshots & UI Mockups
+
+Drop reference screenshots, Figma exports, wireframes, and design snapshots into this folder.
+
+## How AI Agents Use This Directory
+1. **Visual Fidelity**: Vision-capable coding agents inspect files in this directory before styling pages, hero sections, pricing tables, or complex dashboards.
+2. **Naming Convention**:
+   - `[page-or-component-name]-[breakpoint-or-variant].png` (e.g., `hero-desktop.png`, `checkout-mobile.png`, `pricing-card-dark.png`).
+3. **Format**: PNG, JPG, or WebP.

package/.agents/brand/tokens/base.css

@@ -0,0 +1,139 @@
+# CSS Custom Properties
+
+/* base.css — Design tokens as CSS custom properties */
+/* Import all token files, export as :root variables */
+
+:root {
+  /* Colors — Primary */
+  --color-primary: oklch(0.45 0.12 60);
+  --color-primary-light: oklch(0.55 0.10 60);
+  --color-primary-dark: oklch(0.35 0.14 60);
+
+  /* Colors — Secondary & Accent */
+  --color-secondary: oklch(0.65 0.08 150);
+  --color-accent: oklch(0.70 0.15 45);
+
+  /* Colors — Surface */
+  --color-surface: oklch(0.98 0.01 85);
+  --color-surface-elevated: oklch(1.00 0.00 0);
+
+  /* Colors — Text */
+  --color-text-primary: oklch(0.20 0.02 60);
+  --color-text-secondary: oklch(0.45 0.02 60);
+  --color-text-tertiary: oklch(0.60 0.01 60);
+
+  /* Colors — Border */
+  --color-border: oklch(0.88 0.01 85);
+  --color-border-strong: oklch(0.78 0.02 85);
+
+  /* Colors — Semantic */
+  --color-success: oklch(0.65 0.18 145);
+  --color-error: oklch(0.55 0.20 25);
+  --color-warning: oklch(0.75 0.15 80);
+  --color-info: oklch(0.65 0.12 250);
+
+  /* Typography — Font Family */
+  --font-heading: 'Inter', system-ui, -apple-system, sans-serif;
+  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+
+  /* Typography — Sizes (fluid) */
+  --text-xs: clamp(0.625rem, 0.5rem + 0.25vw, 0.75rem);
+  --text-sm: clamp(0.75rem, 0.65rem + 0.25vw, 0.875rem);
+  --text-base: clamp(0.875rem, 0.8rem + 0.2vw, 1rem);
+  --text-lg: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
+  --text-xl: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
+  --text-2xl: clamp(1.25rem, 1rem + 1vw, 1.5rem);
+  --text-3xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
+  --text-4xl: clamp(1.875rem, 1.5rem + 2vw, 2.5rem);
+  --text-5xl: clamp(2.25rem, 1.8rem + 2.5vw, 3rem);
+
+  /* Typography — Weight */
+  --font-regular: 400;
+  --font-medium: 500;
+  --font-semibold: 600;
+  --font-bold: 700;
+
+  /* Typography — Line Height */
+  --leading-tight: 1.2;
+  --leading-snug: 1.375;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+
+  /* Spacing (fluid) */
+  --space-0: 0;
+  --space-1: clamp(0.25rem, 0.2rem + 0.1vw, 0.25rem);
+  --space-2: clamp(0.5rem, 0.4rem + 0.2vw, 0.5rem);
+  --space-3: clamp(0.75rem, 0.6rem + 0.3vw, 0.75rem);
+  --space-4: clamp(1rem, 0.8rem + 0.4vw, 1rem);
+  --space-5: clamp(1.25rem, 1rem + 0.5vw, 1.25rem);
+  --space-6: clamp(1.5rem, 1.2rem + 0.6vw, 1.5rem);
+  --space-8: clamp(2rem, 1.6rem + 0.8vw, 2rem);
+  --space-10: clamp(2.5rem, 2rem + 1vw, 2.5rem);
+  --space-12: clamp(3rem, 2.4rem + 1.2vw, 3rem);
+  --space-16: clamp(4rem, 3.2rem + 1.6vw, 4rem);
+  --space-20: clamp(5rem, 4rem + 2vw, 5rem);
+  --space-24: clamp(6rem, 4.8rem + 2.4vw, 6rem);
+
+  /* Radius */
+  --radius-none: 0;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-full: 9999px;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.07), 0 2px 4px -2px oklch(0 0 0 / 0.05);
+  --shadow-lg: 0 10px 15px -3px oklch(0 0 0 / 0.08), 0 4px 6px -4px oklch(0 0 0 / 0.04);
+  --shadow-xl: 0 20px 25px -5px oklch(0 0 0 / 0.1), 0 8px 10px -6px oklch(0 0 0 / 0.04);
+
+  /* Motion — Duration */
+  --duration-instant: 0ms;
+  --duration-fast: 100ms;
+  --duration-normal: 200ms;
+  --duration-slow: 350ms;
+  --duration-slower: 500ms;
+
+  /* Motion — Easing */
+  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+/* Dark mode overrides */
+[data-theme="dark"] {
+  --color-surface: oklch(0.15 0.01 60);
+  --color-surface-elevated: oklch(0.20 0.01 60);
+  --color-text-primary: oklch(0.95 0.01 85);
+  --color-text-secondary: oklch(0.75 0.01 85);
+  --color-text-tertiary: oklch(0.55 0.01 85);
+  --color-border: oklch(0.25 0.01 60);
+  --color-border-strong: oklch(0.35 0.01 60);
+}
+
+/* System preference fallback */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --color-surface: oklch(0.15 0.01 60);
+    --color-surface-elevated: oklch(0.20 0.01 60);
+    --color-text-primary: oklch(0.95 0.01 85);
+    --color-text-secondary: oklch(0.75 0.01 85);
+    --color-text-tertiary: oklch(0.55 0.01 85);
+    --color-border: oklch(0.25 0.01 60);
+    --color-border-strong: oklch(0.35 0.01 60);
+  }
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/.agents/brand/tokens/colors.json

@@ -0,0 +1,127 @@
+# Color Tokens
+
+{
+  "$schema": "https://design-tokens.github.io/community-group/format/",
+  "color": {
+    "primary": {
+      "default": {
+        "$type": "color",
+        "$value": "oklch(0.45 0.12 60)",
+        "$description": "Brand brown — CTAs, key actions"
+      },
+      "light": {
+        "$type": "color",
+        "$value": "oklch(0.55 0.10 60)",
+        "$description": "Hover states, lighter accents"
+      },
+      "dark": {
+        "$type": "color",
+        "$value": "oklch(0.35 0.14 60)",
+        "$description": "Active states, dark accents"
+      }
+    },
+    "secondary": {
+      "$type": "color",
+      "$value": "oklch(0.65 0.08 150)",
+      "$description": "Secondary brand, supporting elements"
+    },
+    "accent": {
+      "$type": "color",
+      "$value": "oklch(0.70 0.15 45)",
+      "$description": "Warm accent, highlights, offers"
+    },
+    "surface": {
+      "default": {
+        "$type": "color",
+        "$value": "oklch(0.98 0.01 85)",
+        "$description": "Page background"
+      },
+      "elevated": {
+        "$type": "color",
+        "$value": "oklch(1.00 0.00 0)",
+        "$description": "Cards, modals, elevated layers"
+      }
+    },
+    "text": {
+      "primary": {
+        "$type": "color",
+        "$value": "oklch(0.20 0.02 60)",
+        "$description": "Headings, primary text"
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "oklch(0.45 0.02 60)",
+        "$description": "Body text, descriptions"
+      },
+      "tertiary": {
+        "$type": "color",
+        "$value": "oklch(0.60 0.01 60)",
+        "$description": "Placeholders, captions"
+      }
+    },
+    "border": {
+      "default": {
+        "$type": "color",
+        "$value": "oklch(0.88 0.01 85)"
+      },
+      "strong": {
+        "$type": "color",
+        "$value": "oklch(0.78 0.02 85)"
+      }
+    },
+    "semantic": {
+      "success": {
+        "$type": "color",
+        "$value": "oklch(0.65 0.18 145)",
+        "$description": "Confirmations, in-stock"
+      },
+      "error": {
+        "$type": "color",
+        "$value": "oklch(0.55 0.20 25)",
+        "$description": "Errors, destructive actions"
+      },
+      "warning": {
+        "$type": "color",
+        "$value": "oklch(0.75 0.15 80)",
+        "$description": "Warnings, attention"
+      },
+      "info": {
+        "$type": "color",
+        "$value": "oklch(0.65 0.12 250)",
+        "$description": "Informational, links"
+      }
+    },
+    "dark": {
+      "surface": {
+        "$type": "color",
+        "$value": "oklch(0.15 0.01 60)"
+      },
+      "surface-elevated": {
+        "$type": "color",
+        "$value": "oklch(0.20 0.01 60)"
+      },
+      "text-primary": {
+        "$type": "color",
+        "$value": "oklch(0.95 0.01 85)"
+      },
+      "text-secondary": {
+        "$type": "color",
+        "$value": "oklch(0.75 0.01 85)"
+      },
+      "text-tertiary": {
+        "$type": "color",
+        "$value": "oklch(0.55 0.01 85)"
+      },
+      "border": {
+        "$type": "color",
+        "$value": "oklch(0.25 0.01 60)"
+      },
+      "border-strong": {
+        "$type": "color",
+        "$value": "oklch(0.35 0.01 60)"
+      }
+    }
+  }
+}
+
+

package/.agents/brand/tokens/motion.json

@@ -0,0 +1,61 @@
+# Motion Tokens
+
+{
+  "$schema": "https://design-tokens.github.io/community-group/format/",
+  "motion": {
+    "duration": {
+      "instant": {
+        "$type": "duration",
+        "$value": "0ms",
+        "$description": "No animation"
+      },
+      "fast": {
+        "$type": "duration",
+        "$value": "100ms",
+        "$description": "Hover, focus, micro-interactions"
+      },
+      "normal": {
+        "$type": "duration",
+        "$value": "200ms",
+        "$description": "Transitions, reveals"
+      },
+      "slow": {
+        "$type": "duration",
+        "$value": "350ms",
+        "$description": "Modals, drawers, page transitions"
+      },
+      "slower": {
+        "$type": "duration",
+        "$value": "500ms",
+        "$description": "Complex sequences, hero animations"
+      }
+    },
+    "easing": {
+      "default": {
+        "$type": "cubicBezier",
+        "$value": "cubic-bezier(0.4, 0, 0.2, 1)",
+        "$description": "Standard easing"
+      },
+      "in": {
+        "$type": "cubicBezier",
+        "$value": "cubic-bezier(0.4, 0, 1, 1)",
+        "$description": "Accelerate"
+      },
+      "out": {
+        "$type": "cubicBezier",
+        "$value": "cubic-bezier(0, 0, 0.2, 1)",
+        "$description": "Decelerate"
+      },
+      "spring": {
+        "$type": "cubicBezier",
+        "$value": "cubic-bezier(0.34, 1.56, 0.64, 1)",
+        "$description": "Bouncy spring for playful elements"
+      }
+    },
+    "reducedMotion": {
+      "$type": "string",
+      "$value": "prefers-reduced-motion: reduce",
+      "$description": "All motion respects user preference"
+    }
+  }
+}

package/.agents/brand/tokens/radii.json

@@ -0,0 +1,36 @@
+# Border Radius Tokens
+
+{
+  "$schema": "https://design-tokens.github.io/community-group/format/",
+  "radius": {
+    "none": {
+      "$type": "dimension",
+      "$value": "0"
+    },
+    "sm": {
+      "$type": "dimension",
+      "$value": "0.25rem",
+      "$description": "Buttons, inputs — 4px"
+    },
+    "md": {
+      "$type": "dimension",
+      "$value": "0.5rem",
+      "$description": "Cards, containers — 8px"
+    },
+    "lg": {
+      "$type": "dimension",
+      "$value": "0.75rem",
+      "$description": "Modals, large cards — 12px"
+    },
+    "xl": {
+      "$type": "dimension",
+      "$value": "1rem",
+      "$description": "Hero cards, feature blocks — 16px"
+    },
+    "full": {
+      "$type": "dimension",
+      "$value": "9999px",
+      "$description": "Pills, avatars, circular"
+    }
+  }
+}

package/.agents/brand/tokens/shadows.json

@@ -0,0 +1,27 @@
+# Shadow Tokens
+
+{
+  "$schema": "https://design-tokens.github.io/community-group/format/",
+  "shadow": {
+    "sm": {
+      "$type": "shadow",
+      "$value": "0 1px 2px oklch(0 0 0 / 0.05)",
+      "$description": "Subtle lift"
+    },
+    "md": {
+      "$type": "shadow",
+      "$value": "0 4px 6px -1px oklch(0 0 0 / 0.07), 0 2px 4px -2px oklch(0 0 0 / 0.05)",
+      "$description": "Cards, dropdowns"
+    },
+    "lg": {
+      "$type": "shadow",
+      "$value": "0 10px 15px -3px oklch(0 0 0 / 0.08), 0 4px 6px -4px oklch(0 0 0 / 0.04)",
+      "$description": "Modals, popovers"
+    },
+    "xl": {
+      "$type": "shadow",
+      "$value": "0 20px 25px -5px oklch(0 0 0 / 0.1), 0 8px 10px -6px oklch(0 0 0 / 0.04)",
+      "$description": "Floating elements"
+    }
+  }
+}

package/.agents/brand/tokens/spacing.json

@@ -0,0 +1,68 @@
+# Spacing Tokens
+
+{
+  "$schema": "https://design-tokens.github.io/community-group/format/",
+  "space": {
+    "0": { "$type": "dimension", "$value": "0" },
+    "1": {
+      "$type": "dimension",
+      "$value": "clamp(0.25rem, 0.2rem + 0.1vw, 0.25rem)",
+      "$description": "Tight gaps"
+    },
+    "2": {
+      "$type": "dimension",
+      "$value": "clamp(0.5rem, 0.4rem + 0.2vw, 0.5rem)",
+      "$description": "Small gaps"
+    },
+    "3": {
+      "$type": "dimension",
+      "$value": "clamp(0.75rem, 0.6rem + 0.3vw, 0.75rem)",
+      "$description": "Default gaps"
+    },
+    "4": {
+      "$type": "dimension",
+      "$value": "clamp(1rem, 0.8rem + 0.4vw, 1rem)",
+      "$description": "Medium gaps"
+    },
+    "5": {
+      "$type": "dimension",
+      "$value": "clamp(1.25rem, 1rem + 0.5vw, 1.25rem)",
+      "$description": "Section spacing"
+    },
+    "6": {
+      "$type": "dimension",
+      "$value": "clamp(1.5rem, 1.2rem + 0.6vw, 1.5rem)",
+      "$description": "Large gaps"
+    },
+    "8": {
+      "$type": "dimension",
+      "$value": "clamp(2rem, 1.6rem + 0.8vw, 2rem)",
+      "$description": "Section margins"
+    },
+    "10": {
+      "$type": "dimension",
+      "$value": "clamp(2.5rem, 2rem + 1vw, 2.5rem)",
+      "$description": "Large section margins"
+    },
+    "12": {
+      "$type": "dimension",
+      "$value": "clamp(3rem, 2.4rem + 1.2vw, 3rem)",
+      "$description": "Hero spacing"
+    },
+    "16": {
+      "$type": "dimension",
+      "$value": "clamp(4rem, 3.2rem + 1.6vw, 4rem)",
+      "$description": "Page section gaps"
+    },
+    "20": {
+      "$type": "dimension",
+      "$value": "clamp(5rem, 4rem + 2vw, 5rem)",
+      "$description": "Major section breaks"
+    },
+    "24": {
+      "$type": "dimension",
+      "$value": "clamp(6rem, 4.8rem + 2.4vw, 6rem)",
+      "$description": "Page-level spacing"
+    }
+  }
+}

package/.agents/brand/tokens/typography.json

@@ -0,0 +1,79 @@
+# Typography Tokens
+
+{
+  "$schema": "https://design-tokens.github.io/community-group/format/",
+  "fontFamily": {
+    "heading": {
+      "$type": "fontFamily",
+      "$value": "'Inter', system-ui, -apple-system, sans-serif"
+    },
+    "body": {
+      "$type": "fontFamily",
+      "$value": "'Inter', system-ui, -apple-system, sans-serif"
+    },
+    "mono": {
+      "$type": "fontFamily",
+      "$value": "'JetBrains Mono', ui-monospace, monospace"
+    }
+  },
+  "fontSize": {
+    "xs": {
+      "$type": "dimension",
+      "$value": "clamp(0.625rem, 0.5rem + 0.25vw, 0.75rem)",
+      "$description": "Captions, badges — 10-12px"
+    },
+    "sm": {
+      "$type": "dimension",
+      "$value": "clamp(0.75rem, 0.65rem + 0.25vw, 0.875rem)",
+      "$description": "Small text, labels — 12-14px"
+    },
+    "base": {
+      "$type": "dimension",
+      "$value": "clamp(0.875rem, 0.8rem + 0.2vw, 1rem)",
+      "$description": "Body text — 14-16px"
+    },
+    "lg": {
+      "$type": "dimension",
+      "$value": "clamp(1rem, 0.9rem + 0.3vw, 1.125rem)",
+      "$description": "Large body, intro — 16-18px"
+    },
+    "xl": {
+      "$type": "dimension",
+      "$value": "clamp(1.125rem, 1rem + 0.5vw, 1.25rem)",
+      "$description": "Subheadings — 18-20px"
+    },
+    "2xl": {
+      "$type": "dimension",
+      "$value": "clamp(1.25rem, 1rem + 1vw, 1.5rem)",
+      "$description": "Section headings — 20-24px"
+    },
+    "3xl": {
+      "$type": "dimension",
+      "$value": "clamp(1.5rem, 1.2rem + 1.5vw, 2rem)",
+      "$description": "Page headings — 24-32px"
+    },
+    "4xl": {
+      "$type": "dimension",
+      "$value": "clamp(1.875rem, 1.5rem + 2vw, 2.5rem)",
+      "$description": "Hero headings — 30-40px"
+    },
+    "5xl": {
+      "$type": "dimension",
+      "$value": "clamp(2.25rem, 1.8rem + 2.5vw, 3rem)",
+      "$description": "Display headings — 36-48px"
+    }
+  },
+  "fontWeight": {
+    "regular": { "$type": "fontWeight", "$value": 400 },
+    "medium": { "$type": "fontWeight", "$value": 500 },
+    "semibold": { "$type": "fontWeight", "$value": 600 },
+    "bold": { "$type": "fontWeight", "$value": 700 }
+  },
+  "lineHeight": {
+    "tight": { "$type": "number", "$value": 1.2, "$description": "Headings" },
+    "snug": { "$type": "number", "$value": 1.375, "$description": "Subheadings" },
+    "normal": { "$type": "number", "$value": 1.5, "$description": "Body text" },
+    "relaxed": { "$type": "number", "$value": 1.625, "$description": "Long-form content" }
+  }
+}
+