Skip to main content

Visual system

Glyph Design System

A token-first, multi-brand design system built to support light/dark modes and three product surfaces from a single shared foundation.

Year2024
CategoryVisual system
FigmaStorybookTailwind
Design systemTokensMulti-brand
Glyph Design System cover

Glyph started from a recurring pain: every new product surface required re-solving the same visual problems — color contrast, spacing rhythm, and interactive states — from scratch.

The system is built token-first, meaning decisions about color, spacing, and type are encoded as named values before any component is drawn. This makes brand updates, dark mode, and multi-product theming a configuration problem rather than a redesign.

Token foundation color scales
Color scales derived from perceptual lightness steps, not arbitrary hex picks. Both light and dark modes share the same semantic token names.
Typography scale
7-step type scale with display, heading, body, label, and mono variants. All step sizes are referenced by semantic tokens, not raw values.
Component library form elements
Form components in all 4 states — default, focused, error, disabled. Each state maps to a semantic token, not a hardcoded color.
Dark mode component set
Dark mode flipped entirely via token swap — zero per-component overrides required.
Spacing and layout tokens
Spacing tokens built on a 4px base grid with named aliases (xs to 3xl) for predictable rhythm across components.
Let's talk