Attio. Architectural editorial on white marble.
- SaaS
- Light theme
- 21 colors
- 3 typefaces
Attio uses an editorial SaaS language: near-white canvas, near-black type, and one vivid cobalt accent (#266df0) that does the talking while everything else stays quiet. The type stack is a deliberate three-voice system — Inter for UI, InterDisplay for marketing headlines at weight 600 with tight tracking, and TiemposText (serif) for testimonial/pull-quote moments that need warmth and human weight. Components feel light and precise: 7px and 12px radii, hairline borders, blue-tinted shadows at very low opacity, and ghost/outline buttons that defer to the primary filled dark action. Layout breathes — generous vertical rhythm with a 1440px max-width — but density is compact within cards and lists. The signature move is restraint: the same monochrome restraint you'd see in a financial publication, punctuated by exactly one chromatic moment per screen.
Attio design system
Brand3
Primary brand accent — link text, focus rings, active states, highlighted icons, gradient midtone
Secondary accent, hover states, decorative strokes in illustrations
Violet wash for highlight backgrounds, decorative bands, and soft emphasis behind content.
Accent2
Decorative card borders, subtle blue-tinted surface outlines
Soft blue-tinted background, highlight washes, button box-shadow tints
Neutrals16
Footer background, dark section backgrounds, high-contrast text on light
Deepest text and dark surface fills
Primary heading and body text, logo mark
Dark surface text, dark filled button background
Secondary dark text, nav states, button text on light fills
Dark borders and separators for elevated surfaces and inverted UI. Do not promote it to the primary CTA color
Muted body text, secondary descriptions
Tertiary headings, captions, low-emphasis text
Placeholder text, disabled states, subtle icons
Muted body text, secondary copy
Hairline borders on cards, input borders, dividers
Card borders, surface boundaries
Primary border color, dividers, subtle backgrounds, button borders
Subtle background fills, section bands, inset borders
Alternate surface background, subtle elevated panels
Primary page background, card surfaces, button backgrounds
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Page Canvas on Cobalt Core
4.64 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictFails AAA 7
