Design system · v1.0.0
Everything downstream is measured from here.
The tokens, components, motion and rules the Aurevix site is built from — enough to build the remaining pages without guessing. Toggle the theme in the header: every swatch re-measures its contrast live, so a token that only fails in one mode has nowhere to hide.
01
Logo
A setout is the reference point and lines an entire build is measured from. The mark is exactly that: a building outline, the two setout lines that locate it, and the datum point where they cross. The lines run past the outline on all four sides, because on site they always do — you cannot stand on the corner you are marking.
Clear space
Keep clear space equal to the height of the datum circle on every side. In the lockup, the gap between mark and wordmark is fixed at that same measure.
Minimum size and the small-size variant
24px is the floor. Below about 30px the inner dot fills in visually, so the favicon drops it and thickens the strokes to 1.6. Never scale the 1.3-weight version below 24px.
What not to do
Do not recolour the setout lines to a discipline colour — they are the brand, not a service. Do not crop the lines to the outline. Do not place the mark on a mid-tone photograph; it needs either paper or model space behind it.
02
Palette
Two complete palettes — "paper" and "model space" — not one palette with a dark override. Every token is defined in both. Ratios below are measured live against the surface the token sits on, and re-measure when you toggle the theme.
Grounds
Ink
Mark — the setout colour
Survey marking paint. It is the one saturated colour in the system and it is rationed: the logo, reference crosses, focus rings, active states, checkpoint markers. --c-mark is for strokes and graphics; --c-mark-ink is the text-safe value and is the only one allowed to carry words.
Semantic
03
Discipline coding
Four disciplines, four hues, applied systematically rather than decoratively. The hues follow coordination-model convention so an engineer reads them without a legend. Each has a LINE value for strokes and graphics and an INK value for text, tuned per mode to clear 4.5:1.
Scope a container and every child inside it inherits the accent — no component needs to know which discipline it is showing:
<article class="card card--capped" data-discipline="hydraulic">
<!-- --c-accent, --c-accent-ink and --c-accent-soft
now resolve to the hydraulic set for everything inside -->
</article>
04
Type scale
Space Grotesk for headings — geometric, technical, and distinctive enough that the brand survives without a logo on screen. IBM Plex Sans for body, chosen for legibility at long measures. JetBrains Mono for annotation: sheet numbers, dimensions, labels, data. Every size is fluid between 360px and 1440px viewports, and all three faces are self-hosted — the site makes no third-party request.
Set out first
Sixty-five years
From brief to issued set
Hydraulic services
Documentation and modelling to Australian Standards, issued for your engineer of record.
Sanitary drainage and venting to AS/NZS 3500.2, with fixture unit loading and pipe sizing carried through to the riser diagram.
Card body, list items, form hints and secondary copy.
Indicative fixed fee
SE-M-2102 · REV C · FOR CONSTRUCTION
Measures are capped by token, not by guesswork: --ms-tight
46ch, --ms-body 64ch, --ms-wide 78ch. Body
copy defaults to --ms-body; anything wider than 78ch is a
bug, not a choice.
05
Space scale
Fixed steps up to --sp-6, then fluid. The two that
matter most are --sp-section, the vertical rhythm every
section uses, and --sp-gutter, the page inset — change
either and the whole page rescales coherently.
Radii are deliberately small — --r-2 4px for controls,
--r-3 8px for cards, --r-4 14px for the
estimator panel. This is a drafting board; nothing is pill-shaped
except the range thumb.
06
Components
Every card-like component sets container-type: inline-size,
so it responds to its own width rather than the viewport. The same
card works in a four-up grid and in a sidebar with no extra media
query.
The primary button is an ink/paper inversion, not a coloured slab — it keeps the mark colour reserved for reference points. Minimum target 44px.
Chips carry standards, SLAs and disciplines. Hard-edged at 2px radius — a chip is a small plate, not a pill.
Field labels are mono uppercase — they read as annotation on a drawing rather than as a web form.
Option tiles replace a blank message box. Checked state uses the discipline accent via :has(input:checked).
- Native model — Revit with worksets intact
- Clash report as a spreadsheet
The tick is absolutely positioned, not a grid column — a grid made every inline element its own item and broke on any markup.
Who certifies the work
A left mark rule instead of a tinted box. It reads as documentation, not as an alert.
Used for the honest-position statements. Never for marketing copy.
Numbers are tabular-lined and set in the display face so they do not jitter as the estimator updates.
Skeletons mark genuine pre-hydration only. Never insert an artificial delay to show one.
07
Component states
Hover and focus are shown here with forced classes, since a static
page has neither a pointer nor keyboard focus. Focus is
:focus-visible only — a 2px mark ring at 2px offset,
which stays visible on both grounds without depending on the
component's own background.
Button states.
Field states. Errors are plain-language, not "invalid input".
Status messages. The error always names the fallback route — never a dead end.
What does a CC-stage set contain?
Do you certify the documentation?
Native <details>. Keyboard and screen-reader behaviour comes free; do not rebuild it in JavaScript.
08
Motion
Motion is physical, not decorative: lines snap to reference points
and disciplines overlay into a coordinated model. The signature
easing is --ease-snap — fast travel, hard settle. It
never overshoots, because a setout line that bounces past its datum
is the opposite of the idea.
cubic-bezier(.16, 1, .3, 1) — the brand easing. Reveals, snap points, panels.
cubic-bezier(.4, 0, .2, 1) — colour and border changes, hover.
cubic-bezier(.65, 0, .35, 1) — even and mechanical. Skeleton sweep only.
Reduced motion is a hard requirement, not a nicety
Every animation must be expressible as its final state. Nothing may
depend on an animation running in order to be legible — under
prefers-reduced-motion the reveals, the count-ups, the
line draws and the view transitions all resolve instantly, and the
page is complete. This is also what makes the site verifiable:
headless screenshots are taken with reduced motion forced.
09
Usage rules
Read these before adding a page. Each one exists because breaking it caused a real bug.
Prefixes are load-bearing
--c- colour, --sp- length, --fs- font size, --r- radius, --dur-/--ease- motion. A colour token never holds a length and a length token never holds a colour. A sister project aliased three length tokens onto colours and the layout collapsed silently.
Never patch a component for a band
A .band is handed the opposite palette wholesale, so everything inside it inverts on its own. Writing .band .my-thing { color: … } re-introduces exactly the bug the wholesale swap prevents — and the next component someone adds will not know to patch itself. There are deliberately zero per-component band overrides in this codebase.
Define every colour in both modes
tokens.css is generated from _build/build_tokens.py, which fails the build if the light and dark palettes do not have identical keys. Add a colour there, never by hand in the CSS.
Grid containers make every element child a grid item
A list item styled as a two-column grid put a <strong> in the text column and auto-placed the text after it into the next row's 18px icon column — one word per line. If a component's content might contain markup, indent with padding and position the decoration absolutely.
The mark colour is rationed
Logo, reference crosses, focus rings, checkpoint markers, one word in the hero headline. It is never a large fill and never a section background. If a page needs emphasis, use the ink/paper inversion — that is what .band and the primary button are for.
Discipline colour means a discipline
Cyan, amber, green and red identify mechanical, electrical, hydraulic and fire. They are never borrowed for decoration, and red in particular is never used for anything but fire services and error states.
Self-hosted fonts, no third-party requests
Three variable woff2 files, preloaded, with a weight range each. Do not add per-weight files and never link a font CDN — the site currently makes zero external requests and that is a data-handling claim on the homepage, not just a performance preference.
No thin pages
A page holding only a widget or a form reads as a doorway page. Every page gets real copy that exists nowhere else on the site.
Commercial numbers live in config.js
Fees, turnaround, SLA text, contact details and the domain are all in assets/js/config.js. Never hard-code a price, a date commitment or an email address into markup — and never publish a figure that has not been approved.