Components

Components are reusable building blocks that combine colour, typography, spacing, and interaction behaviour into consistent UI patterns.

Each component in this section documents:

  • Purpose – what the component is for
  • Variants – primary, secondary, destructive, etc.
  • Anatomy – the essential parts of the component
  • Behaviour – hover, focus, active, disabled states
  • Accessibility – keyboard and screen reader expectations
  • Current implementation – how it works today in the product
  • Token usage – how the component applies the colour and type tokens defined in Foundations

This section is intentionally incremental.
Components can be added one at a time as we document or modernise them.


Table of contents