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 64/600 −1.28px
Section heading 32/600 −0.32px

Body 16/22 400 — Attio is the AI-native CRM. Chrome stays grayscale; blue is reserved for interaction.

Caption 13/400 in gray-400 for metadata and timestamps.

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.