Datum treats every screen like a drawing sheet: a fixed grid, a title block, dimensions you can trust. Two accents carry the firm's two worlds — survey orange for what is poured and bolted, laser cyan for what is measured and modelled.
Four principles decide every choice below. If a new pattern can't cite one, it doesn't ship.
Screens sit on a visible grid, carry a title block, and dimension what they show. A client should feel the same rigour on the website as on the stamped set.
Survey orange marks the physical: sites, crews, safety, primary actions. Laser cyan marks the digital: sensors, models, live data. Never mix them on one element.
Tolerances, spans, loads, dates. Numbers are set in mono, tabular, with units. They are never rounded to sound impressive.
2 px radii, square line caps, hard borders. Surfaces read as plate steel and cast concrete, not soft plastic. Shadows are almost never used.
Neutrals come from materials on site. The two accents are the only saturated colours allowed outside status states.
Survey orange. Used on light surfaces, sparingly — a page should have one orange primary action and a handful of orange marks.
Laser cyan. Lives on Blueprint navy — dashboards, monitoring, model viewers. Never used as a button on light backgrounds (contrast fails).
Ink and ground swap. The two accents keep their hex values but trade roles: on a dark ground, laser cyan becomes the primary action and survey orange steps back to marking. Status colours are lifted for contrast. Everything else — type, spacing, radii, rules — is identical.
| Token / role | Light | Dark |
|---|---|---|
| Page ground | #E9E7E2 Concrete | #0F1F30 Night pour |
| Panel / surface | #FFFFFF | #16304A |
| Wells, disabled fill | #DDD9D2 Formwork | #1B3550 |
| Ink / primary text | #12263A Blueprint | #E9E7E2 Concrete |
| Secondary text, rules | #5B6770 Steel | #9AA3AA Galvanised |
| Hairlines | #9AA3AA | #4B5A68 |
| Primary action | #F26B1D Survey | #2FB8CF Laser |
| Secondary accent | Laser (dark surfaces only) | Survey (marks, tags) |
| Status pass / watch / fail | #3E8F5A · #D9A21B · #C23B3B | #5FB57C · #E0B03A · #E36B6B |
| Focus ring | #2FB8CF | #2FB8CF (unchanged) |
| Sheet grid | rgba(18,38,58,.06) | rgba(233,231,226,.06) |
A condensed display face with road-sign lineage, a sober body face, and a mono for anything that is a measurement.
We design, model, and inspect the infrastructure a city depends on — and publish the numbers.
The pier caps were scanned at 2 mm resolution on 14 August and compared against the federated model. Deviations exceeding 5 mm were flagged for the site engineer before the next pour.
STA 12+40.00 · EL 214.62 m · Δ +0.003 · N 5 128 934.21 E 341 208.77
Set numbers, coordinates, IDs and dates in mono. Keep display type to two or three words per line. Use sentence case in body and UI.
Don't run body copy in the condensed face. Don't letter-space uppercase display beyond .02em. Don't use italics anywhere — the system has none.
Everything sits on an 8 mm module — 8 px on screen. The page background shows a 64 px sheet grid; components snap to it.
Space tokens: 8 · 16 · 24 · 32 · 48 · 64 · 96. Sections use 64, panels use 24, controls use 8/16. Content measures 1180 px max; text 68ch max. Breakpoint at 800 px collapses multi-column layouts to one.
Enough to build a marketing site, a project dashboard, and a field-inspection form without inventing anything.
One orange button per view. Labels are verbs. Condensed caps, 16 px, 2 px radius.
On Blueprint, cyan takes the primary role. Orange is not used on dark backgrounds.
Progress is shown as distance along a station line, not a percentage. The diamond marks the current head.
| Station | Element | Scan Δ | Tolerance | Result |
|---|---|---|---|---|
| 12+40.00 | Pier cap P2 | +3 mm | ±5 mm | Pass |
| 12+62.50 | Bearing seat B4 | −6 mm | ±5 mm | Fail |
| 13+05.00 | Deck edge, west | +4 mm | ±5 mm | Watch |
40 px grid, 1.5 px stroke, square caps, mitre joins. Drawn like a drafting symbol, not an emoji. A single accent stroke allowed.
One page-load sequence: eyebrow, headline, lede rise 8 px and fade in over 500 ms, staggered 100 ms, easing cubic-bezier(.2,.7,.2,1). Live tags pulse. Nothing else moves. Reduced-motion turns everything off.
Hover states change colour only (150 ms). No lifts, no glows, no parallax.
Write like a stamped drawing note: specific, active, measured. Confidence comes from numbers, not adjectives.
"Scanned 14 Aug. Pier cap P2 within 3 mm of model."
"Request a proposal" · "Download the set" · "Open live monitoring"
Errors: "Month must be 01–12."
"Leveraging cutting-edge technology to deliver world-class infrastructure solutions."
"Learn more" · "Submit" · "Get started"
Errors: "Oops! Something went wrong."
| Rev | Date | Description |
|---|---|---|
| A | 2026-08-16 | Issued for review. Tokens, type, colour, core components. |
| B | — | Reserved: logo, chart styles, map layers, mobile field patterns. |