{ "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" } } }