Red Dot Tracker

Tokens

Tokens are CSS custom properties that start with --f-. Every color has a dark and a light value; switch the theme in the toolbar and every swatch below follows.

Neutral ramp

A cool gray (C 0.012, hue 260) in 12 steps. Dark pages start from step 1 (darkest) as the background; light pages from step 1 (lightest).

--f-bg

--f-bg-2

--f-surface

--f-fg

--f-fg-2

--f-fg-3

--f-line

--f-line-2

Spacing

Eight steps, from 0.25rem to 4rem.

--f-space-1 · 0.25rem
--f-space-2 · 0.5rem
--f-space-3 · 0.75rem
--f-space-4 · 1rem
--f-space-5 · 1.5rem
--f-space-6 · 2rem
--f-space-7 · 3rem
--f-space-8 · 4rem

Radii

Containers and tiles use continuous-curvature (squircle) corners; pills and circles keep a plain round corner. Safari and Firefox fall back to a plain arc.

--f-r-xs · 6px

--f-r-sm · 10px

--f-r-md · 14px

--f-r-lg · 22px

--f-r-xl · 30px

--f-r-pill

Shadows

Two levels: a surface at rest and a surface that floats.

--f-shadow

--f-shadow-hi

Motion

Three durations and two easing curves. With reduced motion on, the durations become 0 and the dot jumps straight to the end.

--f-dur-1 · 150ms

--f-dur-2 · 250ms

--f-dur-3 · 600ms · --f-ease

--f-dur-3 · 600ms · --f-ease-spring