Attio

About Attio

A modern CRM platform for go-to-market teams. Fits CRM SaaS, sales platforms, customer-data tools, and B2B-workflow landing page designs.

Request a DESIGN.md analysisCustom, made for Attio Website Starter KitBuild your site from a starter template

Design tokens

16 colors · 12 type styles

Near-black (#1c1d1f) primary on a pure white (#ffffff) canvas, set in Inter Display for headlines and Inter for body text. The highlights below are read from the Attio DESIGN.md in the Pass bundle, which carries all 16 color tokens, 12 type styles and the full component rules.

Colors

Primarynear-black#1c1d1f
Secondaryvivid blue#246ce4
Canvaspure white#ffffff
Surfaceoff-white#f4f5f6
Inknear-black#1c1d1f

Type

Inter DisplayDisplayweight 600, 40 to 64px
InterBodyweights 400, 500, 16 to 18px

Radius

none 0px
xs 6px
sm 8px
md 10px
lg 12px
full 9999px

Spacing

xs 4px
sm 8px
md 12px
lg 16px
xl 24px
xxl 40px
section 64px
giant 96px

Components

Primary buttonbutton-primary
Primary buttons fill with near-black (#1c1d1f) and carry off-white (#f4f5f6) text, set in Inter 15px at weight 500, with 10px corners and 0px 12px padding.
Cardfeature-card
Cards sit on pure white (#ffffff), with 12px corners and 24px padding.
Navigationnav-bar
The top navigation runs on pure white (#ffffff) with near-black (#1c1d1f) links, set in Inter 15px at weight 500.

Three ways to ship a Attio-style UI.

Use in your AI builder, no-code tool, or CMS

Lovablev0BoltFramerWebflowWordPressWixSquarespace CanvaGoDaddy

Paste the DESIGN.md in and ask the tool to restyle your existing site to match this design, or start a brand new one from scratch with the same visual language.