Design System

Design System of the Velocity Interoperability Network

The shared design system used by every website of the Velocity Interoperability Network.

This page shows each shared component as it renders on a site of the Network. The components are published from the packages/ui workspace and are used without modification by every site.

Wordmark

The wordmark is set in the serif face, in white, on the brand-700 masthead colour. Each site supplies its own eyebrow; the connective and the name of the Network are constant.

Section heading

Example section heading

Optional link

A section heading is small uppercase text with a short accent rule beneath it. It may carry one link, aligned to the right.

Intro band

Example intro band

An intro band is a light full-width band with a heading in the left column and one or two paragraphs of prose in the right. It is used beneath the masthead of a home page to introduce the organisation.

Example link grid

Colours
The shared colour tokens and the values each site may override.
About the Design System
What the design system is and where it lives in the monorepo.
Link grid item with a label
An item may carry a short call to action beneath its description.
View colours

Form primitives

Data table

Shared components
Component	Purpose	Group
Wordmark	Text-only logotype used in the masthead and footer.	Layout
SectionHeading	Small uppercase heading with an accent rule.	Sections
LinkGrid	Two or three column grid of titled links.	Sections
DataTable	Plain table with hairline rules and an optional caption.	Content
ApplicationForm	Generic form that shows a confirmation and sends nothing.	Forms