Colour system
Background
Surface
Primary
Accent
Principles
- Use the neutral scale for most layout and content space.
- Reserve the primary colour for major brand anchors and key actions.
- Use the accent colour sparingly so it stays meaningful.
- Keep links, buttons, and statuses visually distinct.
Accessibility
- Maintain strong text contrast in both light and dark modes.
- Keep borders visible on cards and inputs.
- Use visible focus rings for all interactive elements.
- Do not rely on colour alone to communicate state.
Components
Buttons: Primary buttons use deep petrol, secondary buttons use neutral surfaces, accent buttons are reserved for high-emphasis moments, and support chips are used for tags or tertiary actions.
Forms: Inputs use a slightly tinted surface with visible borders. Placeholder text is deliberately subdued.
Letterhead: The printable layout uses a clean header, a small colour line, and balanced typography for formal communication.