--- prompt-id: "10" name: Layer 3 token extraction — discover emergent component tokens status: live mcp: none model: Sonnet 4.6 environment: Claude.ai or Claude Code inputs: - output/tokens.css (locked) - output/components/foundation.css (locked or in-use) - output/components/composite.css (locked or in-use) - output/components/domain.css (if present) outputs: - output/tokens-layer-3.css chains: [1, 9] prereqs: ["01", "02", "03", "04"] documented-in: Ch12 — Layer 3 Extraction --- # Prompt 10 — Layer 3 token extraction Scans your shipped CSS for values repeated across three or more components. Proposes Layer 3 component-level tokens lifted from those repetitions — codifying patterns that emerged from real usage rather than being predicted up-front. Run this after components have shipped and stabilised. Re-run quarterly. --- ``` ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ META-HEADER — run before scanning ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ STEP -2 — DETECT ENVIRONMENT Claude Code: save automatically to output/tokens-layer-3.css Claude.ai: provide output as paste-ready block with save path. STEP -1 — CONTEXT CHECK output/tokens.css → REQUIRED (Layer 1 + 2 baseline) output/components/foundation.css → REQUIRED output/components/composite.css → REQUIRED output/components/domain.css → include if present output/chain-state.md → read if present ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ MAIN PROMPT BODY ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PROMPT 10 — LAYER 3 TOKEN EXTRACTION YOUR ROLE You are a design-system token auditor. Your goal is to find repeated patterns in the component CSS and surface them as proposed Layer 3 component-level tokens. Layer 3 tokens are emergent — they were not predicted at token-generation time but became visible through actual component usage. WHAT LAYER 3 TOKENS ARE Layer 1 — Primitive: --navy-900, --teal-500 Layer 2 — Semantic: --color-primary, --color-cta-bg Layer 3 — Component: --btn-height-default, --card-padding, --input-border-radius Layer 3 tokens live in tokens-layer-3.css, not in the component files. Once extracted, component CSS references these tokens so one change in Layer 3 propagates everywhere. EXTRACTION RULES RULE 1 — REPETITION THRESHOLD Flag any value that appears identically 3 or more times across components (across different component class scopes, not just within one component). Identical means: same CSS property AND same token reference. If var(--spacing-4) appears 5 times in different component scopes, flag it. RULE 2 — CANDIDATE VALUE TYPES Look for repetition in: — height / min-height values — padding values (shorthand or individual sides) — border-radius values — gap / margin values — font-weight values — transition duration / easing values — box-shadow values — z-index values Colour token repetitions are expected and do NOT need extraction (they are already semantic Layer 2 tokens). RULE 3 — NAMING CONVENTION Layer 3 token names: --[component]-[property]-[variant] — --btn-height-md — --input-border-radius — --card-padding-default — --modal-max-width-md — --transition-duration-fast — --focus-ring-width Use the component class name when value is component-specific; use a category name (--transition-*, --focus-ring-*, --z-*) when the value is cross-component. RULE 4 — PROPOSAL FORMAT Do not auto-apply. Present a proposal table first: | Proposed token | Value | Appears in | |----------------------------|-----------------------|-----------------------------------------------| | --btn-height-md | var(--spacing-11) | .btn, .input, .tab-trigger | | --focus-ring-width | 2px | .btn:focus-visible, .input:focus-visible, ... | | --transition-duration-fast | 150ms | .btn, .badge, .alert | After the table, ask: "Apply all? Approve individual? Skip?" RULE 5 — APPLY ON APPROVAL When the user approves: 1. Emit tokens-layer-3.css with all approved tokens in :root {} 2. Provide a find/replace list the user can apply to sync component CSS (do NOT edit component files in this prompt) OUTPUT: tokens-layer-3.css FORMAT :root { /* ── Layer 3 — Component tokens ───────────────────────────── */ /* Button */ --btn-height-sm: var(--spacing-8); --btn-height-md: var(--spacing-11); --btn-height-lg: var(--spacing-14); /* Inputs */ --input-border-radius: var(--radius-md); /* Cards */ --card-border-radius: var(--radius-card); --card-padding: var(--spacing-6); /* Transitions */ --transition-duration-fast: 150ms; --transition-duration-base: 250ms; --transition-easing: ease-in-out; /* Focus ring */ --focus-ring-width: 2px; --focus-ring-offset: 2px; /* Z-index scale */ --z-dropdown: 100; --z-sticky: 200; --z-popover: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; } FOLLOW-UP: FIND/REPLACE LIST After emitting tokens-layer-3.css, provide a replacement table: | File | Find | Replace with | |----------------|------------------------------|-------------------------| | foundation.css | var(--spacing-11) [in .btn] | var(--btn-height-md) | | composite.css | 2px [in :focus-visible] | var(--focus-ring-width) | The user applies these manually or in a follow-up prompt. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ META-FOOTER ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SAVE INSTRUCTION Save as: output/tokens-layer-3.css CHAIN-STATE LOG Append to output/chain-state.md: ## Prompt 10 — Layer 3 token extraction Date: Archetype: Candidates proposed: Candidates approved: Output: output/tokens-layer-3.css HANDOFF "Layer 3 tokens extracted. tokens-layer-3.css is ready. Apply the find/replace list to sync your component CSS. Run Prompt 11 (Drift audit) to verify no divergence crept in during extraction." ```