Design system

The system behind this site.

Everything on codion.tech is built from the tokens and components on this page. It is a small system: one accent, three typefaces, four easing curves.

(01)

Color

Warm ink and paper neutrals with a single accent. Switch the theme to see both sets.

Background
--background
#f4f1ea#0d0c0a
Card
--card
#fbf9f4#151411
Muted
--muted
#ebe7de#1a1815
Border
--border-strong
#14130f / 28%#f1ede4 / 26%
Muted text
--muted-foreground
#5f5b52#a09a8d
Foreground
--foreground
#14130f#f1ede4
Ion
--ion
#f04a12#ff5a1f
Ion text
--ion-text
#b8340a#ff6a33

(02)

Typography

Geist for text, Geist Mono for labels, Instrument Serif italic for emphasis.

text-hero3.25 → 8.75rem · 0.94 · −0.045em
Details are the product.
text-display2.25 → 5.5rem · 1 · −0.04em
Details are the product.
text-title1.75 → 3rem · 1.08 · −0.03em
Details are the product.
text-lead1.125 → 1.5rem · 1.45
Details are the product.
label-mono0.75rem · Geist Mono · 0.08em
Details are the product.
accent-serifInstrument Serif Italic
Details are the product.

(03)

Motion

Four curves and four durations cover every transition on the site. Hover a track to replay it.

--ease-out-expocubic-bezier(0.16, 1, 0.3, 1)
--ease-out-quartcubic-bezier(0.25, 1, 0.5, 1)
--ease-in-out-quartcubic-bezier(0.76, 0, 0.24, 1)
linearlinear

180ms
--duration-fast
320ms
--duration-base
700ms
--duration-slow
1100ms
--duration-slower

(04)

Layout

A fluid gutter, a 96rem container and section spacing that scales with the viewport.

--gutterclamp(1.25rem, 4vw, 3.5rem)
container-pagemax-width 96rem
section-yclamp(4rem, 2.5rem + 6vw, 8rem)
--header-height4.5rem

Radius

sm
md
lg
xl
2xl
3xl
full

(05)

Components

Primitives are restyled shadcn/ui on Base UI. Motion components are our own.

Buttons