gökberk. design system
Foundations

What it's made of.

The colours, type, space, and motion the system is built on, and why each is set the way it is. Everything below is live.

Contents Colour Typography Space Layout & grid Shape & line Depth & layering Motion State Density Status & focus Accessibility
Principles

A few rules I follow

There aren't many. The rest of the page is these, in practice.

  1. Take things away first

    Fewer borders, fills, and colours. If a simpler version works, that's the one.

  2. Keep the page quiet

    Monochrome, with one green. My colour, used sparingly.

  3. Lines and space, not boxes

    A thin line and some room usually beat another box.

  4. Calm motion

    Quick, and out of the way. If you notice it, it's too much.

  5. Readable from the start

    Colours clear AAA contrast in both themes.

00 — Colour

Two tiers, theme-aware

A fixed core of colours, plus semantic roles that swap with the theme. The accent is one green, named Ionia after the Aegean coast I grew up on. Authored in OKLCH.

Core & accent
Neutral ramp
01 — Typography

Geist, and Geist Mono

Geist for everything you read, Geist Mono for labels and code. The sizes and weights are below.

Expressive Advancing the craft
Headline 1 Designed with restraint
Headline 3 A heading at headline-3 size
Eyebrow Section label · mono
Body intro A larger lead paragraph to open a section, set in the text family at a comfortable measure.
Body regular The everyday paragraph. Sixteen pixels, with line height set for comfortable reading over longer stretches of text.
Caption Small print, metadata, and captions.
Metric €29,700.00
Metric small 1,234 — a number is data, not a headline: tabular by default, and it never grows at desktop.
Tabular numerals 1,204.50  ·  98,330.00  ·  7.25 — digits share a width with .gok-tabular-nums, so columns line up.
02 — Space

One scale, named by use

A single rem-based scale. Components ask for inset, stack, or inline instead of a number.

The scale
Inset · padding inside a surface
inset-s · 0.75rem (12px)
inset-m · 1rem (16px)
inset-l · 2rem (32px)
Stack · vertical gap between blocks
stack-s · 0.5rem (8px)
stack-m · 1rem (16px)
stack-l · 2.5rem (40px)
Inline · horizontal gap in a row
inline-s · 0.5rem (8px)
inline-m · 0.75rem (12px)
inline-l · 1.5rem (24px)
03 — Layout & grid

Columns and widths

A narrow width for reading, wider ones for layout and media, on a twelve-column grid. Resize to watch it shift.

Active breakpoint: —
container · prose — 72ch (text measure)
container · content — 75rem / 1200px (default sections)
container · wide — 90rem / 1440px (galleries, media)
container · bleed — full width
12-column grid · .gok-grid
span 6
span 6
span 4
span 4
span 4
3
3
3
3
Auto grid · .gok-grid.gok-grid--auto
auto
auto
auto
auto
auto
auto
App shell · .gok-app-shell

The canonical top‑nav + side‑nav + content composition: the top bar and rail stay pinned; only the content scrolls. The app composes the shell (design‑language Axis 13) — these classes just supply the correct structure. Scroll inside the panel:

gökberk. topbar · pinned

Only this panel scrolls — the top bar and rail above and to the left stay put.

Row one. Row two. Row three. Row four. Row five.

Keep scrolling…

…and the chrome never moved.

04 — Shape & line

Corners and borders

6px corners on controls, 12px on surfaces. Borders are 1px unless something needs more.

Radius
radius-s · 2px
radius-m · 6px
radius-l · 12px
radius-pill
Border width
hairline · 1px
regular · 2px
strong · 4px
05 — Depth & layering

Z-index, shadow, and flat colour layers

Named z-index levels so layers don't clash. Shadows are kept for the few things that float. Dense, nested surfaces stay flat — separated by colour layers, not shadow.

Elevation · only for true floats
shadow-1 · raised
shadow-2 · overlay
shadow-3 · modal
Colour layers · flat depth for dense, nested surfaces
layer-01 · base raised surface
layer-02 · nested panel
layer-03 · deepest nest
Layering · the z-index scale
z-sticky · 100
z-dropdown · 200
z-modal · 400
06 — Motion

Durations and curves

Transitions stay under 300ms; a couple of slower loops; three easing curves. Click a row to try one.

Durations · tap to play
Easing · tap to play
Ambient · always running
loop · 1.2s
shimmer · 1.8s
pulse · 1.6s
07 — State

One wash for every state

Hover, focus, and pressed are the same ink wash, a little stronger each step. It mixes in place, so both themes get it for free.

State-layer washes · ink over a surface
Rest
surface · no wash
Hover
opacity-hover · 0.04
Focus
opacity-focus · 0.08
Pressed
opacity-pressed · 0.12
Disabled & scrim
Disabled
opacity-disabled · 0.4
Dialog content behind
color-scrim · 0.5 backdrop
08 — Density

Regular, compact, and condensed

Every control sizes from one value, --gok-density-control-height, so a density switch shrinks the whole interface at once. Same button, three densities — condensed (28px) is the ops/terminal grade for data grids and log views.

data-density="regular" · 40px Save changes
data-density="compact" · 32px Save changes
data-density="condensed" · 28px Save changes

And a second switch: editorial or product

The desktop type scale grows the display roles, because a headline set against a wide reading measure should. In a dense product surface that is wrong — a metric on headline-2 lands at 44px beside 14px body text. data-scale="product" holds them at their mobile sizes. It adds no values: gök's product scale is its mobile scale.

editorial · headline-2 = 44px $1,250.00
data-scale="product" · headline-2 = 30px $1,250.00
09 — Status & focus

Status, and the focus ring

Status shows as a line, an icon, and words together. Focus is a 2px outline that holds up in any mode.

Status · the token and its consumer
Focus ring
2px accent outline · offset 2px Tab through the page to see it live on every control.
10 — Accessibility

AAA, by the numbers

Every text colour clears 7:1 in both themes. The greys are evenly spaced, so contrast is just how many steps apart two are.

Text on the canvas

Ink on paper

text · ≈ 16:1 · AAA

Muted secondary text

text-muted · ≥ 7:1 · AAA

An accent link

link · ≥ 7:1 · AAA
Next

Next, the components

Same thinking, now you can click them.