Work
Services
Stacks
ContactInternal Living document Rendered from the real tokens
SYSTEM
Colour
One accent. Everything else is neutral. The accent does all the pointing: links on dark, the logo dot, focus rings, the voice CTA. If two things glow, one is wrong.
Type
One family: Inter Tight, variable. Light 300 body, Medium 500 labels, Bold 600 headings and strong, Black 800 for display and the mark only. Never italic.
Surface & rhythm
- ✓Radii: 4px tags, 8px components, 16px cards. Nothing else.
- ✓Hairlines are 0.5px solid or the 8px dotted rule; the dotted rule separates, the solid line contains.
- ✓Section spacing is fluid clamp, never fixed px. Content column is 931px, full bleed is 1816px.
- ✓Photography rests grayscale and gains colour on interaction. Faces are round, brand marks are square.
Components
Motion
One easing, four durations. The signature is “the rule draws first”: dotted rules draw in, content rises from under them on a 60ms stagger grid, media develops bottom-up. Micro-interactions never perform; reveals happen once.
| --ease-dom | cubic-bezier(.7, 0, .16, 1) | every transition on the site |
| --dm-micro 0.22s | hovers, presses, arrows | named properties only, never all |
| --dm-fast 0.45s | panels, drawers, accordions | menus, dropdowns, modals |
| --dm-base 0.7s | scroll reveals, lazy media | rise + fade on the 60ms grid |
| --dm-slow 0.9s | rule draw, media develop | one signature moment per view |
Iconography
Four glyphs run the whole site: the solid arrow, the chevron, the check, and the d. arch. Solid fills, no stroke icons, no icon library. If a new icon is needed, the answer is usually a word.
Characters
The delight layer speaks in one voice: dry, brief, never precious. The cookie popup that sets no cookies. The Brown Snake eating through Brisbane venues. The footer images that chase the cursor. The nav that says Dom is listening. One per screen, all dismissible, none load-bearing.
