Proof of practice · Brand Development
Our system,
in public
This is not a case study about a design system. It is the design system this page is rendered from. Every token below is live — change one value in tokens.css and this page changes with the rest of the site. If we could not hold our own rules, you should not let us write yours.
Colour
Eight values with defined roles. A colour without a role is decoration, and decoration gets used inconsistently by definition.
The one rule that matters
Mint is the action colour and nothing else. The moment a mint element is not clickable, every mint element stops meaning anything. Same rule, different colour, applies in any system worth having.
Type
League Gothic compressed for display, Lato for anything you have to read, JetBrains Mono for labels and data. Three families, no exceptions, no decorative fourth.
| Token | Family | Size (px) | Use |
|---|---|---|---|
--k-t-mega | League Gothic | 56 → 160 | Hero only. One per page. |
--k-t-xxl | League Gothic | 42 → 100 | h1 on interior pages. |
--k-t-xl | League Gothic | 34 → 68 | Section headings. |
--k-t-lg | League Gothic | 25 → 38 | Large card headings. |
--k-t-md | League Gothic | 27 | Standard h3. |
--k-t-lede | Lato | 17 → 21 | Lede paragraphs. |
--k-t-base | Lato | 16.5 | Body copy. |
--k-t-label | JetBrains Mono | 11 | Labels, eyebrows, buttons. |
Live specimen
Systems, not visuals
Lede text carries the argument. It is dimmed rather than sized down, so the hierarchy survives being read on a phone at arm's length.
Body copy sits at 16.5px with a 1.65 line height. Long enough to read comfortably, short enough that a paragraph does not become an obligation.
Labels are mono, uppercase, letter-spaced
The signature
Every system needs one thing that is unmistakably yours. Ours is chromatic aberration — a magenta and mint RGB split on display type, borrowed from a printing error and used deliberately.
Most brands are broken
.k-split-text — magenta 3px left, mint 3px right
Rule 01
Display type only
Never on body copy. It is a signature, not a texture, and it destroys legibility below about 32px.
Rule 02
Offset stays proportional
3px at hero scale, 2px below it. Fixed offsets look accidental at the wrong size.
Rule 03
One per viewport
Two split headlines in view at once and neither reads as deliberate.
The structural accent
The rainbow stripe brackets every page — top and bottom, six pixels, five fixed segments. It is the only ornamental element in the system, which is what lets it work.
Components
Rendered live from the same stylesheet the rest of the site loads.
Buttons
One primary per screen region. Ghost for the secondary path. Magenta is reserved for destructive or contrarian actions and is almost never used.
Tags
Mint tags carry confirmed numbers and nothing else. That constraint is what makes them credible on the proof wall.
Form controls
Motion
- 150ms — hover and focus. Anything slower feels broken.
- 280ms — state changes, drawers, accordions.
- 600ms — scroll reveals and data animations only.
- Always —
prefers-reduced-motiondisables all of it. Non-negotiable.
Voice
The part most systems skip, which is why most brands look consistent and read like four different companies.
We do
State it plainly
Short sentences. Concrete nouns. The uncomfortable version rather than the diplomatic one.
We do
Frame in outcomes
Not "we offer brand strategy". What breaks without it, and what it costs.
We do
Ask open questions
Open questions over hard closes. If the offer needs pressure, the offer is the problem.
We never
Manufacture urgency
No countdown timers, no expiring slots. We flagged it as a red flag in a client audit, so we do not run it on ourselves.
We never
Use filler
No “in today’s fast-paced landscape”. If a sentence survives being deleted, delete it.
We never
Claim what we cannot show
Every number on this site was confirmed in writing. One fabricated figure costs the whole wall.
Want one
of these?
A system you can hand to someone else and have them build in it correctly on the first try. That is the deliverable — not a folder of files.