Home
DESIGN.mdStar on GitHub
The CRM for agentic revenue

Welcome to
agentic revenue.

Attio is the AI CRM that builds pipeline, advances deals, and grows accounts around the clock.

Colors
Accent + semantic
Black ramp
White ramp
Text (semantic)
Typography · Inter Display + Inter · Tiempos Text
Inter Display / 600
Display · 66px · -0.032em
Welcome to agentic revenue.
Inter Display
Inter Display / 600
Heading · 22px · -0.015em
Agentic revenue runs on Attio.
Inter Display
Inter / 400
Body · 14px
Build pipeline, accelerate deals, and grow accounts around the clock — on a data model that bends to your team.
Inter
Tiempos Text / 400
Editorial · italic accent
The best revenue teams run on context, not guesswork.
Tiempos Text
system mono
Meta · hex · IDs
record_id · att_9mMFLUQSfjbLQ · $84,000
ui-monospace
Signature · Deals · agentic pipeline
Deals 9 deals Ask Attio to work the pipeline…
Open pipeline$0
Won this quarter$0
Advanced by agent3
Attio agent · working the pipeline around the clock
Attio is the AI CRM that works deals on its own. Every card is a record on Attio's flexible object model — company, domain, ARR, owner, a connection-strength meter derived from your team's email & calendar. Hit Run Attio agent and the agent advances deals stage by stage — enriching, drafting follow-ups, closing — and logs every move. Or click any card to advance it yourself.
Components
Buttons
primary = ink · blue is for links, not buttons → View docs
Deal stages
Lead Qualified Demo Negotiation Won Lost
Connection strength
Strong Weak None
Search / Ask
blue focus ring · #266df0 selection
Radius
chip · 6
btn · 9
card · 12
panel · 14
Guardrails
Do
Keep the canvas near-white #fff / near-black #101010 and let the data carry the color.
Reserve blue #266df0 for links, selection, and focus rings.
Make primary buttons ink; invert --btn-text per theme so contrast never breaks.
Build UI as typed cells on 1px hairline grids — Attio is a database you can see.
Color status by meaning: green won, red lost, yellow pending, grey lead.
Don't
Don't turn the accent blue into a button fill or a background wash.
Don't lean on drop shadows for structure — use 1px strokes.
Don't set body, cells, or labels in a serif — Tiempos is a rare editorial accent.
Don't invent dark-mode tints; step through the real black-* ramp.
Don't add a second saturated hue beyond the semantic three.