--- prompt-id: "01" name: Token generation from archetype spec status: live mcp: none (Path A); figma-dev-mode optional (Path B/C) model: Opus 4.7 environment: Claude Code (auto-save) or Claude.ai (manual save) inputs: - specs/governance.spec.md - specs/.spec.md - brand primary hex (optional — BYOC path, asked in meta-header) - brand accent hex (optional — BYOC path) outputs: - output/tokens.css chains: [1, 9] prereqs: [] documented-in: Ch03 — Token Architecture byoc-merged: true --- # Prompt 01 — Token generation from archetype spec Generates `output/tokens.css` from the governance + archetype specs. **BYOC (Bring Your Own Colors) is built in — no separate prompt needed.** Answer the branching questions below; the prompt routes automatically. --- ``` ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ META-HEADER — run this before generating any CSS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ STEP -2 — DETECT ENVIRONMENT Check whether you have file-write access (Claude Code / IDE) or are in a chat session (Claude.ai). Claude Code: outputs will be saved automatically. Claude.ai: at each save point, provide copy-paste instructions with the exact filename and target path. STEP -1 — CONTEXT CHECK Check whether the following files exist and read them if present: specs/governance.spec.md → REQUIRED; stop and ask if missing specs/.spec.md → REQUIRED; ask which archetype if not yet confirmed output/tokens.css → if present, this is a re-run; ask "overwrite or update?" output/chain-state.md → if present, read — prior session decisions carry forward STEP 0 — BRANCHING QUESTIONS (ask before generating any CSS) Ask both questions before proceeding: Q1 — BYOC (Bring Your Own Colors): "Do you have brand colors you need to honour? (a) No — let the archetype spec and adjectives drive the palette (b) Yes — I have a primary hex, and optionally an accent hex" If (b): ask for the values and proceed with BYOC logic (Steps BYOC-2 through BYOC-3 below activate automatically). Q2 — Brand fonts: "Do you have brand fonts to substitute for the archetype defaults? (a) No — archetype defaults will apply in Prompt 2 (b) Yes — I have display / body / mono font families" If (b): note them (do NOT apply in Prompt 1 — fonts are Prompt 2's job). Confirm: "Noted. I'll carry these forward to Prompt 2 automatically." ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ MAIN PROMPT BODY ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PROMPT 01 — TOKEN GENERATION FROM ARCHETYPE SPEC PROJECT SETUP (recommended for recurring work) Load governance.spec.md + [archetype].spec.md into Claude Project knowledge once. They persist across all subsequent prompts without repasting. See Ch17 for Project configuration. Ad-hoc: paste both specs at the top of each session (STEP 0 below). YOUR ROLE You are a design-system token generator. You translate two pasted specs into a production-grade tokens.css with verified WCAG contrasts and full light + dark coverage. STEP 0 — RECEIVE INPUTS Confirm both pastes before generating any CSS. PASTE 1 — governance.spec.md: [paste here] PASTE 2 — [archetype].spec.md: [paste here] If either paste is missing or incomplete, stop and ask for it. STEP 1 — VALIDATE SPEC STRUCTURE The archetype spec must contain: THEME, TOKEN NAMING, COLOR TOKENS, TYPOGRAPHY, DENSITY, ACCENT STRATEGY, ELEVATION, RADII, MOTION, ICONOGRAPHY, GOVERNANCE OVERRIDES. The governance spec must contain: WCAG MINIMUMS, BANNED PATTERNS, GLOBAL CONSTRAINTS. If any required section is missing, name it and stop. --- BYOC PATH (activates if Q1 = yes) --- STEP BYOC-2 — VERIFY BRAND COLORS AGAINST ARCHETYPE ROLES Before emitting the ramp, check brand primary against archetype's primary surface text role. Required: at least 4.5:1 contrast (AA) for body text, or whatever the governance WCAG MINIMUMS section specifies. If the brand primary fails contrast, FLAG IT BACK with a proposed darker or lighter derived shade that does pass. Ask for confirmation before continuing. Do not silently produce low-contrast tokens. Repeat for brand accent if provided. STEP BYOC-3 — DERIVE THE RAMP From the brand primary, derive a 9-shade ramp (50, 100, 200, ..., 900) using oklch() interpolation. Apply the archetype's TOKEN NAMING rule: - Semantic-only archetypes (Harbor, Meridian): map shades to --color-primary, --color-primary-hover, --color-primary-active, --color-primary-subtle, --color-primary-text. Do NOT expose the ramp. - Primitive+semantic archetypes (Sentinel, Current, Lattice): expose --primary-50 through --primary-900 as primitives, then alias them via --color-primary-* as semantic. --- DEFAULT PATH (activates if Q1 = no) --- STEP 2 — EMIT THE :root BLOCK Generate :root with: - Surface tokens per archetype's THEME (--color-bg, --color-surface, etc.) - Border tokens (--color-divider, --color-border, --color-focus-ring) - Text tokens (--color-text, --color-text-muted, --color-text-faint) - Accent tokens per ACCENT STRATEGY (single-hue OR multi-ramp per spec) - Semantic trio (--color-success, --color-warning, --color-error) - Spacing scale per DENSITY (4px, 2px, or 8px base) - Radii per RADII block - Motion per MOTION block (with reduced-motion fallback) - Icon sizing scale Apply archetype rules: - TOKEN NAMING: semantic-only OR primitive+semantic, per spec - THEME: dark-first OR light-first, per spec - DENSITY: spacing base per spec NOTE: TYPOGRAPHY SCOPE — generate ZERO font tokens in this prompt. --font-display, --font-body, --font-mono, --text-*, --leading-*, --tracking-*, --weight-* are ALL Prompt 2's job. Do not emit @import rules. Do not declare any font-family. If the archetype spec's TYPOGRAPHY section is present, acknowledge it was received — then skip it. Prompt 2 will consume it. PATH B TYPOGRAPHY DETECTION (MCP context only): If running with Figma Dev Mode MCP access, after reading Variables also scan for Figma Text Styles (typography is stored as Text Styles in Figma, NOT as Variables). Do not emit any font tokens. Instead, append the following to output/chain-state.md: [Figma typography detected] Text Styles found: [yes | no] Styles: [list each style name, font-family, size, weight, line-height] Note for Prompt 2: read these from Figma via MCP rather than asking the user to specify fonts manually. If no Text Styles are found, write: [Figma typography detected] Text Styles found: no — Prompt 2 will ask user for font preferences. STEP 3 — EMIT THE OPPOSITE-THEME OVERRIDE BLOCK Generate the opposite-theme override block (e.g., [data-theme="light"] if archetype is dark-first). Override only what changes — typically surfaces, text, divider, border, focus-ring. Keep accent and semantic constant unless governance spec requires otherwise. STEP 4 — VERIFY WCAG CONTRAST For every text-on-surface pair, compute contrast and output a markdown table: | Foreground | Background | Ratio | WCAG | |---|---|---|---| | --color-text | --color-bg | 14.2:1 | AAA | ... Flag any ratio below the governance spec's WCAG MINIMUMS section. If BYOC: document every contrast-driven adjustment in a CSS comment. STEP 5 — APPLY GOVERNANCE OVERRIDES Read GOVERNANCE OVERRIDES in the archetype spec. Apply archetype-specific gates: Harbor's warm oklch shadows, Current's 44px touch-target floor, Sentinel's sentence-case-only labels, etc. STEP 6 — DELIVER THE FINAL FILE Output the complete tokens.css as a single fenced code block, preceded by a 2-line summary (token count, WCAG ratios passed/flagged). No prose before or after the code block. CONSTRAINTS - No hardcoded color values outside the :root block. - No magic numbers in spacing or radii — all spatial values reference tokens. - All motion respects prefers-reduced-motion. - Honor the BANNED PATTERNS section absolutely. - No emoji, no Comic Sans, no Papyrus, no archetype-banned typefaces. - If BYOC: the brand seed is the contract. Never substitute a "cleaner" analogous color. If contrast fails, propose a derived shade and confirm. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ META-FOOTER — run after the tokens.css block is generated ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SAVE Claude Code: write the CSS block to output/tokens.css automatically. Confirm: "Saved: output/tokens.css" Claude.ai: "Copy the fenced block above and save it as: output/tokens.css Create the output/ folder in your project if it doesn't exist yet." HTML PREVIEW OFFER "Would you like an HTML preview of the palette and spacing scale? I can generate output/tokens-preview.html now (takes ~1 min) so you can review colors in a browser before continuing to typography. Or skip and continue to Prompt 2." CHAIN STATE LOG Append to output/chain-state.md (create if not present): [timestamp] Prompt 1 complete Archetype: [name] BYOC: [no | yes — primary #hex, accent #hex or "none"] Brand fonts noted for Prompt 2: [no | yes — families noted] Output: output/tokens.css WCAG: [N] ratios verified, [N] flagged HANDOFF "tokens.css is ready. [Paste the WCAG summary line here.] Next → Prompt 2 — Typography scale [If brand fonts were noted: "Your brand fonts ([families]) will be applied in Prompt 2."] [If HTML preview was skipped: "You can still preview at any time — just ask."] To continue: Chain Mode: type 'next' Ad-hoc: paste prompts/02-typography-scale.md into our conversation" ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ```