Design systemPro

DATUM

A measured system for builders, engineers and developers: formwork shapes, a level staff and one datum line.

Everything on the bench is live. Hover it, type in it, tab through it, or flip Phase.

About the system

Built from: DATUM website
Components: 35 in 7 groups, every state
Typefaces: Archivo, Schibsted Grotesk
Phase: Day one is the site at night under the work light; handover is limestone in daylight. Flip it and surfaces turn, pictures from one camera swap frames, and copy written for one phase gives way to the other.
Format: HTML, CSS and JavaScript with no dependencies, plus DESIGN.md
Version: 1.0

A project site-update page built only from the kit. It ships as the starter, ready to rename.

DESIGN.md: Rules for building with the system, written to hand to Claude, Lovable or a developer
tokens/tokens.json: Every colour, size, space and timing as named tokens, with both phases
tokens/tokens.css: The same tokens as CSS variables, including Day one and Handover
css/datum.css: All components and their states
js/datum.js: Phase, tabs, index, dialogs, toasts, levels, pins, staff and loader. No dependencies
components.html: Every component in every state, side by side
starter/index.html: A project site-update page built only from the system
assets/imagery/: Site camera, worklight and handover photographs at full resolution
LICENSE.md: Commercial use in your own and client projects

Attach DESIGN.md
Add it to your conversation in Claude, Lovable or any AI builder.
Describe your page
In your own words, with your own brand and content.
Keep the code or port it
Link the token and component CSS, or ask for React. The rules hold either way.

Layout: Grid and staff lane, Datum line, Section head
Actions: Button, Ghost button, Key button, Text link
Input: Text field, Select, Textarea, Checkbox, Level radio, Key switch, Segmented control, Phase switch
Data: Stepped tabs, Project index, Schedule table, Level readout
Status: Status tag, Alert, Footing steps, Pour meter, Toast, Loader
Content: Notched panel, Framed card, Plate, Phase plate, Survey pin, Ground mark
Overlay and navigation: Dialog, Navigation bar, Level staff, Chapter bar and menu

See the full website the system comes from.