Design Tokens
A token is a named value. Components of the shared package refer to tokens, never to fixed values, so that a site may be re-themed by redefining a handful of names and so that a change to a value made once reaches every site. The register below lists every token the shared stylesheet defines, its default value and whether a site may override it.
Tokens are of five kinds: colour, type, layout, rules and motion. Only colour tokens may be overridden by a site, and only some of those. The remaining kinds are the same on every site of the Velocity Interoperability Network; they are recorded here so that the teams building sites know what to expect, not so that they may change them.
- 19
- Named colour tokens
- 2
- Typeface tokens, each loaded once
- 3
- Breakpoints at which layouts change
- 5
- Motion durations, all disabled under reduced motion
Colour. The nineteen colour tokens are listed with their default values, which together form the Network navy. A site sets its own hue by overriding the brand scale and the accent in its stylesheet, as described in step four of Adopting the System. The purpose of each token, and how the tokens are used together, is set out on the Colours page.
| Token | Default | Overridable | Purpose |
|---|---|---|---|
| brand-50 | #eef3f8 | Yes | Lightest tint; background of intro bands and the home page title block. |
| brand-100 | #d7e2ed | Yes | Light tint; placeholder behind photographs while they load. |
| brand-200 | #afc4da | Yes | Light tint for borders on tinted surfaces. |
| brand-300 | #82a2c2 | Yes | Mid tint; the default value of the accent token. |
| brand-400 | #4b78a6 | Yes | Mid tone for secondary interface elements. |
| brand-500 | #2f5b86 | Yes | Mid tone for emphasis on light surfaces. |
| brand-600 | #1d4569 | Yes | Dark tone for hover states on dark surfaces. |
| brand-700 | #12344f | Yes | Principal brand colour: masthead, buttons, page titles, table header rules. |
| brand-800 | #0b2439 | Yes | Darker tone: utility row, footer, navigation submenus, button hover. |
| brand-900 | #071a2b | Yes | Darkest tone, held in reserve for deep surfaces. |
| brand-950 | #04101c | Yes | Near-black tone for the government banner. |
| link | #3d6a97 | With care | Text links. Any replacement must contrast at least 4.5:1 on white and on mist. |
| accent | brand-300 | Yes | Short rules beneath section headings, the top rule of key figures and the active navigation item. |
| ink | #2f2f2f | No | Body text and titles. |
| line | #d6d6d6 | No | Hairline rules between list items, table rows and page sections. |
| mist | #f4f4f4 | No | Light neutral background for panels. |
| steel-300 | #b8c2d1 | No | Labels and rules on dark surfaces, chiefly the footer. |
| steel-400 | #8a97ab | No | Secondary text on dark surfaces. |
| steel-500 | #5b6982 | No | Secondary text, captions, dates and form control borders on light surfaces. |
Type. Two typeface tokens are defined. The faces are loaded once by the shared package, in the weights listed, and a site does not add to them. Sizes, weights and letter-spacing are fixed by the components and are set out on the Typography page.
| Token | Face | Weights loaded | Use |
|---|---|---|---|
| font-serif | EB Garamond | 400, 500, 600, 700; roman and italic | Wordmark, page titles, item titles, key figures and step numbers. |
| font-sans | Open Sans | 400, 600, 700; roman and italic | Body text, navigation, labels, captions, tables and form controls. |
Layout. One layout token, the site width, is defined in the stylesheet. The other measures below are fixed within the components and are listed for reference.
| Measure | Value | Where it applies |
|---|---|---|
| container-site | 80 rem (1280 px) | Maximum width of the masthead, navigation bar, page content and footer. |
| Side margin | 20 px; 36 px from md | Left and right padding of every container. |
| Prose column | 48 rem (768 px) | Maximum width of the prose column on a standard page and of a press release body. |
| Section padding | 48 px; 56 px from md | Vertical padding of sections, bands and grids. |
| Page padding | 48 px; 64 px from md | Vertical padding of standard pages, heroes and newsroom pages. |
| Photograph ratio | 3:2; 4:3 in the hero | Aspect ratio of every photograph frame. Photographs are cropped to fit, never stretched. |
Layouts change at three breakpoints. Below the first, every page is a single column with narrow margins; above the last, the full arrangement is shown. Every page of a site is checked at each of the three widths before publication.
| Name | Width | What changes |
|---|---|---|
| sm | 640 px | Footer site list changes from one column to two; the wordmark grows one step. |
| md | 768 px | Grids of two, three and four columns come into effect; side margins widen; type on titles steps up. |
| lg | 1024 px | The masthead takes its horizontal form with the utility row; the navigation submenus float below the bar; bands place text and photograph side by side. |
Rules. The system draws few lines, and each has a fixed weight and colour. A hairline separates; a heavier rule in the brand colour heads a table or carries a timeline; a short rule in the accent colour marks a heading or an active item. No other border is drawn, and the only shadows in the system fall beneath a floating navigation submenu and beneath the skip link while it holds focus.
| Rule | Weight and colour | Where it is drawn |
|---|---|---|
| Hairline | 1 px, line | Between list items and table rows; above lists and tables; between page sections. |
| Table header rule | 2 px, brand-700 | Beneath the header row of a table. |
| Timeline spine | 2 px, brand-700 | The vertical rule of a timeline; events are marked by a 12 px square in accent. |
| Heading rule | 3 px, accent | Beneath a section heading (40 px wide), above each key figure, above an open navigation submenu and beneath the active navigation item. |
| Notice rule | 4 px, accent | Left border of a notice band. |
| Form outline | 1 px, steel-500; 2 px, brand-700 on focus | Border of a form control and its focus ring. |
Motion. Movement in the system is limited to a small number of transitions with fixed durations. Nothing moves on hover except colour; nothing scales. When a visitor has asked their browser to reduce motion, every transition below is disabled and the page renders in its final state at once.
| Transition | Duration | What it does |
|---|---|---|
| Reveal | 500 ms | Sections, bands and heroes fade in and lift 12 px the first time they scroll into view. |
| Collapse | 250 ms | An accordion panel opening or closing. |
| Submenu | 180 ms | A navigation submenu appearing or disappearing. |
| Colour | 200 ms | Colour and underline transitions on links and buttons. |
| Navigation underline | 300 ms | The underline of a navigation item in the masthead variant. |
A proposal to add, remove or change a token is made in the same way as any other change to the system, as described under Release Notes. Questions about the register may be sent to contact@design.gov.vin.