Design tokens
How we name, layer, and consume the system's primitives.
DocumentedTypography
Founders Grotesk X Condensed, Inter Tight, Martian Mono — and the scale that uses them.
DocumentedColor
Surfaces, text, borders, status. OKLCH foundations, semantic token roles.
DocumentedSpacing
The 4-pixel grid, the Tailwind scale, and the rules for padding, gap, and page rhythm.
DocumentedBreakpoints
Tailwind's standard breakpoints — sm 640, md 768, lg 1024, xl 1280, 2xl 1536. Mobile-first, unchanged from defaults.
DocumentedBorder
Width, radius, color, focus, and dividers — the line work that carries 30% of the interface's visual weight.
DocumentedRadius
Two starring values — 4 px for buttons, 8 px for cards — and the small Tailwind scale that supports them.
DocumentedElevation
Borders before shadows. The Tailwind shadow scale, surface stacking, and the z-index ladder for floating UI.
DocumentedMotion
Durations, easings, and the moments that earn animation.
In progressIconography
Sizing, placement, and the rules for using the Material icon set in Flatpay surfaces.
DocumentedIllustrations
Two categories — spot illustrations and spotlight UI — with anatomy, principles, and a library.
DocumentedImagery
Photography and product imagery — high-resolution 3D renders, in-situ merchant photos, and the rules that keep both honest.
DocumentedLogos
Marque, wordmark, anatomy, clear-space rules, minimum sizes, misuse, and downloads.
Documented