Colours
Every site of the Network uses the same set of named colour tokens. Components refer only to these names, never to fixed values, so that a site can be re-themed without changing any component.
| Token | Purpose |
|---|---|
| brand-50 | Lightest tint. Background of intro bands and the home page title block. |
| brand-100 | Light tint for subtle backgrounds and hover states on light surfaces. |
| brand-200 | Light tint for borders on tinted surfaces. |
| brand-300 | Mid tint. The default accent rule on sites that do not set their own. |
| brand-400 | Mid tone for secondary interface elements. |
| brand-500 | Mid tone for emphasis on light surfaces. |
| brand-600 | Dark tone for hover states on dark surfaces. |
| brand-700 | Principal brand colour. Masthead, buttons, page titles and table header rules. |
| brand-800 | Darker tone. Hover state of buttons and the navigation bar. |
| brand-900 | Darkest tone. Footer background. |
| brand-950 | Near-black tone for the government banner. |
| link | Colour of text links. Must contrast at least 4.5:1 on white and on mist. |
| accent | Short rules beneath section headings and active navigation items. |
| ink | Body text. |
| line | Hairline rules between list items, table rows and page sections. |
| mist | Light neutral background for panels. |
| steel-300 | Light grey-blue for rules and text on dark surfaces. |
| steel-400 | Mid grey-blue for secondary text on dark surfaces. |
| steel-500 | Dark grey-blue for secondary text, captions and form control borders. |
The shared stylesheet defines the brand scale as an alias of the Network navy and sets a default link and accent colour. Each site overrides the brand-50 to brand-950 tokens and the accent token in its own globals.css, after importing the shared stylesheet, to give the site its own hue. The link, ink, line, mist and steel tokens are the same on every site and should not be overridden.