Attio

Attio sets oversized interDisplay headlines in a heavy weight with tight tracking on a light bone white canvas. Cobalt (#407ff2) is reserved for actions, while the rest of the page stays with void text and neutral surfaces. The most common corner radius is 8px, with 3.35544e+07px and 5px on smaller elements.

attio.com ↗

Colors

Cobalt

#407ff2

Primary actions and links

Lagoon

#007d53

Secondary accent and highlights

Bone White

#ffffff

Page canvas

Void

#111111

Headlines and body copy

Graphite

#242629

Supporting colour

Deep Void

#000000

Surface or divider

Void 2

#101112

Surface or divider

Ash

#75777c

Supporting colour

Deep Graphite

#232529

Supporting colour

Type scale

DisplayWelcome to agentic revenue.interDisplay · 64px · 600

HeadingThe intelligent system that never sleeps. Picks up leads at 2am. Catches renewals before tinterDisplay · 40px · 500

SubheadingYour team, amplified. Agents prospect and reach out when buyers are looking, building a piinterDisplay · 24px · 500

BodyAttio is the CRM that builds pipeline, advances deals, and grows accounts around the clockinter · 18px · 500

NavOrchestrate revenue agents with Workflowsinter · 16px · 500

Style reference measured from the public page at attio.com on 2026-10-12 for design education. Attio and its logos are trademarks of their owners; AnimatedWebs is not affiliated with or endorsed by them. Owners can ask us to update or remove this page via our copyright page.

Connect to your AI ↗

# Attio — Style Reference
> Attio sets oversized interDisplay headlines in a heavy weight with tight tracking on a light bone white canvas. Cobalt (#407ff2) is reserved for actions, while the rest of the page stays with void text and neutral surfaces. The most common corner radius is 8px, with 3.35544e+07px and 5px on smaller elements.

**Theme:** light · **Source:** https://attio.com (captured 2026-10-12). Measurements come from the rendered page; roles are interpreted.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Cobalt | `#407ff2` | `--color-accent` | Primary actions and links |
| Lagoon | `#007d53` | `--color-secondary` | Secondary accent and highlights |
| Bone White | `#ffffff` | `--color-canvas` | Page canvas |
| Void | `#111111` | `--color-ink` | Headlines and body copy |
| Graphite | `#242629` | `--color-surface-1` | Supporting colour |
| Deep Void | `#000000` | `--color-surface-2` | Surface or divider |
| Void 2 | `#101112` | `--color-surface-3` | Surface or divider |
| Ash | `#75777c` | `--color-surface-4` | Supporting colour |
| Deep Graphite | `#232529` | `--color-surface-5` | Supporting colour |

## Typography

| Role | Family | Size | Weight | Line height | Tracking |
|------|--------|------|--------|-------------|----------|
| Display | interDisplay | 64px | 600 | 0.95 | -0.020em |
| Heading | interDisplay | 40px | 500 | 1.10 | -0.010em |
| Subheading | interDisplay | 24px | 500 | 1.15 | -0.010em |
| Body | inter | 18px | 500 | 1.30 | -0.010em |
| Nav | inter | 16px | 500 | 1.38 | -0.010em |

Font families on the page: inter, interDisplay, JetBrains Mono. Brand fonts are licensed by their owners; use a close open alternative (Inter, Geist, Manrope) if you don't hold a licence.

## Shape

- Corner radius, most to least used: 8px, 3.35544e+07px, 5px, 12px, 23px

More styles from the web

Apple iPhone

Stripe

Linear

Apple

Vercel

Notion

Figma

Framer