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. Nineteen tokens are defined: an eleven-step brand scale, a link colour, an accent, three neutrals and three steel greys.
| Token | Purpose |
|---|---|
| brand-50 | Lightest tint. Background of intro bands and the home page title block. |
| brand-100 | Light tint for subtle backgrounds and the frame behind a photograph while it loads. |
| 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. Utility row, footer, navigation submenus and the hover state of buttons. |
| brand-900 | Darkest tone, held in reserve for deep surfaces. |
| 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, above key figures and beneath the active navigation item. |
| 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 labels and rules 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. |
Default values and overrides. 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 stylesheet, after importing the shared one, to give the site its own hue. The link token is changed only where the brand hue would otherwise make links indistinct from titles, and then only to a colour that keeps the contrast ratios above. The ink, line, mist and steel tokens are the same on every site and are never overridden.
The table below gives the default values beside the values this site uses. This site's scale is a plum generated from a single hue, with a gold accent chosen to read on both the dark navigation bar and white pages.
| Token | Default | This site |
|---|---|---|
| brand-50 | #eef3f8 | #f6f2f8 |
| brand-100 | #d7e2ed | #e9deed |
| brand-200 | #afc4da | #cfb6d8 |
| brand-300 | #82a2c2 | #ad81bb |
| brand-400 | #4b78a6 | #8c49a2 |
| brand-500 | #2f5b86 | #6d397f |
| brand-600 | #1d4569 | #582e66 |
| brand-700 | #12344f | #462451 |
| brand-800 | #0b2439 | #2e1835 |
| brand-900 | #071a2b | #1e1023 |
| brand-950 | #04101c | #120915 |
| link | #3d6a97 | #5b2f6a |
| accent | brand-300 | #b08d3c |
Choosing a hue. A site's scale is generated from one hue so that the eleven steps stay in proportion: the lightest tint is faint enough to sit behind prose, the principal colour dark enough to carry white text on the masthead, and the near-black dark enough for the banner. A site checks that its brand-700 carries white text at 4.5:1 or better and that its link colour meets the same ratio on white and on mist before the scale is adopted.
The complete register of tokens, including type, layout, rules and motion, is on the Design Tokens page. The procedure for setting a site's colours is step four of Adopting the System; how the tokens are applied to text is set out under Typography. Questions may be sent to contact@design.gov.vin.