taste-skill / Compare styles / Attio vs Notion

Attio vs Notion: design style comparison

Attio is Next-Gen CRM Spreadsheet-Grid Precision & Inter Display; Notion is Warm Workspace Canvas & Monumental NotionInter Display. Both were extracted with the same taste-skill pipeline, so every value below is directly comparable. 14 of 18 tracked tokens differ.

Side-by-side preview

Attio style · light

Ship the product, not the pixels.

Preview text rendered with the extracted Attio canvas, text, muted and accent tokens.

Talk to sales Talk to sales

Card on extracted card recipe

Accent link: #1C1D1F · border #E4E7EC

Notion style · light

Ship the product, not the pixels.

Preview text rendered with the extracted Notion canvas, text, muted and accent tokens.

Get Notion free Get Notion free

Card on extracted card recipe

Accent link: #0075DE · border rgba(0, 0, 0, 0.1)

Key differences

Both are light-mode designs, but the canvases differ: #FFFFFF vs #FFFFFF.
Accent: #1C1D1F (Attio) vs #0075DE (Notion).
Headings: interDisplay vs NotionInter.
Display type: Attio H1 is 64px / 0.95 (w600); Notion H1 is 96px / -0.048em (w600) — Notion sets 32px larger headlines.
Primary button radius: 10px vs 8px; height 36px vs 36px.
Depth: Attio uses rgba(0, 0, 0, 0.04) 0px 1px 3px 0px, rgba(28, 40, 64, 0.18) 0px 0px 2px 0px most; Notion uses rgba(0, 0, 0, 0.01) 0px 0.175px 1.041px 0px, rgba(0, 0, 0, 0.02) 0px 0.8px 2.925px 0px, rgba(0, 0, 0, 0.027) 0px 2.025px 7.847px 0px, rgba(0, 0, 0, 0.04) 0px 4px 18px 0px most.
Motion: cubic-bezier(0, 0, 0, 1) vs cubic-bezier(0.42, 0, 1, 1).

Token table

Token	Attio	Notion
Canvas same	`#FFFFFF`	`#FFFFFF`
Surface	`#F3F4F6`	`#F6F5F4`
Text	`#1C1D1F`	`#000000`
Muted text	`#6F7988`	`#615D59`
Accent	`#1C1D1F`	`#0075DE`
Border	`#E4E7EC`	`rgba(0, 0, 0, 0.1)`
Heading font	`interDisplay`	`NotionInter`
Body font	`Inter`	`NotionInter`
Mono font	`JetBrains Mono`	`SFMono-Regular`
H1	`64px / 0.95 (w600)`	`96px / -0.048em (w600)`
Button radius	`10px`	`8px`
Button height same	`36px`	`36px`
Most-used radius same	`8px`	`8px`
Most-used shadow	`rgba(0, 0, 0, 0.04) 0px 1px 3px 0px, rgba(28, 40, 64, 0.18) 0px 0px 2px 0px`	`rgba(0, 0, 0, 0.01) 0px 0.175px 1.041px 0px, rgba(0, 0, 0, 0.02) 0px 0.8px 2.925px 0px, rgba(0, 0, 0, 0.027) 0px 2.025px 7.847px 0px, rgba(0, 0, 0, 0.04) 0px 4px 18px 0px`
Easing	`cubic-bezier(0, 0, 0, 1)`	`cubic-bezier(0.42, 0, 1, 1)`
Duration	`0.5s`	`0.2s`
Container max-width	`1440px`	`1184px`
Mode same	`light`	`light`

Primary buttons

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Talk to sales	36px	`0px 12px`	`10px`	`#FFFFFF` `#2E3238`	`1px solid #CAD0D9`	`14px / 500`
Talk to sales	36px	`0px 12px`	`10px`	`#101010` `#EDEFF3`	`1px solid #2E3238`	`14px / 500`
Subscribe	40px	`0px 12px`	`10px`	`#202124` `#F3F4F6`	`1px solid #505967`	`14px / 500`

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Get Notion free	36px	`4px 14px`	`8px`	`#0075DE` `#FFFFFF`	`none`	`16px / 500`
Get Notion free	38px	`6px 15px`	`8px`	`#0075DE` `#FFFFFF`	`none`	`16px / 500`
Request a demo	38px	`6px 15px`	`8px`	`#E6F3FE` `#005BAB`	`none`	`16px / 500`

Which style should you pick?

Pick Attio if you want Crisp #F3F4F6 / #FFFFFF daylight UI with exposed #E4E7EC 1px data-table grid lines, 64px Inter Display headlines (0.95 line-height, -0.02em), JetBrains Mono badges, and #1C1D1F monochrome controls — signals: crm, saas, data-grid, bento, attio, inter-display, precision, b2b, clean.

Pick Notion if you want Crisp #FFFFFF & warm stone #F6F5F4 workspace surfaces with rgba(0,0,0,0.1) hairlines, monumental 96px NotionInter headlines (-0.048em tracking), and #0075DE cobalt + #FFB110 amber accents — signals: workspace, productivity, docs, wiki, ai, notion, warm-gray, minimalist.

Shared traits: light.

Rules that differ

Attio never:

NEVER substitute generic uncalibrated gray backgrounds for Attio’s exact #FFFFFF canvas and #F3F4F6 surface pairing.
NEVER replace interDisplay display typography or ignore its signature scale (64px / 0.95 (w600)).
NEVER use thick opaque borders that clash with #E4E7EC (1px solid #E4E7EC).

Notion never:

NEVER substitute generic uncalibrated gray backgrounds for Notion’s exact #FFFFFF canvas and #F6F5F4 surface pairing.
NEVER replace NotionInter display typography or ignore its signature scale (96px / -0.048em (w600)).
NEVER use thick opaque borders that clash with rgba(0, 0, 0, 0.1) (1px rgba(0,0,0,0.1)).

Go deeper

Attio style guide Notion style guide Attio token spec Notion token spec Cal.com vs Notion Raycast vs Notion Cursor vs Notion

Values extracted from https://attio.com and https://www.notion.so. Not affiliated with either company.

Get all 30 full SKILL.md specs (Cursor / Claude Code / Codex ready) plus the Pro growth skills.

See taste-skill Pro →