VERTO style guide
Tokens and components for Content Map, drawn from www.verto.org.au. Warm and approachable, but calm and dense: yellow marks the primary action and focus, never large text on white. Full notes and source evidence live in docs/style-guide.md.
Colour palette
Every colour is a token. Text pairs meet WCAG AA (4.5:1).
Primary actions, focus halo, active marker
Ink on it 7.93:1
Status dots, available drop target
Selection, drop-over, in-progress badge
Ink 10.77:1
Primary hover, focus ring, dark chrome
White on it 9.61:1
Headings and body
12.63:1 on white
Labels, secondary text
9.61:1 on white
Hints, meta, table headers
5.35:1 on white
Text on accent-soft
7.93:1 on accent-soft
Cards, inputs, main panel
Sidebar, table head, page canvas
Hover fill, disabled
Hairlines and dividers
Control borders (non-text)
Done
5.74:1 on success-soft
Errors, rejected drop
5.75:1 on danger-soft
Links, info notes
5.90:1 on white
Typography
Nunito 700/800 stands in for Moon Bold (headings); Figtree 400/500/600 stands in for Proxima Nova (body). Both bundled locally.
| text-3xl | 36/42 · heading | Content map for VERTO |
| text-2xl | 28/34 · heading | Information architecture |
| text-xl | 22/28 · heading | Templates and modules |
| text-lg | 18/26 · heading | Page details |
| text-md | 16/24 · body | Plain language that makes government terms simple. |
| text-base | 14/20 · body | Default UI text. Dense, calm and easy to scan. |
| text-sm | 13/18 · body | Labels, hints and secondary table text. |
| text-xs | 12/16 · body | BADGES, COUNTS AND TABLE HEADERS |
Skill to transform
Skill to transform
Regular 400: helping people find work.
Medium 500: helping people find work.
Semibold 600: helping people find work.
Spacing, radii and shadows
4px spacing grid. Radii come from the source CSS (3, 5, 6, 8px and pill).
Components
Import from @/components/ui. Every state below is the real component.
Shown as the browser title.
Enter a URL on www.verto.org.au.
| Page | Template | Status | Updated |
|---|---|---|---|
Home / | Home | Done | 3 Nov 2026 |
Find a job /jobseekers/find-a-job | Landing | In progress | 4 Nov 2026 |
Disability Employment Services /services/des | Service | Pending | — |
Contact us /contact | Contact | Pending | — |
Disability Employment Services
/services/des · Service template
No pages yet
Import the information architecture from the project sheet to get started.
Drag and drop
State is set with data-state, so @dnd-kit (or anything else) only has to map its state. Each state changes shape or border style, not just colour.