Everything, in one place.
Every token, type style, colour and component specimen, built on the three-tier system. Search it, or browse by group below.
Nothing matches yet. Try a token name, a component, or a colour.
Colour
Apply Mapping tokens in your work; primitives and aliases exist to build them.
Content tokens
Text and icon colours across the content scale.
Surface & border
Surfaces, backgrounds and border mappings.
Brand blue
The full 100–900 brand blue ramp.
Neutral
Grayscale primitives from black to white.
Semantic
Positive, warning, negative and informative.
Alpha
Light and dark transparency stacks.
Typography
Aeonik Pro for headings, Atkinson Hyperlegible Next for everything else, Newsreader italic for a sparing accent.
Heading typeface
Aeonik Pro, Demibold, −0.5px tracking.
Heading scale
2xl to sm, capped at 40px desktop.
Subheading scale
Demibold and semibold subheadings.
Serif accent
Newsreader italic, for sparing emphasis.
Body typeface
Atkinson Hyperlegible Next, 400–700.
Body scale
Large, medium and small body sizes.
Label scale
Compact labels for UI and metadata.
Space & shape
A 4-point grid, a tight set of radii, and restrained elevation.
Components
Established patterns. The component library has the full set, live, with states.
Interactive
Feel the system move. Tonal states, live playgrounds, and the motion rules in action.
Brand
The View logo suite, the AD Group parent marks, and how we sound.
View wordmark
The primary mark, black and white.
View.com.au lockup
The URL lockup for footers and sign-offs.
View icon
The square mark for avatars and app tiles.
View favicon
Browser-tab mark, 16 to 512 pixels.
AD Group wordmark
The parent corporate mark.
AD Group in use
The parent mark applied in context.
Voice: do & don't
How the brand talks, side by side.