Graphy. Blueprint on white marble.
- SaaS
- Light theme
- 12 colors
- 2 typefaces
Graphy is a luminous, blueprint-clean SaaS surface that treats data visualization as a calm craft rather than a loud spectacle. The canvas is a whisper-soft lavender-gray (#f2f4f8), and card surfaces sit one level brighter in pure white, creating a quiet two-tier depth that lets vivid cobalt-blue actions glow as the only chromatic punctuation. Typography leans on Aeonik's geometric warmth with aggressively tightened tracking (negative up to -0.05em on display sizes), making even the 82px hero feel engineered rather than decorative. The signature gesture is the floating 3D chart illustrations that orbit the hero — translucent, glassy, impossibly light — paired with hairline borders, generous breathing room, and a single saturated CTA color that never competes with the data on screen.
Graphy design system
Brand3
Violet outline accent for tags, dividers, and focused UI edges. Do not promote it to the primary CTA color
Filled CTA buttons, active states, chart accents, and interactive highlights — the single saturated voice in an otherwise muted system. Used sparingly so it reads as functional energy, not decoration
Outlined/ghost action borders and link underlines — a secondary chromatic for less-committed interactive states that still need a colored border or underline hint
Accent1
Soft highlight washes, decorative gradient stops, and illustration shadow tints — a barely-there blue-gray that adds depth to floating graphic elements
Neutrals8
Maximum-contrast borders, icon strokes, and structural rules — used where the system needs an unambiguous line
Secondary heading text and darker UI text where Indigo Ink is too colored — a neutral fallback that still reads as authoritative
Input field text and input borders — the slightly lifted neutral for form interactivity
Body helper text, captions, and muted descriptions — the workhorse mid-gray for supporting copy
Muted body text, placeholder text, and low-emphasis borders — the quietest readable neutral
Light borders, dividers, and disabled-state outlines — the hairline gray that separates content without commanding attention
Page canvas and section backgrounds — the base layer that makes white cards feel like they are floating just above the surface
Card surfaces, elevated panels, button fills, and form inputs — the brightest surface level sitting one tier above the canvas; Translucent-to-violet gradient used on floating glassy chart illustrations and hero ornaments — fades from semi-opaque white into a soft violet aura
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Mist Gray on Indigo Ink
12.50 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictPasses AAA 7
