FuneralArranger/tokens/semantic/colours.json

{
  "color": {
    "$type": "color",
    "text": {
      "$description": "Semantic text colours — define the hierarchy and intent of text across the UI.",
      "primary": {
        "$value": "{color.neutral.800}",
        "$description": "Primary text — body content, headings. Cool charcoal (#2C2E35) for comfortable extended reading"
      },
      "secondary": {
        "$value": "{color.neutral.600}",
        "$description": "Secondary text — helper text, descriptions, metadata, less prominent content"
      },
      "tertiary": {
        "$value": "{color.neutral.500}",
        "$description": "Tertiary text — placeholders, timestamps, attribution, meta information"
      },
      "disabled": {
        "$value": "{color.neutral.400}",
        "$description": "Disabled text — clearly diminished but still readable for accessibility"
      },
      "inverse": {
        "$value": "{color.white}",
        "$description": "Inverse text — white text on dark or coloured backgrounds (buttons, banners)"
      },
      "brand": {
        "$value": "{color.brand.600}",
        "$description": "Brand-coloured text — links, inline brand emphasis. Copper tone meets AA on white (4.8:1)"
      },
      "error": {
        "$value": "{color.red.600}",
        "$description": "Error text — form validation messages, error descriptions"
      },
      "success": {
        "$value": "{color.green.600}",
        "$description": "Success text — confirmation messages, positive feedback"
      },
      "warning": {
        "$value": "{color.amber.700}",
        "$description": "Warning text — cautionary messages. Uses amber.700 for WCAG AA compliance on white (5.1:1)"
      }
    },
    "surface": {
      "$description": "Background/surface colours for page sections, cards, and containers.",
      "default": {
        "$value": "{color.white}",
        "$description": "Default surface — main page background, card faces"
      },
      "subtle": {
        "$value": "{color.neutral.50}",
        "$description": "Subtle surface — slight differentiation from default, alternate row backgrounds"
      },
      "raised": {
        "$value": "{color.white}",
        "$description": "Raised surface — cards, elevated containers (distinguished by shadow rather than colour)"
      },
      "warm": {
        "$value": "{color.brand.50}",
        "$description": "Warm surface — brand-tinted sections, promotional areas, upsell cards like 'Protect your plan'"
      },
      "cool": {
        "$value": "{color.sage.50}",
        "$description": "Cool surface — calming sections, information panels, FAQ backgrounds"
      },
      "overlay": {
        "$value": "#00000080",
        "$description": "Overlay surface — modal/dialog backdrop at 50% black"
      }
    },
    "border": {
      "$description": "Border colours for containers, inputs, and visual dividers.",
      "default": {
        "$value": "{color.neutral.200}",
        "$description": "Default border — cards, containers, resting input borders"
      },
      "strong": {
        "$value": "{color.neutral.400}",
        "$description": "Strong border — emphasis borders, active input borders"
      },
      "subtle": {
        "$value": "{color.neutral.100}",
        "$description": "Subtle border — section dividers, soft separators"
      },
      "brand": {
        "$value": "{color.brand.500}",
        "$description": "Brand border — focused inputs, selected cards, brand-accented containers"
      },
      "error": {
        "$value": "{color.red.500}",
        "$description": "Error border — form fields with validation errors"
      },
      "success": {
        "$value": "{color.green.500}",
        "$description": "Success border — validated fields, confirmed selections"
      }
    },
    "interactive": {
      "$description": "Colours for interactive elements — buttons, links, form controls.",
      "default": {
        "$value": "{color.brand.600}",
        "$description": "Default interactive — primary button fill, link colour, checkbox accent. Uses brand.600 (copper) for WCAG AA compliance (4.6:1 on white)"
      },
      "hover": {
        "$value": "{color.brand.700}",
        "$description": "Hover state — deepened copper on hover for clear visual feedback"
      },
      "active": {
        "$value": "{color.brand.800}",
        "$description": "Active/pressed state — dark brown during click/tap"
      },
      "disabled": {
        "$value": "{color.neutral.300}",
        "$description": "Disabled interactive — muted grey, no pointer events"
      },
      "focus": {
        "$value": "{color.brand.600}",
        "$description": "Focus ring colour — keyboard navigation indicator, 2px outline with 2px offset"
      },
      "secondary": {
        "$value": "{color.sage.700}",
        "$description": "Secondary interactive — grey/sage buttons, less prominent actions"
      },
      "secondary-hover": {
        "$value": "{color.sage.800}",
        "$description": "Secondary interactive hover — darkened sage on hover"
      }
    },
    "feedback": {
      "$description": "System alert and feedback colours. Each type has a strong variant (for text/icons) and a subtle variant (for backgrounds).",
      "success": {
        "$value": "{color.green.600}",
        "$description": "Success — confirmations, completed arrangement steps, booking confirmed"
      },
      "success-subtle": {
        "$value": "{color.green.50}",
        "$description": "Success background — success message container fill, completion banners"
      },
      "warning": {
        "$value": "{color.amber.600}",
        "$description": "Warning — price change alerts, important notices, bond/insurance prompts"
      },
      "warning-subtle": {
        "$value": "{color.amber.50}",
        "$description": "Warning background — warning message container fill, notice banners"
      },
      "error": {
        "$value": "{color.red.600}",
        "$description": "Error — form validation failures, system errors, payment issues"
      },
      "error-subtle": {
        "$value": "{color.red.50}",
        "$description": "Error background — error message container fill, alert banners"
      },
      "info": {
        "$value": "{color.blue.600}",
        "$description": "Info — helpful tips, supplementary information, guidance callouts"
      },
      "info-subtle": {
        "$value": "{color.blue.50}",
        "$description": "Info background — info message container fill, tip banners"
      }
    }
  }
}