Studio
The design system
This page is generated from the real stylesheet. The hex values, the contrast ratios and the type scale below are read out of main.css at build time, so it cannot describe a system this site does not have. Change a token and this page changes with it.
25 tokens in light, 25 in dark, 14 contrast pairs checked in both. If any pair fell below the threshold, the build would have failed before this page existed.
01. The idea
Built in stages you can see
A website is not a one-off artefact. It is a thing that improves in recorded steps, and the client owns every one of them.
That is the product and it is also the design brief. Every visual decision on this site either carries the idea or gets cut.
- The mark is an E whose three arms step outward on a shared diagonal
- The hero diagram is the same geometry, six bands wide, one per delivery stage
- Stage numbers are set in mono, because they are a record rather than an ornament
- Section rhythm alternates ground, so the page reads as strata rather than a scroll
What it is not
No upward arrows, no rocket, no abstract swoosh, no gradient mesh. Evolution as a word invites all of them and every one of them is a stock idea that a hundred businesses already use.
The interesting reading of evolution here is not “we grow” but “it happens in stages, and you can see each one”. That is harder to draw and worth more, because it is a claim the business can actually keep.
02. The mark
Construction, lockups and the rules
Drawn on a 48 unit grid. Spine seven units wide, three arms seven units tall, each cut on the same five-over-seven diagonal, tips stepping eight units at a time.
Clear space and minimum size
Clear space on every side equals the spine width, which is one seventh of the mark’s height. Nothing sits inside it, including the wordmark.
Minimum size is 16 pixels for the mark alone and 110 pixels wide for the full lockup. Below that the mono subline stops being readable and should be dropped rather than shrunk.
Colour
- Mono ink is the default, and it is what goes on anything printed or embroidered
- Accent base arm is for the favicon, the app icon and any place the mark appears alone at a size where it can carry colour
- Reverse is bone on ink, with the base arm in the light accent
Lockups
The files
SVG, because the mark is geometry rather than pixels and there is no size at which it needs a raster version. Anything that insists on a bitmap should be exported from these at the size it needs.
- mark.svg the mark in ink, for anything printed, embroidered or single colour
- mark-accent.svg the mark with the base arm in clay, for the app icon and any standalone use that can carry colour
- mark-reverse.svg bone on ink, for dark grounds
- logo-lockup.svg the full horizontal lockup with the wordmark
- favicon.svg the browser tab and app icon, drawn heavier so it survives 16 pixels
What not to do
Never rotate
The diagonal is the idea. Tilting the mark reads as a mistake rather than as motion.
Never stretch
The 5 over 7 diagonal is fixed. Distorting it breaks the relationship with the strata diagram and the stepped rule.
Never recolour
Three approved colourways exist. Any other pairing is untested for contrast and most of them fail.
03. Colour
Strata
Basalt ink on bone paper, with clay for action and verdigris for a second signal. The values below are read out of the stylesheet, not typed into this page.
Ground
Paper is bone, not white. Surfaces sit above it, and the filled section is one step down so alternating bands read without a border.
Ink
Three weights of text and nothing more. If a fourth is needed the hierarchy is wrong, not the palette.
Clay, the accent
Action, emphasis and the current stage. Used on about two percent of any page. An accent that appears everywhere is a background colour.
Verdigris, the second signal
Reserved for a second data series or an informational note. It never competes with clay for the same job on the same page.
Inverted
The dark band is a structural break in the page rhythm, not a theme. It carries its own ink, rule and accent so it works inside both colour schemes.
States
A flag is a caution the reader has to act on. Good is used sparingly, and never as decoration on a claim.
Contrast, measured
Computed at build time from the same hex values above. WCAG 2.2 AA needs 4.5 to 1 for body text and 3 to 1 for interface borders. Every row is checked in both colour schemes and a failure fails the build.
| Pair | Where it is used | Needs | Light | Dark |
|---|---|---|---|---|
| --ink on --paper | Body text on the page | 4.5 | 16.51 | 16.05 |
| --ink-2 on --paper | Secondary text on the page | 4.5 | 8.65 | 8.57 |
| --ink-3 on --paper | Mono labels on the page | 4.5 | 6.14 | 6.48 |
| --ink-3 on --paper-2 | Mono labels on a filled section | 4.5 | 5.62 | 5.98 |
| --accent on --paper | Links and accent text | 4.5 | 5.5 | 7.95 |
| --accent on --accent-bg | Accent text on its own wash | 4.5 | 5.24 | 7.16 |
| --accent-2 on --paper | Second accent on the page | 4.5 | 7.76 | 9.62 |
| --on-accent on --accent | Button text on the accent fill | 4.5 | 6.03 | 7.6 |
| --paper on --ink | Button text on the ink fill | 4.5 | 16.51 | 16.05 |
| --inverse-ink on --inverse-bg | Text in the inverted band | 4.5 | 15.91 | 15.35 |
| --inverse-ink-2 on --inverse-bg | Secondary text in the inverted band | 4.5 | 7.57 | 6.98 |
| --inverse-accent on --inverse-bg | Links in the inverted band | 4.5 | 7.6 | 5.11 |
| --flag on --flag-bg | Caution text on the caution wash | 4.5 | 6.55 | 9.28 |
| --rule-strong on --paper | Input borders, a non-text requirement | 3 | 4.3 | 4.51 |
The checker reads the tokens out of the stylesheet rather than holding its own copy, and it carries a control pair that must fail. A checker with a private palette will happily certify a stylesheet it has never read.
04. Typography
Three families, three jobs, no overlap
All self-hosted, latin subset, so no page makes a request to a third party. That is also what makes the privacy position on this site true rather than aspirational.
Built in stages
A price you can hold me to
High contrast, warm, and unmistakably not the default. Set with soft and wonk at zero so it reads editorial rather than decorative, and tracked tight at display sizes.
The quick brown fox jumps over the lazy dog. 0123456789
Neutral by design. Its job is to be read for four hundred words without drawing attention to itself, and to sit under a display face with real personality without arguing with it.
Section label, uppercase, tracked
$5,000 · 24.00 h · v0.40.0-pre
Anything that is a record is set in mono: versions, prices, hours, stage numbers, timestamps. It is a signal that the number came from somewhere, not from a designer.
The scale
Fluid between a 390 pixel phone and a 1440 pixel desktop. Two steps below the base and five above, which is enough for any page here. A size not on this list does not get used.
--step--2
0.75rem · Micro labels, table headers
--step--1
0.8125rem · Small text, hints, captions
--step-0
1.0625rem · Body
--step-1
1.125 to 1.3125rem · Lede, large body
--step-2
1.4 to 1.75rem · Heading 3
--step-3
1.75 to 2.4rem · Heading 2
--step-4
2.15 to 3.4rem · Heading 1
--step-5
2.6 to 5rem · Display
Rules
- Body copy sits on a 34rem measure, roughly 68 characters. Wider than that and the eye loses the next line
- Headings use text-wrap: balance, so a two line heading never leaves one orphan word
- Numbers in tables and readouts are tabular, so columns of figures line up
- No heading level is ever skipped for visual effect. If an h3 looks wrong, the size is wrong, not the level
- Weight synthesis is off. A weight that does not exist in the file is not faked by the browser
05. Space and layout
One scale, one grid, one measure
The spacing scale
Ten steps from 4 to 128 pixels. Spacing that is not on the scale is a decision nobody can repeat.
--s-1
4px
--s-2
8px
--s-3
12px
--s-4
16px
--s-5
24px
--s-6
32px
--s-7
48px
--s-8
64px
--s-9
96px
--s-10
128px
The page
- Container is 76rem wide, with a 1.25rem gutter that drops to 1rem below 480 pixels
- The label and content grid splits at 13rem plus the remainder, and collapses to one column below 56rem
- Sections are 96 pixels of vertical padding, 48 in the tight variant
- Every grid track that can hold a wide table is pinned to min-width: 0, or one table pushes the whole page sideways
Twelve columns, used as a reference rather than a rule. Most layouts here are two or three tracks with a fixed label column.
06. Components
The kit
Small, and deliberately so. Every component here is on at least three pages. A component used once is a style, not a system.
One primary action per view. The ghost is for the secondary path, never for a second primary.
- What is in the price
- Checked before launch
- Quoted separately
- Outside the product
A quiet aside that supports the paragraph above it.
An emphasis note. Used where the reader would otherwise miss a commitment.
A caution the reader has to act on.
A second signal, for method and reasoning rather than action.
Final payment falls due before go-live. Your accounts are never used as leverage.
07. Motion
Ten pixels, once
Content fades in and rises ten pixels as it enters, once, and is never animated again. Hover states are 160 milliseconds. Nothing loops, nothing parallaxes, nothing bounces.
The strata bands stagger by 60 milliseconds each so the sequence reads as stages rather than as a single block arriving. That is the only choreographed moment on the site, and it is choreographed because it carries the idea.
The two rules that matter
- Reduced motion is honoured absolutely. Under that setting the reveal never initialises and every transition drops to a millisecond
- Content is never hidden by default. The hidden state is applied by JavaScript, and a watchdog reveals everything after 1.2 seconds if the observer never fires. Content that depends on an animation to become visible is content you can lose
08. Voice
How it is written
The writing is the differentiator, not the layout. Anyone can buy a nice template. Almost nobody publishes their own exclusions.
Rules
- Australian English, always
- Say the number. “From $5,000 plus GST”, never “affordable” or “competitive”
- Every price is shown once, before GST, and never both ways
- Name the limit in the same breath as the claim
- Second person. The reader is “you”, the operator is “I”
- No dash used as a separator anywhere, in any sentence
Never
- A promise a platform decides: rankings, citations, traffic, leads, approvals
- “Bespoke”, “cutting edge”, “passionate”, “solutions”, “seamless”, “elevate”
- A superlative with no measurement behind it
- A testimonial, statistic or result that is not real and attributable
- A GST inclusive figure, or the same price written two ways
Six of those are enforced by a script that reads the built HTML and fails the build. The rest are enforced by reading it back out loud.
09. Enforcement
A convention nothing checks is a hope
Four gates run on every build. Each one carries a control that must fail, because a gate that has never failed is a gate nobody has tested.
| Gate | What it refuses | Its control |
|---|---|---|
| Contrast | Any colour pair below WCAG 2.2 AA, in light or dark, read out of the real stylesheet. | White on near-white must fail, or the maths is broken. |
| Content | A dash used as a separator, a GST inclusive figure, a claim with no qualifier on it, text left in from a template, an American spelling, a bad title or description, a heading jump, a missing alt, a dead internal link, vague link text, or a page whose indexing state is wrong. | A synthetic page written to breach every rule, which must trip every rule. |
| Accessibility | Any axe violation across every page, in two colour schemes and two widths, including the interactive states that only exist after a form is submitted. | The interactive audits themselves. A static audit of a page that renders its answer in JavaScript audits the empty state and reports success. |
| Release | A version with no changelog entry, an entry with no reasoning, a missing standard artefact, and at release a dirty tree, a tag not at HEAD or a missing archive. | Ten forced failures and two clean-tree passes. |
This is the part that is hard to copy, and it is the part clients are actually buying. The design is the visible half of a system whose other half refuses to let it decay.