About the Design System
The shared design system used by every website of the Velocity Interoperability Network.
The Design System is the set of components, colour tokens, typefaces and page patterns from which every website of the Velocity Interoperability Network is built. It ensures that the sites of member organisations look and behave alike, so that a person moving from one to another finds the same masthead, navigation, forms and footer in the same places.
The system lives in the packages/ui workspace of the Network monorepo and is published to each site as the @vin/ui package. Sites use its components as supplied and may change only the brand and accent colours. A site is a configuration of the system, not a copy of it, and a change made once in the shared package reaches every site with its next build.
What the system provides. The system is documented on this site in six parts.
- Colours and tokens
- Nineteen named colour tokens with default values, a register of every other named value the system uses, and the rule for which a site may override.
- Typography
- Two typefaces loaded once, a fixed type scale, and the rules of composition every page follows.
- Components
- Forty-three shared components in eight groups, from the shell around every page to the primitives of a form.
- Patterns
- Ten fixed arrangements of components for the kinds of page a site needs, so that a newsroom or a register reads alike across the Network.
- Standards
- The conditions a site must meet before it is published, the checks that verify them and the review that precedes publication.
- Releases
- A numbered, dated register of changes to the shared package, the procedure by which a site takes a release and the register of proposals.
Who maintains it. The system is maintained by the design team of the Network on behalf of every department and service. The team makes changes to the shared package, reviews sites before publication and considers proposals from the teams that build sites. It does not build the sites themselves; each department and service is responsible for its own prose, photographs and configuration.
For how the system came to be, see History; for the questions most often asked about it, see Questions. Proposed additions or changes to the system may be sent to contact@design.gov.vin.