Foundations

The system behind this page.

Every colour, size and shadow on this site comes from one small set of tokens. This page reads them live from the same stylesheet, so it can’t drift from what you see. Flip the theme in the toolbar and watch the values change.

Color

One accent, two grounds.

--canvas Page background

--panel Panels and odd table rows

--panel-alt Even table rows, hover

--border Every hairline

--text Body text, contrast on canvas

--text-dim Secondary text and labels, contrast on canvas

--accent Active state, bullets, focus ring

--accent-text Accent that carries text: keys, links

--accent-strong Fills under white text: selection, skip link

Typography

Three faces, three jobs.

display Hi, I’m Jakub Pelczar.

headline Where I spend my time.

body I build the frontend other teams build on.

value Design systems, frontend architecture

label section#foundations

Spacing & shape

A short scale, used everywhere.

space-xs2px

space-sm10px

space-md16px

space-lg24px

space-xl48px

radius-sm3px

radius-md6px

radius-lg7px

radius-xl8px

Elevation

Soft lift, one glow.

--shadow-panelEvery panel at rest: an ambient shadow with an inset highlight

--shadow-panel-hoverThe same panel under the pointer

--shadow-ctaThe one coloured glow, reserved for the primary action

Hex values, type specs and contrast ratios are computed in your browser from the live CSS.