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>
112 lines
9.2 KiB
JSON
112 lines
9.2 KiB
JSON
{
|
|
"color": {
|
|
"$type": "color",
|
|
"brand": {
|
|
"$description": "Warm gold/copper palette — FA primary brand hue. Derived from Parsons brand swatches.",
|
|
"50": { "$value": "#FEF9F5", "$description": "Lightest warm tint — warm section backgrounds" },
|
|
"100": { "$value": "#F7ECDF", "$description": "Light warm — hover backgrounds, subtle fills" },
|
|
"200": { "$value": "#EBDAC8", "$description": "Warm light — secondary backgrounds, divider tones" },
|
|
"300": { "$value": "#D8C3B5", "$description": "Warm beige — from brand swatch. Surface warmth, card tints" },
|
|
"400": { "$value": "#D0A070", "$description": "Mid gold — from brand swatch. Secondary interactive, step indicators" },
|
|
"500": { "$value": "#BA834E", "$description": "Base brand gold — from brand swatch. Primary CTA colour, main interactive. 3.7:1 contrast on white" },
|
|
"600": { "$value": "#B0610F", "$description": "Rich copper — from brand swatch. Hover/emphasis on brand elements. 4.8:1 contrast on white" },
|
|
"700": { "$value": "#8B4E0D", "$description": "Deep copper — active states, strong brand text on light backgrounds. 6.7:1 contrast on white" },
|
|
"800": { "$value": "#6B3C13", "$description": "Dark brown — bold brand accents, high-contrast brand text" },
|
|
"900": { "$value": "#51301B", "$description": "Chocolate — from brand swatch. Deep emphasis, dark brand surfaces" },
|
|
"950": { "$value": "#251913", "$description": "Espresso — from brand swatch. Darkest brand tone, near-black warm" }
|
|
},
|
|
"sage": {
|
|
"$description": "Cool grey-green/slate palette — FA secondary hue. Calming, professional tone for the funeral services context.",
|
|
"50": { "$value": "#F2F5F6", "$description": "Lightest sage — subtle cool backgrounds" },
|
|
"100": { "$value": "#E3EAEB", "$description": "Light sage — hover states on cool surfaces" },
|
|
"200": { "$value": "#D7E1E2", "$description": "From brand swatch — light cool surface, soft borders" },
|
|
"300": { "$value": "#C8D4D6", "$description": "Mid-light sage — dividers, secondary borders" },
|
|
"400": { "$value": "#B9C7C9", "$description": "From brand swatch — mid sage, secondary text on dark backgrounds" },
|
|
"500": { "$value": "#8EA2A7", "$description": "Base sage — secondary content, muted icons" },
|
|
"600": { "$value": "#687D84", "$description": "Dark sage — secondary text, subtle icons" },
|
|
"700": { "$value": "#4C5B6B", "$description": "From brand swatch — strong secondary, dark accents. 6.1:1 contrast on white" },
|
|
"800": { "$value": "#4C5459", "$description": "From brand swatch — near-dark grey, supplementary text. 6.7:1 contrast on white" },
|
|
"900": { "$value": "#343C40", "$description": "Very dark sage — high-contrast secondary elements" },
|
|
"950": { "$value": "#1E2528", "$description": "Near-black cool — darkest secondary tone" }
|
|
},
|
|
"neutral": {
|
|
"$description": "True grey palette for text, borders, and UI chrome. Slight cool undertone to complement the sage palette.",
|
|
"50": { "$value": "#FAFAFA", "$description": "Lightest neutral — default page background alternative" },
|
|
"100": { "$value": "#F5F5F5", "$description": "Light neutral — subtle background differentiation" },
|
|
"200": { "$value": "#E8E8E8", "$description": "Light grey — standard borders, dividers" },
|
|
"300": { "$value": "#D4D4D4", "$description": "Mid-light grey — disabled borders, subtle separators" },
|
|
"400": { "$value": "#A3A3A3", "$description": "Mid grey — placeholder text, disabled content" },
|
|
"500": { "$value": "#737373", "$description": "Base grey — secondary body text, icons" },
|
|
"600": { "$value": "#525252", "$description": "Dark grey — body text, labels. 7.1:1 contrast on white" },
|
|
"700": { "$value": "#404040", "$description": "Strong grey — headings, emphasis text. 9.7:1 contrast on white" },
|
|
"800": { "$value": "#2C2E35", "$description": "From brand swatch — charcoal with cool tint. Primary text colour. 13.2:1 contrast on white" },
|
|
"900": { "$value": "#1A1A1C", "$description": "Near-black — maximum contrast text" },
|
|
"950": { "$value": "#0A0A0B", "$description": "Deepest neutral — use sparingly" }
|
|
},
|
|
"red": {
|
|
"$description": "Red palette for error states, destructive actions, and urgent feedback. Warm-leaning for brand cohesion.",
|
|
"50": { "$value": "#FEF2F2", "$description": "Error tint — error message backgrounds" },
|
|
"100": { "$value": "#FDE8E8", "$description": "Light error — hover on error surfaces" },
|
|
"200": { "$value": "#F9BFBF", "$description": "Light red — error borders, subtle indicators" },
|
|
"300": { "$value": "#F09898", "$description": "Mid-light red — error icon backgrounds" },
|
|
"400": { "$value": "#E56B6B", "$description": "Mid red — error indicators, badges" },
|
|
"500": { "$value": "#D64545", "$description": "Base red — form validation errors, alert accents" },
|
|
"600": { "$value": "#BC2F2F", "$description": "Strong red — error text on light backgrounds. 5.7:1 contrast on white" },
|
|
"700": { "$value": "#9B2424", "$description": "Dark red — error headings, strong alerts" },
|
|
"800": { "$value": "#7A1D1D", "$description": "Deep red — high-contrast error emphasis" },
|
|
"900": { "$value": "#5C1616", "$description": "Very dark red — use sparingly" },
|
|
"950": { "$value": "#3D0E0E", "$description": "Darkest red" }
|
|
},
|
|
"amber": {
|
|
"$description": "Amber/yellow palette for warning states, price alerts, and important notices.",
|
|
"50": { "$value": "#FFF9EB", "$description": "Warning tint — warning message backgrounds" },
|
|
"100": { "$value": "#FFF0CC", "$description": "Light amber — hover on warning surfaces" },
|
|
"200": { "$value": "#FFE099", "$description": "Light amber — warning borders" },
|
|
"300": { "$value": "#FFCC66", "$description": "Mid-light amber — warning icon backgrounds" },
|
|
"400": { "$value": "#FFB833", "$description": "Mid amber — warning badges, price alerts" },
|
|
"500": { "$value": "#F5A000", "$description": "Base amber — warning accents" },
|
|
"600": { "$value": "#CC8500", "$description": "Strong amber — warning text. 3.6:1 contrast on white (large text AA)" },
|
|
"700": { "$value": "#A36B00", "$description": "Dark amber — warning headings. 5.1:1 contrast on white" },
|
|
"800": { "$value": "#7A5000", "$description": "Deep amber — high-contrast warning emphasis" },
|
|
"900": { "$value": "#523600", "$description": "Very dark amber — use sparingly" },
|
|
"950": { "$value": "#331F00", "$description": "Darkest amber" }
|
|
},
|
|
"green": {
|
|
"$description": "Green palette for success states, confirmations, and positive feedback. Slightly muted for the sensitive context.",
|
|
"50": { "$value": "#F0F7F0", "$description": "Success tint — success message backgrounds" },
|
|
"100": { "$value": "#D8ECD8", "$description": "Light green — hover on success surfaces" },
|
|
"200": { "$value": "#B8D8B8", "$description": "Light green — success borders" },
|
|
"300": { "$value": "#8DC08D", "$description": "Mid-light green — success icon backgrounds" },
|
|
"400": { "$value": "#66A866", "$description": "Mid green — success badges, completion indicators" },
|
|
"500": { "$value": "#4A8F4A", "$description": "Base green — success accents, completed steps" },
|
|
"600": { "$value": "#3B7A3B", "$description": "Strong green — success text on light backgrounds. 4.8:1 contrast on white" },
|
|
"700": { "$value": "#2E6B2E", "$description": "Dark green — success headings" },
|
|
"800": { "$value": "#235523", "$description": "Deep green — high-contrast success emphasis" },
|
|
"900": { "$value": "#1A3F1A", "$description": "Very dark green — use sparingly" },
|
|
"950": { "$value": "#0F2A0F", "$description": "Darkest green" }
|
|
},
|
|
"blue": {
|
|
"$description": "Blue palette for informational states, supplementary info, and non-brand links.",
|
|
"50": { "$value": "#EFF6FF", "$description": "Info tint — info message backgrounds" },
|
|
"100": { "$value": "#DBEAFE", "$description": "Light blue — hover on info surfaces" },
|
|
"200": { "$value": "#BFDBFE", "$description": "Light blue — info borders" },
|
|
"300": { "$value": "#93C5FD", "$description": "Mid-light blue — info icon backgrounds" },
|
|
"400": { "$value": "#60A5FA", "$description": "Mid blue — info badges" },
|
|
"500": { "$value": "#3B82F6", "$description": "Base blue — info accents, supplementary links" },
|
|
"600": { "$value": "#2563EB", "$description": "Strong blue — info text on light backgrounds. 4.6:1 contrast on white" },
|
|
"700": { "$value": "#1D4ED8", "$description": "Dark blue — info headings" },
|
|
"800": { "$value": "#1E40AF", "$description": "Deep blue — high-contrast info emphasis" },
|
|
"900": { "$value": "#1E3A8A", "$description": "Very dark blue — use sparingly" },
|
|
"950": { "$value": "#172554", "$description": "Darkest blue" }
|
|
},
|
|
"white": {
|
|
"$value": "#FFFFFF",
|
|
"$description": "Pure white — card backgrounds, inverse text, primary surface"
|
|
},
|
|
"black": {
|
|
"$value": "#000000",
|
|
"$description": "Pure black — from brand swatch. Use sparingly; prefer neutral.800-900 for text"
|
|
}
|
|
}
|
|
}
|