Design Tokens

Oh, what's this? Just a little place for me to keep track of the CSS variables I'm using for the design of this website!

Typography

Regular (text)

var(--step--2)

var(--step--1)

var(--step-0)

var(--step-1)

var(--step-2)

var(--step-3)

Bold (text)

var(--step--2)

var(--step--1)

var(--step-0)

var(--step-1)

var(--step-2)

var(--step-3)

Black (display)

var(--step--2)

var(--step--1)

var(--step-0)

var(--step-1)

var(--step-2)

var(--step-3)

Italic (text)

var(--step--2)

var(--step--1)

var(--step-0)

var(--step-1)

var(--step-2)

var(--step-3)

Bold Italic (display)

var(--step--2)

var(--step--1)

var(--step-0)

var(--step-1)

var(--step-2)

var(--step-3)

Space

var(--space-3xs)

var(--space-2xs)

var(--space-xs)

var(--space-s)

var(--space-m)

var(--space-l)

var(--space-xl)

var(--space-2xl)

var(--space-3xl)

Borders

Accent

var(--border-s)

var(--border-l)

Foreground

var(--border-s)

var(--border-l)

Foreground + Accent BG

var(--border-s)

var(--border-l)

Radius

var(--radius-s)

var(--radius-m)

var(--radius-pill)