get-shit-pretty 0.5.0 → 0.5.2

package/gsp/skills/gsp-style/SKILL.md

@@ -30,13 +30,11 @@ Apply a named style preset to produce production-ready design tokens and foundat
 @${CLAUDE_SKILL_DIR}/styles/INDEX.yml
 @${CLAUDE_SKILL_DIR}/../../references/design-tokens.md
 @${CLAUDE_SKILL_DIR}/../../references/chunk-format.md
-@${CLAUDE_SKILL_DIR}/../../templates/phases/system.md
+@${CLAUDE_SKILL_DIR}/../../templates/phases/patterns.md
 </execution_context>
 
 <rules>
 - Always use `AskUserQuestion` for user interaction — never prompt via plain text
-- Presets are the source of truth — expand tokens deterministically, don't improvise values
-- Foundation chunks follow `references/chunk-format.md` format exactly
 - `tokens.json` follows W3C Design Tokens format from `references/design-tokens.md`
 - When mixing styles, later style values override earlier ones (last-wins precedence)
 - Never mix clashing styles — check the compatibility matrix first
@@ -163,18 +161,18 @@ Determine where to write the system output:
 
 ### Within a brand
 If a brand context exists (`.design/branding/{brand}/`):
-- Write to `{BRAND_PATH}/system/`
-- This replaces the system phase of the branding diamond
+- Write to `{BRAND_PATH}/patterns/`
+- This replaces the patterns phase of the branding diamond
 
 ### Within a project (quick mode)
 If invoked from a project context (`.design/projects/{project}/`):
 - Check if a `brand.ref` exists pointing to a brand with a completed system
-- If no brand system exists, write to `.design/branding/_style-{preset-name}/system/`
+- If no brand system exists, write to `.design/branding/_style-{preset-name}/patterns/`
 - Create a minimal brand directory with just the system output
 - Update the project's `brand.ref` to point to this auto-generated brand
 
 ### Standalone (no .design/ context)
-- Write to `.design/branding/_style-{preset-name}/system/`
+- Write to `.design/branding/_style-{preset-name}/patterns/`
 - Create minimal brand directory structure
 
 ## Step 5: Preview mode (`--preview`)
@@ -221,226 +219,25 @@ Stop here. Do not write any files.
 
 Transform the YAML preset tokens into the full W3C Design Tokens JSON structure.
 
-### Color tokens
-Map preset colors to the W3C structure with `$value` and `$type` fields:
-
-```json
-{
-  "color": {
-    "brand": {
-      "primary": { "$value": "{preset.color.primary}", "$type": "color" },
-      "secondary": { "$value": "{preset.color.secondary}", "$type": "color" },
-      "accent": { "$value": "{preset.color.accent}", "$type": "color" }
-    },
-    "semantic": {
-      "background": { "$value": "{preset.color.background}", "$type": "color" },
-      "surface": { "$value": "{preset.color.surface}", "$type": "color" },
-      "on-primary": { "$value": "{preset.color.on-primary}", "$type": "color" },
-      "on-background": { "$value": "{preset.color.on-background}", "$type": "color" },
-      "error": { "$value": "{preset.color.error}", "$type": "color" },
-      "success": { "$value": "{preset.color.success}", "$type": "color" },
-      "warning": { "$value": "{preset.color.warning}", "$type": "color" },
-      "info": { "$value": "{preset.color.info}", "$type": "color" }
-    }
-  }
-}
-```
-
-### Typography tokens
-```json
-{
-  "font": {
-    "family": {
-      "primary": { "$value": "{preset.typography.font-family-primary}", "$type": "fontFamily" },
-      "mono": { "$value": "{preset.typography.font-family-mono}", "$type": "fontFamily" }
-    }
-  },
-  "typography": {
-    "display": {
-      "$value": {
-        "fontFamily": "{font.family.primary}",
-        "fontSize": "48px",
-        "fontWeight": "{preset.typography.font-weight-heading}",
-        "lineHeight": 1.1,
-        "letterSpacing": "-0.02em"
-      },
-      "$type": "typography"
-    },
-    "heading-1": {
-      "$value": {
-        "fontFamily": "{font.family.primary}",
-        "fontSize": "36px",
-        "fontWeight": "{preset.typography.font-weight-heading}",
-        "lineHeight": 1.2,
-        "letterSpacing": "-0.01em"
-      },
-      "$type": "typography"
-    },
-    "heading-2": {
-      "$value": {
-        "fontFamily": "{font.family.primary}",
-        "fontSize": "28px",
-        "fontWeight": "{preset.typography.font-weight-heading}",
-        "lineHeight": 1.3,
-        "letterSpacing": "0"
-      },
-      "$type": "typography"
-    },
-    "heading-3": {
-      "$value": {
-        "fontFamily": "{font.family.primary}",
-        "fontSize": "22px",
-        "fontWeight": "{preset.typography.font-weight-heading}",
-        "lineHeight": 1.4,
-        "letterSpacing": "0"
-      },
-      "$type": "typography"
-    },
-    "body-large": {
-      "$value": {
-        "fontFamily": "{font.family.primary}",
-        "fontSize": "18px",
-        "fontWeight": "{preset.typography.font-weight-body}",
-        "lineHeight": "{preset.typography.line-height-base}",
-        "letterSpacing": "0"
-      },
-      "$type": "typography"
-    },
-    "body": {
-      "$value": {
-        "fontFamily": "{font.family.primary}",
-        "fontSize": "{preset.typography.font-size-base}",
-        "fontWeight": "{preset.typography.font-weight-body}",
-        "lineHeight": "{preset.typography.line-height-base}",
-        "letterSpacing": "0"
-      },
-      "$type": "typography"
-    },
-    "body-small": {
-      "$value": {
-        "fontFamily": "{font.family.primary}",
-        "fontSize": "14px",
-        "fontWeight": "{preset.typography.font-weight-body}",
-        "lineHeight": "{preset.typography.line-height-base}",
-        "letterSpacing": "0"
-      },
-      "$type": "typography"
-    },
-    "caption": {
-      "$value": {
-        "fontFamily": "{font.family.primary}",
-        "fontSize": "12px",
-        "fontWeight": "{preset.typography.font-weight-body}",
-        "lineHeight": 1.4,
-        "letterSpacing": "0.01em"
-      },
-      "$type": "typography"
-    },
-    "overline": {
-      "$value": {
-        "fontFamily": "{font.family.primary}",
-        "fontSize": "11px",
-        "fontWeight": 600,
-        "lineHeight": 1.5,
-        "letterSpacing": "0.08em"
-      },
-      "$type": "typography"
-    }
-  }
-}
-```
-
-### Spacing tokens
-Generate from the preset's spacing scale:
-
-```json
-{
-  "spacing": {
-    "xs": { "$value": "4px", "$type": "dimension" },
-    "sm": { "$value": "8px", "$type": "dimension" },
-    "md": { "$value": "16px", "$type": "dimension" },
-    "lg": { "$value": "24px", "$type": "dimension" },
-    "xl": { "$value": "32px", "$type": "dimension" },
-    "2xl": { "$value": "48px", "$type": "dimension" },
-    "3xl": { "$value": "64px", "$type": "dimension" },
-    "4xl": { "$value": "96px", "$type": "dimension" }
-  }
-}
-```
+### Token expansion mapping
 
-### Shadow tokens
-Map preset elevation values to W3C shadow format. Parse the CSS shadow shorthand from the preset into the structured format:
-
-```json
-{
-  "shadow": {
-    "sm": { "$value": "{parsed from preset.elevation.shadow-sm}", "$type": "shadow" },
-    "md": { "$value": "{parsed from preset.elevation.shadow-md}", "$type": "shadow" },
-    "lg": { "$value": "{parsed from preset.elevation.shadow-lg}", "$type": "shadow" },
-    "xl": { "$value": "{parsed from preset.elevation.shadow-xl}", "$type": "shadow" }
-  }
-}
-```
+Transform each YAML preset section into W3C Design Tokens JSON with `$value` and `$type` fields:
 
-### Border radius tokens
-```json
-{
-  "radius": {
-    "none": { "$value": "0px", "$type": "dimension" },
-    "sm": { "$value": "{preset.shape.border-radius-sm}", "$type": "dimension" },
-    "md": { "$value": "{preset.shape.border-radius-md}", "$type": "dimension" },
-    "lg": { "$value": "{preset.shape.border-radius-lg}", "$type": "dimension" },
-    "full": { "$value": "9999px", "$type": "dimension" }
-  }
-}
-```
+| Preset section | Token path | $type | Notes |
+|---------------|------------|-------|-------|
+| `color.*` | `color.brand.{key}`, `color.semantic.{key}` | `color` | Split into brand (primary, secondary, accent) and semantic (background, surface, on-primary, on-background, error, success, warning, info) |
+| `typography.*` | `font.family.{primary,mono}` | `fontFamily` | — |
+| `typography.*` | `typography.{level}` | `typography` | Composite: fontFamily, fontSize, fontWeight, lineHeight, letterSpacing. 9 levels: display, heading-1 through heading-3, body-large, body, body-small, caption, overline |
+| `spacing.*` | `spacing.{xs,sm,md,lg,xl,2xl,3xl,4xl}` | `dimension` | — |
+| `elevation.*` | `shadow.{sm,md,lg,xl}` | `shadow` | Parse CSS shadow shorthand into structured format |
+| `shape.*` | `radius.{none,sm,md,lg,full}` | `dimension` | `full` = 9999px |
+| `motion.*` | `motion.duration.{fast,normal}`, `motion.easing.default` | `duration`, `cubicBezier` | — |
 
-### Style-specific token groups
-If the preset has extra token groups (e.g., `glass` for glassmorphism, `glow` for cyberpunk, `gradient` for vaporwave, `syntax` for terminal), include them under an `$extensions` key:
-
-```json
-{
-  "$extensions": {
-    "gsp-style": "{preset-name}",
-    "gsp-style-specific": {
-      // style-specific tokens preserved as-is from the preset
-    }
-  }
-}
-```
+**Style-specific tokens:** If preset has extra groups (e.g., `glass`, `glow`, `gradient`, `syntax`), include under `$extensions.gsp-style-specific`.
 
-### Dark mode
-If the preset has a `dark_mode` section, include it under `$extensions.dark`:
-
-```json
-{
-  "$extensions": {
-    "dark": {
-      "color": {
-        "semantic": {
-          "background": { "$value": "{preset.dark_mode.color.background}" },
-          "surface": { "$value": "{preset.dark_mode.color.surface}" }
-        }
-      }
-    }
-  }
-}
-```
+**Dark mode:** If preset has `dark_mode` section, include under `$extensions.dark` with semantic color overrides.
 
-### Motion tokens
-```json
-{
-  "motion": {
-    "duration": {
-      "fast": { "$value": "{preset.motion.duration-fast}", "$type": "duration" },
-      "normal": { "$value": "{preset.motion.duration-normal}", "$type": "duration" }
-    },
-    "easing": {
-      "default": { "$value": "{preset.motion.easing}", "$type": "cubicBezier" }
-    }
-  }
-}
-```
+**Extensions metadata:** Always include `$extensions.gsp-style` with the preset name.
 
 ## Step 7: Write tokens.json
 
@@ -507,7 +304,7 @@ Write `{OUTPUT_PATH}/INDEX.md`:
 ## Step 10: Update state
 
 If a brand STATE.md exists at the brand path:
-- Set system phase status to `complete`
+- Set patterns phase status to `complete`
 - Record style preset name and completion date
 - Set Prettiness Level to 60% (foundations only, no components)
 

package/gsp/skills/gsp-typescale/SKILL.md

@@ -34,15 +34,12 @@ Generate a production-ready typography system with fluid responsive sizing, vert
 
 <rules>
 - Always use `AskUserQuestion` for user interaction — never prompt via plain text
-- Scales are deterministic — same inputs always produce the same output
 - Foundation chunks follow `references/chunk-format.md` format exactly
 - All sizes include px, rem, AND fluid clamp() values for headings
 - Line heights snap to a 4px grid for vertical rhythm (body 24px = 6 × 4px)
 - Letter spacing follows the size-dependent curve: negative for large type, positive for small type, wide for all-caps (see reference)
-- When loading from a style preset, extract only typography-related tokens
 - CSS output defaults to Tailwind v4 / shadcn format unless `--vanilla` is passed
 - WCAG 2.2 AA compliance: body line-height ≥ 1.5, layout must survive SC 1.4.12 text spacing overrides
-- Fluid type clamp() must always use rem-based min/max — never pure vw (breaks zoom per WCAG 1.4.4)
 </rules>
 
 <process>
@@ -291,133 +288,17 @@ If a brand context exists (`.design/branding/{brand}/`):
 
 Write `{OUTPUT_PATH}/typography.md` as a foundation chunk per `references/chunk-format.md`:
 
-```markdown
-# Typography
+The typography.md chunk must include these sections with calculated values from Step 3:
 
-> Phase: identity | Brand: {name} | Generated: {DATE}
-
----
-
-## Font Families
-
-| Role | Family | Variable | Source | Fallback stack |
-|------|--------|----------|--------|----------------|
-| Primary | {family} | {yes/no} | Google Fonts | {system fallbacks} |
-| Secondary | {family or "—"} | {yes/no} | {source} | {system fallbacks} |
-| Monospace | {family or "Geist Mono"} | {yes/no} | Google Fonts | ui-monospace, monospace |
-
-**Google Fonts URL:**
-`https://fonts.googleapis.com/css2?family={primary}:wght@{weights}&family={mono}:wght@400;700&display=swap`
-
-**Self-hosting recommended** for production — eliminates third-party DNS lookup, improves GDPR compliance, and allows precise subsetting. Use WOFF2 only.
-
-**Performance budget:** < 100KB total font weight, 2-3 weights max. If using a variable font, a single file replaces all static weights (< 150KB).
-
-## Type Scale
-
-Base: {base}px | Ratio: {ratio} ({ratio name}) | Grid: {grid}px
-
-| Level | px | rem | Fluid | Weight | Line height | Letter spacing | Tailwind |
-|-------|----|-----|-------|--------|-------------|----------------|----------|
-| Display | {px} | {rem} | clamp({...}) | {heading wt} | {lh}px / {unitless} | -0.025em | text-[{rem}rem] tracking-tighter |
-| H1 | {px} | {rem} | clamp({...}) | {heading wt} | {lh}px / {unitless} | -0.025em | text-4xl tracking-tight font-extrabold |
-| H2 | {px} | {rem} | clamp({...}) | {heading wt} | {lh}px / {unitless} | -0.025em | text-3xl tracking-tight font-semibold |
-| H3 | {px} | {rem} | clamp({...}) | {heading wt} | {lh}px / {unitless} | -0.015em | text-2xl tracking-tight font-semibold |
-| H4 | {px} | {rem} | clamp({...}) | {heading wt} | {lh}px / {unitless} | -0.01em | text-xl tracking-tight font-semibold |
-| body-large | {px} | {rem} | — | {body wt} | {lh}px / {unitless} | 0 | text-lg |
-| body | {base}px | 1rem | — | {body wt} | {lh}px / {unitless} | 0 | text-base leading-7 |
-| body-small | {px} | {rem} | — | {body wt} | {lh}px / {unitless} | 0.01em | text-sm |
-| caption | {px} | {rem} | — | {body wt} | {lh}px / {unitless} | 0.015em | text-xs |
-| overline | {px} | {rem} | — | 600 | {lh}px / {unitless} | 0.1em | text-xs uppercase tracking-wider |
-
-## shadcn/ui Typography Classes
-
-Ready-to-use className strings for shadcn projects. These match the calculated scale above:
-
-```tsx
-// Headings
-<h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
-<h2 className="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0">
-<h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">
-<h4 className="scroll-m-20 text-xl font-semibold tracking-tight">
-
-// Body
-<p className="leading-7 [&:not(:first-child)]:mt-6">
-<p className="text-xl text-muted-foreground">          {/* Lead */}
-<p className="text-lg font-semibold">                  {/* Large */}
-<p className="text-sm font-medium leading-none">       {/* Small */}
-<p className="text-sm text-muted-foreground">          {/* Muted */}
-
-// Special
-<blockquote className="mt-6 border-l-2 pl-6 italic">
-<code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
-<span className="text-xs uppercase tracking-wider font-semibold"> {/* Overline */}
-```
-
-To customize these for your exact scale, extend Tailwind with the CSS file below.
-
-## Vertical Rhythm
-
-Grid unit: {grid}px | Body line-height: {body lh}px ({unitless})
-
-All line-heights are snapped to {grid}px multiples. The body line-height ({body lh}px) serves as the spacing anchor — use multiples of it for consistent vertical spacing:
-
-| Token | Value | Lines | Usage |
-|-------|-------|-------|-------|
-| space-xs | {grid}px | {fraction} | Inline element gaps |
-| space-sm | {grid*2}px | {fraction} | Related element gaps |
-| space-md | {body lh / 2}px | 0.5 | Compact section spacing |
-| space-lg | {body lh}px | 1 | Default paragraph spacing |
-| space-xl | {body lh * 1.5}px | 1.5 | Section breaks |
-| space-2xl | {body lh * 2}px | 2 | Major section breaks |
-
-CSS `lh` and `rlh` units (94%+ browser support) can reference line-height directly:
-```css
-p + p { margin-block: 1lh; }        /* one line of spacing */
-section { padding-block: 2rlh; }    /* two root-line-heights */
-```
-
-## Weights
-
-| Name | Value | Usage |
-|------|-------|-------|
-| Regular | {body weight} | Body text, descriptions |
-| Medium | 500 | Emphasized body, nav items, labels |
-| Semibold | 600 | shadcn heading default (H2-H4), overlines |
-| Bold / Extrabold | {heading weight} | H1, page titles, CTAs |
-
-## Accessibility
-
-This scale meets WCAG 2.2 AA requirements:
-- Body line-height ≥ 1.5× font size (SC 1.4.12) ✓
-- Layout survives 200% zoom (SC 1.4.4) — fluid clamp() uses rem bounds ✓
-- Minimum text size: {caption px}px (practical floor 12px) ✓
-- Max line length recommendation: 60–75 characters (`max-w-prose` in Tailwind = 65ch)
-
-**SC 1.4.12 resilience:** Layout must not break when users override to: line-height ≥ 1.5×, letter-spacing ≥ 0.12×, word-spacing ≥ 0.16×, paragraph-spacing ≥ 2× font size. Avoid fixed-height text containers.
-
-## Variable Font Notes
-
-{If the primary font is a variable font:}
-- Enable optical sizing: `font-optical-sizing: auto` (browser maps opsz to font-size automatically)
-- Dark mode grade adjustment: `@media (prefers-color-scheme: dark) { body { font-variation-settings: 'GRAD' -25; } }` — reduces apparent weight of light-on-dark text
-- Use `font-variation-settings: 'wght' {value}` for precise weight control beyond standard keywords
-{End if}
-
-## Modern CSS Enhancements
-
-```css
-h1, h2, h3, h4 { text-wrap: balance; }  /* Auto-balance heading line lengths */
-p { text-wrap: pretty; }                 /* Avoid orphans in paragraphs */
-```
-
----
-
-## Related
-
-- [tailwind.typography.css](./tailwind.typography.css)
-- [palettes.json](./palettes.json)
-```
+- **Font Families** — table with Role, Family, Variable (yes/no), Source, Fallback stack. Include Google Fonts URL and self-hosting note.
+- **Type Scale** — table with Level, px, rem, Fluid clamp(), Weight, Line height (px + unitless), Letter spacing, Tailwind class. All 10 levels: Display, H1-H4, body-large, body, body-small, caption, overline.
+- **shadcn/ui Typography Classes** — ready-to-use className strings for headings, body, and special elements (blockquote, code, overline). Customize values to match the calculated scale.
+- **Vertical Rhythm** — grid unit, body line-height as spacing anchor, spacing token table (space-xs through space-2xl) with values, lines, and usage. Include CSS `lh`/`rlh` unit examples.
+- **Weights** — table mapping Regular/Medium/Semibold/Bold to values and usage.
+- **Accessibility** — WCAG 2.2 AA compliance notes: body line-height ≥ 1.5, zoom survival, minimum text size, max line length. SC 1.4.12 resilience note.
+- **Variable Font Notes** — conditional section: optical sizing, dark mode grade adjustment, precise weight control.
+- **Modern CSS Enhancements** — `text-wrap: balance` for headings, `text-wrap: pretty` for paragraphs.
+- **Related** — links to companion files.
 
 ## Step 7: Write CSS output
 
@@ -425,201 +306,24 @@ p { text-wrap: pretty; }                 /* Avoid orphans in paragraphs */
 
 Write `{OUTPUT_PATH}/tailwind.typography.css` — extends Tailwind v4 via `@theme` with the calculated scale. Drop into your project and import in `globals.css`:
 
-```css
-/* Typography — {font family} @ {ratio} ({ratio name})
-   Generated by /gsp:typescale | {DATE}
-   Import in globals.css: @import './tailwind.typography.css';
-   Preview: https://typescale.com/ */
-
-/* ─── Font imports ─── */
-@import url('https://fonts.googleapis.com/css2?family={primary}:wght@{weights}&family={mono}:wght@400;700&display=swap');
-
-/* ─── Tailwind v4 theme extension ─── */
-@theme {
-  /* Font families */
-  --font-sans: '{primary}', ui-sans-serif, system-ui, sans-serif;
-  --font-mono: '{mono}', ui-monospace, 'SFMono-Regular', monospace;
-
-  /* Custom font size tokens (extend Tailwind's built-in scale) */
-  --text-display: {display rem}rem;
-  --text-display--line-height: {display lh};
-  --text-display--letter-spacing: -0.025em;
-  --text-display--font-weight: {heading weight};
-
-  --text-h1: {h1 rem}rem;
-  --text-h1--line-height: {h1 lh};
-  --text-h1--letter-spacing: -0.025em;
-  --text-h1--font-weight: {heading weight};
-
-  --text-h2: {h2 rem}rem;
-  --text-h2--line-height: {h2 lh};
-  --text-h2--letter-spacing: -0.025em;
-  --text-h2--font-weight: {heading weight};
-
-  --text-h3: {h3 rem}rem;
-  --text-h3--line-height: {h3 lh};
-  --text-h3--letter-spacing: -0.015em;
-  --text-h3--font-weight: 600;
-
-  --text-h4: {h4 rem}rem;
-  --text-h4--line-height: {h4 lh};
-  --text-h4--letter-spacing: -0.01em;
-  --text-h4--font-weight: 600;
-
-  --text-body-large: {body-large rem}rem;
-  --text-body-large--line-height: {body-large lh};
-
-  --text-overline: {overline rem}rem;
-  --text-overline--line-height: {overline lh};
-  --text-overline--letter-spacing: 0.1em;
-  --text-overline--font-weight: 600;
-}
-
-/* ─── Fluid type (clamp) ─── */
-:root {
-  --fs-display: clamp({display min}rem, {display intercept}rem + {display slope}vw, {display max}rem);
-  --fs-h1: clamp({h1 min}rem, {h1 intercept}rem + {h1 slope}vw, {h1 max}rem);
-  --fs-h2: clamp({h2 min}rem, {h2 intercept}rem + {h2 slope}vw, {h2 max}rem);
-  --fs-h3: clamp({h3 min}rem, {h3 intercept}rem + {h3 slope}vw, {h3 max}rem);
-  --fs-h4: clamp({h4 min}rem, {h4 intercept}rem + {h4 slope}vw, {h4 max}rem);
-}
-
-/* ─── Typography utility classes ─── */
-/* Use these or compose with Tailwind's built-in classes */
-
-.text-display {
-  font-size: var(--fs-display);
-  line-height: {display lh};
-  letter-spacing: -0.025em;
-  font-weight: {heading weight};
-  text-wrap: balance;
-}
-
-.prose-headings h1, .text-h1 {
-  font-size: var(--fs-h1);
-  line-height: {h1 lh};
-  letter-spacing: -0.025em;
-  font-weight: {heading weight};
-  text-wrap: balance;
-}
-
-.prose-headings h2, .text-h2 {
-  font-size: var(--fs-h2);
-  line-height: {h2 lh};
-  letter-spacing: -0.025em;
-  font-weight: 600;
-  text-wrap: balance;
-}
-
-.prose-headings h3, .text-h3 {
-  font-size: var(--fs-h3);
-  line-height: {h3 lh};
-  letter-spacing: -0.015em;
-  font-weight: 600;
-  text-wrap: balance;
-}
-
-.prose-headings h4, .text-h4 {
-  font-size: var(--fs-h4);
-  line-height: {h4 lh};
-  letter-spacing: -0.01em;
-  font-weight: 600;
-  text-wrap: balance;
-}
-
-.text-body-large {
-  font-size: {body-large rem}rem;
-  line-height: {body-large lh};
-}
-
-.text-overline {
-  font-size: {overline rem}rem;
-  line-height: {overline lh};
-  letter-spacing: 0.1em;
-  font-weight: 600;
-  text-transform: uppercase;
-}
-
-/* ─── Optical sizing + dark mode (variable fonts) ─── */
-body {
-  font-optical-sizing: auto;
-}
-
-@media (prefers-color-scheme: dark) {
-  body {
-    /* Reduce apparent weight for light-on-dark text */
-    -webkit-font-smoothing: antialiased;
-  }
-}
-
-/* ─── Modern CSS enhancements ─── */
-h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
-p { text-wrap: pretty; }
-```
+The CSS file must include these sections, using calculated values from Step 3:
+
+- **Header comment** — font family, ratio name, date, import instruction
+- **Font imports** — Google Fonts `@import url()` for primary + mono families
+- **Tailwind v4 @theme extension** — `--font-sans`, `--font-mono` families, plus custom `--text-{level}` tokens for Display, H1-H4, body-large, overline (each with `--line-height`, `--letter-spacing`, `--font-weight` sub-tokens)
+- **Fluid type custom properties** — `:root` block with `--fs-display` through `--fs-h4` using `clamp()` (rem-based min/max, never pure vw — required for WCAG 1.4.4 zoom compliance)
+- **Typography utility classes** — `.text-display`, `.text-h1` through `.text-h4`, `.text-body-large`, `.text-overline` with corresponding font-size (using fluid var), line-height, letter-spacing, font-weight, and `text-wrap: balance` for headings
+- **Optical sizing + dark mode** — `font-optical-sizing: auto`, dark mode antialiasing
+- **Modern CSS** — `text-wrap: balance` on headings, `text-wrap: pretty` on paragraphs
 
 ### Vanilla mode (`--vanilla`)
 
 If `--vanilla` flag is set, write `{OUTPUT_PATH}/typescale.css` instead — plain CSS custom properties without Tailwind-specific syntax:
 
-```css
-/* Typography — {font family} @ {ratio} ({ratio name})
-   Generated by /gsp:typescale | {DATE} */
-
-@import url('https://fonts.googleapis.com/css2?family={primary}:wght@{weights}&family={mono}:wght@400;700&display=swap');
-
-:root {
-  /* Font families */
-  --font-primary: '{primary}', {fallback stack};
-  --font-secondary: '{secondary or primary}', {fallback stack};
-  --font-mono: '{mono}', ui-monospace, monospace;
-
-  /* Font weights */
-  --fw-regular: {body weight};
-  --fw-medium: 500;
-  --fw-semibold: 600;
-  --fw-bold: {heading weight};
-
-  /* Type scale — fluid */
-  --fs-display: clamp({...});
-  --fs-h1: clamp({...});
-  --fs-h2: clamp({...});
-  --fs-h3: clamp({...});
-  --fs-h4: clamp({...});
-  --fs-body-large: {rem}rem;
-  --fs-body: {base}rem;
-  --fs-body-small: {rem}rem;
-  --fs-caption: {rem}rem;
-  --fs-overline: {rem}rem;
-
-  /* Line heights (4px grid-snapped) */
-  --lh-display: {value};
-  --lh-h1: {value};
-  --lh-h2: {value};
-  --lh-h3: {value};
-  --lh-h4: {value};
-  --lh-body-large: {value};
-  --lh-body: {value};
-  --lh-body-small: {value};
-  --lh-caption: {value};
-  --lh-overline: {value};
-
-  /* Letter spacing */
-  --ls-display: -0.025em;
-  --ls-h1: -0.025em;
-  --ls-h2: -0.025em;
-  --ls-h3: -0.015em;
-  --ls-h4: -0.01em;
-  --ls-body-large: 0;
-  --ls-body: 0;
-  --ls-body-small: 0.01em;
-  --ls-caption: 0.015em;
-  --ls-overline: 0.1em;
-
-  /* Vertical rhythm */
-  --grid-unit: {grid}px;
-  --space-line: {body lh}px;
-}
-```
+Plain CSS custom properties (no Tailwind syntax). Include:
+
+- **Font imports** — Google Fonts `@import`
+- **:root custom properties** — font families (`--font-primary`, `--font-secondary`, `--font-mono`), font weights (`--fw-regular` through `--fw-bold`), fluid font sizes (`--fs-display` through `--fs-overline` with clamp() for headings, rem-based min/max only — never pure vw per WCAG 1.4.4), line heights (`--lh-display` through `--lh-overline`, 4px grid-snapped), letter spacing (`--ls-display` through `--ls-overline`), vertical rhythm (`--grid-unit`, `--space-line`)
 
 ## Step 8: Completion output