Design Tokens
Color palette
and system.
An ergonomic, opacity-based color system. No pure black or white — every value is tuned for comfortable reading and WCAG AA compliance. Click any swatch to copy its hex.
Foundation
Ergonomic near-black and off-white foundations — high contrast without the eye strain of pure extremes.
Ink
Ink Deep
Paper Alt
Paper
Text — Light Surface
Opacity-based hierarchy for text on Paper (#FAFAFA). Opacities recalculated from pure-black baseline to maintain AA.
Primary
Secondary
Tertiary
Muted
Subtle
Subdued
Text — Dark Surface
Light text on Ink (#1A1A1A) backgrounds. Each step is verified for AA compliance.
Primary
High
Medium
Base
Secondary
Subdued
Accent — Swiss Red
The signature accent — calibrated per-surface for AA compliance.
Red 700
Red 600
Red 500
Red 400
Accent — Signal
Functional color for status and value — not decoration.
Emerald 500
Emerald 400
Amber 400
Borders & Surfaces
Translucent overlays using ink/paper bases — softer than pure black/white equivalents.
Border Light
Surface Light
Border Dark
Surface Dark
No Pure Extremes
Pure black (#000) on white (#FFF) produces 21:1 contrast — technically maximal, but causes halation, glare, and visual fatigue. Our Ink/Paper pair softens this to a comfortable 16.5:1.
AA Compliant
Every text–background pairing meets WCAG Level AA: 4.5:1 for normal text, 3:1 for large text (≥18.66px bold or ≥24px). Opacity steps are recalculated for the new Ink/Paper base.
Accent Discipline
Color accents signal function, not decoration. Swiss Red for navigation and emphasis, Emerald for status, Amber for value. Each is AA-verified on its intended surface.
Type System
Typography & Scale
Two typefaces, one cohesive system. All sizes in REM, based on a 16px root. Hover any row to copy values.
Space Grotesk
Inter
System Monospace
Headings — Space Grotesk 700
| Element | Size (REM / PX) | Weight / Height | Tracking | |
|---|---|---|---|---|
| Build interfaces at scale. | <h1> |
clamp(2.4883rem, 1.8311rem + 2.9209vw, 4.25rem) clamp(39.81 → 68px) | 700 / 1.02 | 0 |
| Everything you need. | <h2> |
clamp(2.0736rem, 1.5766rem + 2.2091vw, 3.5095rem) clamp(33.18 → 56.15px) | 700 / 1.1 | -0.03em |
| Component Library | <h3> |
clamp(1.728rem, 1.3543rem + 1.6609vw, 2.8076rem) clamp(27.65 → 44.92px) | 700 / 1.15 | -0.02em |
| Accessibility-First Design Systems | <h4> |
clamp(1.44rem, 1.161rem + 1.2401vw, 2.2461rem); clamp(23.84 → 35.94) | 700 / 1.3 | -0.01 |
| 200+ | <h5> |
clamp(1.2rem, 0.9934rem + 0.9183vw, 1.7969rem); clamp(23.044 → 35.94) | 700 / 1.2 | -0.02 |
| Foundation | <h6> |
clamp(1rem, 0.8486rem + 0.6731vw, 1.4375rem); clamp(19.204 → 28.75) | 700 / 1.25 | -0.02 |
Body Text — Google Sans Flex
| Element | Size (REM/PX) | Weight / Height | Tracking | |
|---|---|---|---|---|
| A production-grade component system built on ergonomic color foundations. | Body Large (Hero sub) |
400 / 1.7 | normal |
Flip Flop Expand
Examples of flip flop columns that expand to the viewport edges
Sometimes you want the edges of alternating columns to hug the edges of the viewport, while the content sections are aligned to the rest of the containers.
Feature
A competing headline.
Phasellus consectetur eget metus et dapibus. Nunc tempus luctus velit vel porttitor. Nulla aliquet eros quam, id tincidunt nibh efficitur quis. Quisque tincidunt pharetra scelerisque. Etiam accumsan nulla lacus, in tristique mauris pretium ut. In quis quam mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Second feature
A different headline.
Maecenas condimentum mauris quis consectetur pellentesque. Maecenas tincidunt, urna eget sagittis tristique, eros ex condimentum nulla, sit amet iaculis mi est finibus felis. Suspendisse pharetra purus eu nibh molestie auctor. Mauris magna elit, tempus ac metus eget, ullamcorper suscipit erat. Nam ut sollicitudin arcu.