Explore GTM frameworks →

The revenue platform
engineered for scale.

Attio is the AI CRM that builds pipeline, accelerates every deal,
and compounds revenue around the clock.

Color palette · every token, grouped
Text / ink ladder
ink-900
#1c1d1f
ink-800
#202124
ink-700
#232529
ink-600
#2e3238
gray-600
#505154
gray-500
#5c5e63
gray-400
#75777c
gray-350
#9fa1a7
Surfaces & borders
gray-300
#b5bdc9
border-strong
#cad0d9
border
#d3d8df
border-subtle
#e4e7ec
surface-200
#edeff3
surface-100
#f3f4f6
surface-50
#fafafb
white
#ffffff
Accent & slate-blue grays
blue-500
#266df0
slate-600
#505967
slate-500
#717a88
slate-400
#8f99a8
Typography — Inter only, 600 max
Display (h1) · Inter · 64/64 · 600 · −1.28pxCustomer relationships
Section (h3) · Inter · 32/38 · 600 · −0.32pxBuilt for how you work
Eyebrow (h2) · Inter · 12/14 · 600 · +0.72px UPPERData model
Body · Inter · 16/22 · 400 · 0Attio is the AI-native CRM. Chrome stays grayscale; blue is reserved for interaction.
UI / buttons · Inter · 14/20 · 500 · 0Start for free
Nav items · Inter · 15 · 500 · 0Product · Customers · Pricing
Caption · Inter · 13/18 · 400 · 0Updated 3 minutes ago
Controls — every variant × state · 36px, radius 10px
Default
Hover
Disabled
Primary
Secondary
Blue CTA
Ghost / nav
Input — default & focus-visible ring
Default · border #cad0d9
Focus · border #266df0 + 3px ring rgba(38,109,240,.15)
Chips & badges — radius 6px
Badge Active Lead Qualified
Tabs — bordered cells, active fill
Ask Attio
Data model
Workflows
Reporting
App shell — sidebar 240px, rows 32px
Basepoint
⌕ Quick Actions ⌘K
⌂ Home
◷ Notifications
☰ Tasks
✉ Emails
▤ Reports
⌂ Home Configure · Help
VercelDeal · $24,0002h ago
LinearDeal · $18,5005h ago
ResendLead · qualified1d ago
GranolaContact2d ago
Graph-paper panel — dotted grid background
Cards sit on engineering paper

radial-gradient dots at 16px spacing, hairline borders, radius 12px.

Data model

Flexible objects, records and lists with hairline dividers.

Automations

Workflow blocks in bordered cards, never drop shadows.

Depth & motion — nearly flat, borders over shadows
6px
chip · --r-chip
10px
control · --r-ctl
12px
card · --r-card
full
avatars · 999px
Default elevation
1px hairline border, no shadow
Structure comes from borders, not shadows
0 1px 2px rgba(0,0,0,.06)
The only shadow recipe, used sparingly

Motion: micro-transitions only, 150–500ms on color / background / border / opacity / translate, with custom ease-out cubic-bezier easings. Scale-in/out is reserved for dialogs and nav menus; the one signature effect is an animated conic brand-gradient ring, kept for AI features. No scroll-animation library, no large scroll effects.