Design system

The tokens, type and components this site is built from.

Token values on these pages are read from the site’s stylesheet when the site is built, and every component shown is the one the site itself uses. Switch the theme and every specimen follows.

Nick Vyhouski monogramBrowse the colorsDesign engineering

Foundations

Logo
The monogram, its sizes, and how it sits on light and dark.
Color
Surface, text and border colors in both themes, plus the diagram hues.
Typography
The two families and the text styles built from them.
Layout
The page container and its side padding at each screen width.
Radii
The corner tokens and where each one is used.
Effects
The dot field, mesh placeholders, the hover shadow and the blurred nav.
Motion
The entry reveal, hover timings and reduced motion.

Components

Button
The primary button and the quieter text link.
Chip
A small outlined tag for topics and tools on case pages.
Nav tab
The link style used in the site navigation.
Divider
A one-pixel line between blocks of content.
Tile
A project cover with its title, as shown in the work grid.
Figure
A single case-study image with squared-off corners.
Gallery and lightbox
A grid of images that open full screen.
Theme toggle
The sun and moon switch between light and dark.
Search
The button that opens the command palette.
Portrait
The layered portrait whose eyes follow the pointer.
↑ ↓ to move, Enter to open, Esc to close