# Colours

Keston's colours are Tailwind theme tokens, defined in `theme.css`. Use them by name in classes, e.g. `bg-primary`, `text-red`, `border-black/15`. Avoid raw hex values, so every product stays in step when a colour changes.

## Brand and text

| | Token | Hex | Use for |
|---|---|---|---|
|  | `primary` (`kblue`) | `#023750` | Keston blue: primary buttons, selected items, the brand |
|  | `black` | `#050505` | Text. Use opacity for quieter text: `text-black/65` |
|  | `white` | `#FAFAFA` | Cards, fields, text on dark colours |

## Surfaces

| | Token | Hex | Use for |
|---|---|---|---|
|  | `background` | `#E1E1E1` | The app's frame behind the content: AppShell, Header, Sidebar |
|  | `surface` | `#EBEBEB` | Quiet areas inside content |
|  | `surface-elevated` | `#F2F2F2` | Areas raised above a surface |

## Status

| | Token | Hex | Use for |
|---|---|---|---|
|  | `green` | `#007A16` | Success |
|  | `yellow` | `#F1C70B` | Warnings. Use black text on it |
|  | `red` | `#D2042D` | Errors and destructive actions |
|  | `blue` | `#035483` | Information, e.g. an info Badge or Notification |
|  | `focus` | `#007FC9` | The keyboard focus ring, and nothing else |

## Lines and quieter text

Borders and dividers are black at 15% (`border-black/15`). Secondary text is black at 65% (`text-black/65`), and placeholders at 55%. Using opacity, not extra greys, keeps them right on any of the surfaces above.