Design System
Design System of the Velocity Interoperability Network
The shared design system used by every website of the Velocity Interoperability Network.
Foundations
- Colours
The shared colour tokens, their default values and how each site overrides them.
- Typography
The two typefaces, the type scale, weights, letter-spacing and the rules of composition.
- Design Tokens
The complete register of named values: colour, type, layout, rules and motion.
- Components
Every shared component, what it is for and which pages it may appear on.
One system, many sites
Every website of the Network is built from the same masthead, navigation, forms and footer. A site changes only its brand and accent colours; the components themselves are used as supplied.
The system is published from the packages/ui workspace of the Network monorepo and is consumed by each site as the @vin/ui package.
Key figures
- 1
- Shared component package, @vin/ui
- 19
- Named colour tokens on every site
- 2
- Typefaces: a serif for titles, a sans-serif for text
- 43
- Shared components in eight groups
Using the system
- Adopting the System
How a new site of the Network is set up from the shared package in seven steps.
- Page Patterns
The fixed arrangements of components for home pages, standard pages, newsrooms and registers.
- Standards for Sites
The conditions a site must meet before it is published, and how each is checked.
- Release Notes
The register of releases of the shared package, how a site takes one and how a change is proposed.
Standards before publication
A site is published only when its prose, links, photographs and configuration meet the same conditions as every other site of the Network. Most are met by using the shared package as supplied; the rest are checked in a review by a second person.
The review is repeated whenever a site takes a new release of the package, since a release may change how existing pages render.
Proposals and changes
Additions and changes to the system are made once, in the shared package, and reach every site with its next build. Six releases have been made to date, and each is recorded with the components it affects.
Proposals may be sent to the design team by email. Accepted proposals are made in the shared package; declined ones are recorded with the reason, so that the same question need not be raised twice.