Dark Edition
The same architecture, re-cut as an engineer's dossier.
- Client
- Ultra Sites — in-house
- Sector
- Studio portfolio
- Year
- 2026
- Reference
- No. 02
Scope
- Design tokens
- Theming system
- Typography
- Parallel deploy
Stack
Ref 02 · interface preview
Overview
One question drove the second build: how much of a brand can live in tokens alone? The Dark Edition answers it — graphite ground, bone text, aged bronze accent — an engineer's dossier cut from the exact same cloth as the Light Edition.
The two sites share a byte-for-byte identical file tree. Only the token sheet, typography and component styling differ, so every behaviour fix lands in both editions at once.
The challenge
Designing a system rigorous enough that two opposite visual languages — warm modular studio and graphite dossier — could run on one codebase without a single structural fork.
The approach
- 01
Semantic design tokens as the only styling contract: components read --bg, --fg, --accent and friends, never a colour, so the whole personality lives in globals.css.
- 02
A shared easing vocabulary and chapter system, proving motion and structure are brand-independent.
- 03
Deployed as its own project on its own port — two complete portfolios maintained for the price of one architecture.
Outcomes
1:1
file-tree parity with Light
2
complete brands, one codebase
1 file
holds the entire visual identity
Next case · Ref 03
Storytelling Edition