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>
29 lines
2.1 KiB
JSON
29 lines
2.1 KiB
JSON
{
|
|
"spacing": {
|
|
"$type": "dimension",
|
|
"$description": "Spacing scale based on 4px base unit. All values are multiples of 4.",
|
|
"0-5": { "$value": "2px", "$description": "Hairline — icon-to-text tight spacing, fine adjustments" },
|
|
"1": { "$value": "4px", "$description": "Tight — inline spacing, minimal gaps between related elements" },
|
|
"2": { "$value": "8px", "$description": "Small — related element gaps, compact padding, icon margins" },
|
|
"3": { "$value": "12px", "$description": "Component internal padding (small), chip padding" },
|
|
"4": { "$value": "16px", "$description": "Default component padding, form field gap, card grid gutter (mobile)" },
|
|
"5": { "$value": "20px", "$description": "Medium component spacing" },
|
|
"6": { "$value": "24px", "$description": "Card padding, section gap (small), card grid gutter (desktop)" },
|
|
"8": { "$value": "32px", "$description": "Section gap (medium), form section separation" },
|
|
"10": { "$value": "40px", "$description": "Section gap (large)" },
|
|
"12": { "$value": "48px", "$description": "Page section separation, vertical rhythm break" },
|
|
"16": { "$value": "64px", "$description": "Hero/banner vertical spacing" },
|
|
"20": { "$value": "80px", "$description": "Major page sections, large vertical spacing" }
|
|
},
|
|
"borderRadius": {
|
|
"$type": "dimension",
|
|
"$description": "Border radius scale for consistent rounding across components.",
|
|
"none": { "$value": "0px", "$description": "Square corners — tables, dividers, sharp elements" },
|
|
"sm": { "$value": "4px", "$description": "Small radius — inputs, small interactive elements, chips" },
|
|
"md": { "$value": "8px", "$description": "Medium radius — cards, buttons, dropdowns (default)" },
|
|
"lg": { "$value": "12px", "$description": "Large radius — modals, large cards" },
|
|
"xl": { "$value": "16px", "$description": "Extra large — feature cards, hero elements" },
|
|
"full": { "$value": "9999px", "$description": "Full/pill — avatars, pill buttons, circular elements" }
|
|
}
|
|
}
|