Design tokens

The System Behind This Site

Every color, corner, and animation here comes from a short list of named values called tokens. Components never use a raw color; they ask for a role, like “primary text”, and the token decides what that means. This page reads the list straight from the live stylesheet, so it’s always current.

Color Roles

Thirteen roles cover the whole site. Each has a light and a dark value, and the arrows show which brand color a role points to when a brand theme is on.

Four Brands, One Set of Components

Each client’s colors are stored under their own names. Switching brands only changes where the roles above point; no component is rewritten. Hover a project on the homepage, or press I on any page and pick a brand, to watch it happen.

Type

Eight sizes and nothing in between. Body copy is 18px. Headings move between two neighboring sizes so they shrink on small screens.

Shape

Five corner tokens. Brands change these too: Logan Hollowell and Dgistics go square, The Clean Bean goes soft.

Motion

One rule: everything settles. Movement starts quickly and eases to a stop, using one curve and four durations. Nothing on the site animates on any other timing, and it all switches off if your device is set to reduce motion.

Components

The names Inspect mode uses. Press I on any page to see them outlined in place, with the tokens each one uses.

For Machines

The same system in formats that AI tools and scripts can read.