Richie
732c872576
Token pipeline (Style Dictionary v4, DTCG format): - Primitive tokens: colour palettes (brand, sage, neutral, feedback), typography (3 font families, 21-variant type scale), spacing (4px grid), border radius, shadows, opacity - Semantic tokens: text, surface, border, interactive, feedback colours; typography roles; layout spacing - Component tokens: Button (4 sizes), Input (2 sizes) - Generated outputs: CSS custom properties, JS ES6 module, flat JSON Atoms (3 components): - Button: contained/soft/outlined/text × primary/secondary, 4 sizes, loading state, underline for text variant - Typography: 21 variants across display/heading/body/label/caption/overline, maxLines truncation - Input: external label, helper text, error/success validation, start/end icons, required indicator, 2 sizes, multiline support Infrastructure: - MUI v5 theme with full token mapping - Storybook 8 with autodocs - Claude Code agents and skills for token/component workflows - Design system documentation and cross-session memory Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
79 lines
5.5 KiB
JSON
79 lines
5.5 KiB
JSON
{
|
||
"fontFamily": {
|
||
"$type": "fontFamily",
|
||
"body": {
|
||
"$value": "'Montserrat', 'Helvetica Neue', Arial, sans-serif",
|
||
"$description": "Primary font — Montserrat. Used for headings (h1-h6), body text, labels, and all UI elements"
|
||
},
|
||
"display": {
|
||
"$value": "'Noto Serif SC', Georgia, 'Times New Roman', serif",
|
||
"$description": "Display font — Noto Serif SC. Elegant serif for hero/display text only. Adds warmth and gravitas at large sizes"
|
||
},
|
||
"mono": {
|
||
"$value": "'JetBrains Mono', 'Fira Code', Consolas, monospace",
|
||
"$description": "Monospace font — for reference numbers (FA-2026-00847), tabular pricing data, and code"
|
||
}
|
||
},
|
||
"fontSize": {
|
||
"$type": "dimension",
|
||
"$description": "Font size scale. General-purpose sizes (2xs–4xl) plus display-specific sizes for hero/marketing text.",
|
||
"2xs": { "$value": "0.6875rem", "$description": "11px — smallest UI text: compact captions, compact overlines" },
|
||
"xs": { "$value": "0.75rem", "$description": "12px — small text: captions, labels, overlines, body/xs" },
|
||
"sm": { "$value": "0.875rem", "$description": "14px — body small, labels, helper text" },
|
||
"base": { "$value": "1rem", "$description": "16px — default body text, heading/6, label/lg" },
|
||
"md": { "$value": "1.125rem", "$description": "18px — body large, heading/5" },
|
||
"lg": { "$value": "1.25rem", "$description": "20px — heading/4" },
|
||
"xl": { "$value": "1.5rem", "$description": "24px — heading/3" },
|
||
"2xl": { "$value": "1.875rem", "$description": "30px — heading/2" },
|
||
"3xl": { "$value": "2.25rem", "$description": "36px — heading/1" },
|
||
"4xl": { "$value": "3rem", "$description": "48px — reserved (legacy)" },
|
||
"display": {
|
||
"$description": "Display-specific sizes for hero and marketing text. Used exclusively with Noto Serif SC.",
|
||
"sm": { "$value": "2rem", "$description": "32px — display/sm, smallest display text" },
|
||
"3": { "$value": "2.5rem", "$description": "40px — display/3" },
|
||
"2": { "$value": "3.25rem", "$description": "52px — display/2" },
|
||
"1": { "$value": "4rem", "$description": "64px — display/1" },
|
||
"hero": { "$value": "5rem", "$description": "80px — display/hero, largest display text" }
|
||
},
|
||
"mobile": {
|
||
"$description": "Reduced font sizes for mobile breakpoints (< 600px). Display and headings scale down; body sizes stay constant.",
|
||
"displayHero": { "$value": "2rem", "$description": "32px — mobile display/hero (from 80px desktop)" },
|
||
"display1": { "$value": "1.75rem", "$description": "28px — mobile display/1 (from 64px desktop)" },
|
||
"display2": { "$value": "1.5rem", "$description": "24px — mobile display/2 (from 52px desktop)" },
|
||
"display3": { "$value": "1.375rem", "$description": "22px — mobile display/3 (from 40px desktop)" },
|
||
"displaySm": { "$value": "1.25rem", "$description": "20px — mobile display/sm (from 32px desktop)" },
|
||
"h1": { "$value": "1.625rem", "$description": "26px — mobile heading/1 (from 36px desktop)" },
|
||
"h2": { "$value": "1.375rem", "$description": "22px — mobile heading/2 (from 30px desktop)" },
|
||
"h3": { "$value": "1.25rem", "$description": "20px — mobile heading/3 (from 24px desktop)" },
|
||
"h4": { "$value": "1.125rem", "$description": "18px — mobile heading/4 (from 20px desktop)" },
|
||
"h5": { "$value": "1rem", "$description": "16px — mobile heading/5 (from 18px desktop)" },
|
||
"h6": { "$value": "0.875rem", "$description": "14px — mobile heading/6 (from 16px desktop)" }
|
||
}
|
||
},
|
||
"fontWeight": {
|
||
"$type": "fontWeight",
|
||
"regular": { "$value": 400, "$description": "Regular weight — captions, display text (serif carries inherent weight)" },
|
||
"medium": { "$value": 500, "$description": "Medium weight — body text, labels. Slightly bolder than regular for improved readability" },
|
||
"semibold": { "$value": 600, "$description": "Semibold — overlines, button text, navigation" },
|
||
"bold": { "$value": 700, "$description": "Bold — all headings (h1-h6)" }
|
||
},
|
||
"lineHeight": {
|
||
"$type": "number",
|
||
"$description": "Generic line-height scale. Typography variants use specific values for precise control.",
|
||
"tight": { "$value": 1.25, "$description": "Tight leading — large headings, display text" },
|
||
"snug": { "$value": 1.375, "$description": "Snug leading — sub-headings, labels, small text" },
|
||
"normal": { "$value": 1.5, "$description": "Normal leading — default body text, optimal readability" },
|
||
"relaxed": { "$value": 1.75, "$description": "Relaxed leading — large body text, long-form content" }
|
||
},
|
||
"letterSpacing": {
|
||
"$type": "dimension",
|
||
"$description": "Generic letter-spacing scale. Typography variants use specific values for precise control.",
|
||
"tighter": { "$value": "-0.02em", "$description": "Tighter tracking — large display text" },
|
||
"tight": { "$value": "-0.01em", "$description": "Tight tracking — headings" },
|
||
"normal": { "$value": "0em", "$description": "Normal tracking — body text, most content" },
|
||
"wide": { "$value": "0.02em", "$description": "Wide tracking — captions, small text" },
|
||
"wider": { "$value": "0.05em", "$description": "Wider tracking — labels, UI text" },
|
||
"widest": { "$value": "0.08em", "$description": "Widest tracking — overlines, uppercase text" }
|
||
}
|
||
}
|