design system · v2 · neutral-led
gökberk. What it's made of.
I'm not a brand. I built the design system anyway — minimal and editorial, now neutral-led: paper and ink do the work, a forest-green stamp marks what matters, and two accents earn their place only where they mean something. Every pairing holds WCAG AAA in both themes.
Principles
A few rules I follow
The whole system descends from these. When a case isn't covered, I derive it from them.
Take things away first
The default answer is less. A part earns its place or it goes. Restraint is the style.
Keep the page quiet
Neutral leads — paper, ink, and grey carry ~70%+ of any view. Calm is the baseline, not the exception.
Neutral leads, colour earns a job
Every colour stands for one specific thing, written down. Colour earns attention by being rare.
Lines and space, not boxes
Structure comes from hairlines and whitespace. One frame per surface; shadows don't do a border's job.
Calm, precise motion
Movement is quick and purposeful — it explains a change, never decorates. It yields to reduced-motion.
Readable from the start
AAA contrast, real focus rings, status by shape and word — accessibility is a gate, not a polish pass.
Colour
Neutral leads. Colour means something.
The palette is closed at three heroes, each with a single named job. Neutral does the work; the brand is a stamp; accents are rationed to meaning. A new colour is a brand decision, never a per-screen call.
Neutral leads. The brand is a stamp. Accents are rationed to meaning. Every colour has a job.
01 — Surface · the neutral field that does the work
02 — Text · tiered by emphasis
03 — Action · the primary is NEUTRAL
04 — Brand · the forest stamp
05 — Product accent · turquoise & sunset, rationed to meaning
06 — Status · always shape + word + colour, never colour alone
In use — neutral leads, the stamp marks, accents mean
Project setup
Neutral carries the surface and the primary action; the brand button is the one forest stamp, and the link is forest too.
Turquoise carries information
Info and data series read in turquoise — a rule and an icon on a neutral surface, never a saturated fill.
The one warm beat
Sunset marks a single featured thing per view — a top-rule and a label, never a coloured card.
Proof — computed live, in the active theme
| Role | Sample | Ratio | Level |
|---|---|---|---|
| ink → canvas | |||
| muted → canvas | |||
| link (forest) → canvas | |||
| turquoise → canvas | |||
| sunset → canvas |
| Pairing | Sample | Ratio | Level |
|---|---|---|---|
| on neutral action | |||
| on brand | |||
| on turquoise | |||
| on sunset |
Typography
Geist, and Geist Mono
One family for display and text; hierarchy from weight, size, and tracking. Geist Mono carries labels, eyebrows, and code.
Space
One scale, named by use
A 4px-baseline scale in rem, with semantic names (inset, stack, inline, section) over the raw steps. Whitespace is a material.
Shape
Corners and borders
Crisp, small radii — 8px is the editorial control radius, not a pill. Hairline borders carry structure; pills are reserved for tags and avatars.
Motion
Durations and curves
Three easing curves that never borrow from each other — precise to enter, dynamic to exit, standard for symmetric micro-states. Sub-300ms transitions; ambient loops in seconds. Honours reduced-motion.
precise · enter
dynamic · exit
standard · micro
State & status
States swap strength, not hue
Hover and active swap a surface role; focus draws the forest ring; selected is the neutral action. Status is conveyed by a rule, an icon, and a word — never colour alone, never a full fill.
Accessibility
AAA, by the numbers
Accessibility is verified, not assumed — every colour pairing, every component, both themes.