design system · v2
gökberk. Built on a grid.
A minimal, editorial design system. The look comes from rigor, not colour: one unit drives everything — sizing, spacing, type rhythm, and how components compose. Colour is reserved for meaning. Verified 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.
One grid underneath everything
4px base, 8px module, 4px baseline. Every size, space, and line-height is a multiple — so nothing is eyeballed.
Take things away first
The default answer is less. A part earns its place or it goes. Restraint is the style.
Colour is meaning, not decoration
Paper, ink, and grey do the work. Colour appears only where it means something — status, data, the brand stamp.
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.
The grid
One unit drives everything
Sizing, spacing, type line-height, panel insets, and composition all snap to one rhythm. That's where a design system earns its "designed" feel — not from colour.
One height contract — controls align by construction
Button, input, and select are all 40px (5 modules) — they line up with no per-pair tuning. Set data-density="compact" and the whole row drops to 32px together.
A card is a grid — nesting snaps to the module
Project setup
The card pads at 24px (3 modules); the content stacks on 8px gaps (1 module); the buttons are 40px (5 modules). Everything lands on the same 8px rhythm — the buttons align to the card's inset edge by construction, not by eye.
Compose with the primitives — .gok-stack, .gok-cluster, .gok-grid + .gok-col-span-* — never ad-hoc gaps. The card's content region is itself a grid.
Typography
Geist, on the baseline
One family; hierarchy from weight, size, and tracking. Every line-height is a multiple of the 4px baseline (body 16/24), so type sits on the same grid as everything else.
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
Colour
Colour is meaning, not decoration
Neutral does ~70% of every view. Colour appears only where it carries meaning — the forest brand stamp, and functional status. The palette is closed; the aesthetic comes from the grid, not the colours. Every pairing is verified AAA, both themes.
Neutral does the work · forest is the stamp
Status — meaning, always shape + word + colour
Proof — computed live, in the active theme
| Role | Sample | Ratio | Level |
|---|---|---|---|
| ink → canvas | |||
| muted → canvas | |||
| link (forest) → canvas |
| Pairing | Sample | Ratio | Level |
|---|---|---|---|
| on neutral action | |||
| on brand |
Accessibility
AAA, by the numbers
Accessibility is verified, not assumed — every colour pairing, every component, both themes.