Light interfaceMeasured attio.com

Attio

Clean and quiet, like a modern spreadsheet that got a design upgrade.

This page is styled with Attio’s own measured values. It is a private reference for AltLeads; their logo, brand and company-only fonts belong to them.

Colours

Each role is a value read from their live website, checked against their screenshots.

Background#FFFFFF
Page behind everything

Surface#FAFAFB
Cards, panels, menus

Text#1C1D1F
Headings and body

Muted text#8F99A8
Secondary info

Line#E6E7EA
Dividers and outlines

Accent#202124
Main button, links, selection

On accent#F3F4F6
Text on the accent

Contrast

Text on background 16.9:1Muted on background 2.9:1Text on accent 14.6:1

Every colour found on their site

#1C1D1F#242629#232529#407FF2#8F99A8#FFFFFF#FAFAFB#FAF9FF#F3F4F6#F2F4F6#FBFBFB#E6E7EA#B8D0FF#EEEFF1#E8DDFE#2E3238#202124

Typography

Headings use interDisplay (free). Body text uses inter (free).

h1	interDisplay · 64px · 600 · -1.28px	Welcome to agentic revenue.
h2	interDisplay · 40px · 500 · -0.4px	The intelligent system that never sleeps.
h3	interDisplay · 24px · 500 · -0.24px	Your team, amplified. Agents prospect and reach out when buy
h4	inter · 18px · 500 · -0.18px	Free your reps to sell.
p	inter · 18px · 500 · -0.18px	Attio is the CRM that builds pipeline, advances deals, and g
li	inter · 16px · 500 · -0.16px	Platform

Corners & shadows

Corner sizes used

8px

pill

5px

9px

4px

10px

Shadows

Shadow 1

Shadow 2

Shadow 3

Components, rebuilt from their values

Live and clickable. Built by us from the numbers above, not copied from their code. Sample CRM data.

Buttons

Navigation

WorkspaceCompanies Contacts Meetings

Disposition

InterestedCallbackBengaluru

Hide do-not-call

Next call

Licious · Admin head

Wants a proposal before the cafeteria contract renews in March.

Tabs

Table

Company	Owner	Status	Last touch
Zomato Food tech · Gurugram	PR	Callback	18 days ago
Licious Food tech · Bengaluru	RM	Interested	Today
Delhivery Logistics · Gurugram	AS	No answer	35 days ago

Toast

Call logged · callback on Friday

Real components from their site

Cropped from Attio’s live website. Click to enlarge.

Buttons · 3

Attio button: Platform — No fill · corners 10px · 36px

Attio button: Sign in — #FFFFFF · corners 10px · 36px

Attio button: Start for free — #202124 · corners 10px · 36px

Navigation bar · 1

Attio Navigation bar: Orchestrate revenue agents with Workflow — fill #FFFFFF · square · inter 16px

Buttons · 3

Attio Buttons: Platform — no fill · corners 10px · inter 15px

Attio Buttons: Sign in — fill #FFFFFF · corners 10px · inter 14px

Attio Buttons: Start for free — fill #202124 · corners 10px · inter 14px

Tags and badges · 4

Attio Tags and badges: ⌘K — no fill · corners 6px · inter 16px

Attio Tags and badges: / — fill #FFFFFF · corners 8px · inter 16px

Attio Tags and badges: Home — fill #EEEFF1 · corners 9px · inter 16px

Attio Tags and badges: A — fill #FF5B59 · corners 3.35544e+07px · inter 6px

Cards and panels · 6

Attio Cards and panels: GreenLeaf // Basepoint — fill #FFFFFF · corners 14px · inter 16px

Attio Cards and panels: Product Demo w/ GreenLeaf — fill #F3F4F6 · corners 16px · inter 16px

Attio Cards and panels: # pipeline — fill #FFFFFF · corners 12px · inter 16px

Attio Cards and panels: > — fill #000000 · corners 16px · inter 16px

Attio Cards and panels: Companies to work — fill #FFFFFF · corners 12px · inter 16px

Attio Cards and panels: Send email — fill #FFFFFF · corners 12px · inter 16px

Icons

30 icons copied exactly from their site’s code.

Product screens

8 real screens from web image search, each linked to where it was found.

Attio product screen: Attio | UI, UX Design | SaaS | Application Design | saas ui — Attio | UI, UX Design | SaaS | Application Design | saas ui

Attio product screen: Attio Reviews 2026: Details, Pricing, & Features | G2 — Attio Reviews 2026: Details, Pricing, & Features | G2

Attio product screen: Attio Full Dashboard UI Screens – 250+ Screens for Research ... — Attio Full Dashboard UI Screens – 250+ Screens for Research ...

Attio product screen: Attio - Next-Gen AI Native CRM Empowering Modern Businesses — Attio - Next-Gen AI Native CRM Empowering Modern Businesses

Attio product screen: Attio: the Relationship Workspace | App interface design, App design ... — Attio: the Relationship Workspace | App interface design, App design ...

Attio product screen: Opinião sobre Attio CRM 2026 | Avaliações de clientes, Recursos, Preços — Opinião sobre Attio CRM 2026 | Avaliações de clientes, Recursos, Preços

Attio product screen: Attio Software Reviews, Demo & Pricing - 2024 — Attio Software Reviews, Demo & Pricing - 2024

Attio product screen: Attio | FV Scheduler — Attio | FV Scheduler

Do & don’t

What makes it Attio

Near-white backgrounds with very light grey panels
Tiny soft-rounded buttons and tags (8-10px radius)
Dense data tables that still feel airy

Keep backgrounds white or near-white
Use small, confident black buttons for primary actions
Leave generous whitespace around dense data

Don’t

Don't use bright or loud colours
Don't add heavy shadows or borders
Don't make buttons tall or chunky

For AltLeads: Borrow the calm white table layout so call lists feel easy to scan, not cluttered.

Copy the tokens

Paste into any project to try this look.

/* Attio · values measured from https://attio.com/ · reference only, their brand belongs to them */
:root {
  --bg: #FFFFFF;
  --surface: #FAFAFB;
  --text: #1C1D1F;
  --muted: #8F99A8;
  --line: #E6E7EA;
  --accent: #202124;
  --on-accent: #F3F4F6;
  --radius-button: 10px;
  --radius-card: 14px;
  --radius-small: 4px;
  --button-height: 36px;
  --font-heading: "interDisplay", "Inter", system-ui, sans-serif;
  --font-body: "inter", "Inter", system-ui, sans-serif;
  --shadow: rgba(255, 255, 255, 0.1) 0.2px 0.2px 2px 0px inset, rgba(0, 0, 0, 0.25) 0px 1.5px 1.5px 0px;
}