Design tokens

Tokens are CSS custom properties. Colour, fonts and radius come from the active preset; everything on this page lives in src/styles/tokens.css and is the same in every preset. tailwind.config.mjs maps the tokens to Tailwind utilities, so you use them as ordinary classes.

The values below are read from tokens.css when the docs are built.

Type scale

A fluid scale: each step grows smoothly between a 360px and a 1440px wide viewport, so headings never need breakpoint overrides. Resize this window to watch it work.

1. Swift

   text-megaThe footer wordmark, 404clamp(4.2rem, 1.5rem + 12.5vw, 15rem)

2. Swift

   text-4xlPage titlesclamp(3rem, 1.9rem + 5vw, 7rem)

3. Swift

   text-3xlSection headingsclamp(2.5rem, 1.85rem + 2.9vw, 4.8rem)

4. Swift

   text-2xlCard titles, big linksclamp(1.95rem, 1.6rem + 1.6vw, 3.2rem)

5. Swift

   text-xlSub-headingsclamp(1.5rem, 1.33rem + 0.78vw, 2.1rem)

6. Swift

   text-lgLead paragraphsclamp(1.2rem, 1.12rem + 0.38vw, 1.45rem)

7. Swift

   text-baseBody copyclamp(1rem, 0.96rem + 0.18vw, 1.125rem)

8. Swift

   text-smSecondary text, UIclamp(0.84rem, 0.82rem + 0.12vw, 0.92rem)

9. Swift

   text-xsMeta labelsclamp(0.72rem, 0.7rem + 0.1vw, 0.78rem)

Space

Token	Tailwind	Value	Use
--gutter	px-gutter	clamp(1rem, 0.6rem + 1.9vw, 2.5rem)	Page side padding, also inside .container-page
--space-section	py-section	clamp(5rem, 3.5rem + 7vw, 11rem)	Vertical rhythm between sections
--nav-height	pt-nav	4rem	Height of the fixed header; main content is offset by it

Layout helpers in global.css:

• .container-page: max width 1440px, centred, with the gutter on both sides.
• .grid-page: a 4-column grid on phones and 12 columns from the md breakpoint.

Breakpoints are Tailwind’s: sm 640px, md 768px, lg 1024px, xl 1280px, 2xl 1536px.

Motion

Token	Tailwind	Value	Use
--ease-out	ease-out	cubic-bezier(0.16, 1, 0.3, 1)	Everything that arrives
--ease-in-out	ease-in-out	cubic-bezier(0.65, 0, 0.35, 1)	Curtains, loops
--dur-fast	duration-fast	180ms	Colour, hover
--dur-base	duration-base	420ms	Reveals, menus
--dur-slow	duration-slow	900ms	Load-in, image zoom

See Motion for the patterns built on these.

Layers

The only z-index values in the codebase. Use the utility, never a number. The mobile menu is a native <dialog>, which sits in the browser’s top layer and needs no z-index at all.

Token	Tailwind	Value	Use
--z-raised	z-raised	10	Spare level for content lifted above its neighbours
--z-preview	z-preview	30	The floating project preview on the home page
--z-nav	z-nav	40	Header and preset switcher
--z-overlay	z-overlay	50	The skip link, above everything else

Width axis

Token	Value	Use
--stretch-display	118%	Width of .type-display: numbers, labels in bento cells
--stretch-heading	108%	Width of .type-heading: section headings
--stretch-ui	112%	Width of buttons and UI labels

The fonts clamp these to their own range, so the same value works in every preset. The hover range for .stretch comes from the preset. See Typography.

Colour

Colour tokens are per preset. The roles and their Tailwind names are listed on the Presets page. Two fixed colours sit outside the presets: night (#0E0E10) and day (#ECECE8), for text laid over photographs, where the theme’s own colours can’t be relied on.

Changing a token

Edit the value in src/styles/tokens.css. Everything that uses the token follows. Only add a new token when a value repeats in three or more places; a one-off value belongs in the component.