Attio design system: fonts & colors

Typography

scale ratio 1.184

Intercss: interbody400 500 60048%
Inter Displaycss: interDisplaydisplay500 60045%
Tiempos Textcss: tiemposTextother4006%
JetBrains Monomono3002%

style	family	size	weight	line	tracking
display	Inter Display	64px	600	0.95	-0.02em
headline	Inter	14px	500	1.429	-0.005em
title	Inter Display	24px	500	1.15	-0.01em
body	Inter	14px	500	1.429	-0.01em
body-sm	Inter	12px	500	1.333	-0.013em
mono	JetBrains Mono	13px	300	1.538	-0.01em

Type scale

Aa10Aa12Aa13Aa14Aa15Aa16Aa18Aa24Aa32Aa40Aa48Aa56Aa64

Body size: 14px / 1.429
Display size: 64px
Display tracking: -0.02em
Case: sentence

Color

light scheme

Palette by painted area

Text on bg: 16.87:1
Muted on bg: 4.40:1
Dark mode: none

Declared accent tokens

--color-accent-stroke#709FF5painted
--internal-color-accent-stroke#709FF5painted

Space, shape & depth

Spacing scale

Corner radii

578101223pill

Shadows (5)

Borders: hairline, 1px
Section padding: 112px

Components

exact computed values

button-primary

Start for free

backgroundColor: #202124
textColor: #F3F4F6
rounded: 10px
padding: 0px 12px
height: 36px
fontFamily: Inter
fontSize: 14px
fontWeight: 500
border: 1px solid #505967

button-secondary

Talk to sales

textColor: #2E3238
rounded: 10px
padding: 0px 12px
height: 36px
fontFamily: Inter
fontSize: 14px
fontWeight: 500
border: 1px solid #CAD0D9

card

rounded: 12px
padding: 6px
backgroundColor: #FFFFFF
border: 1px solid #0000000F

input

rounded: 10px
height: 40px
padding: 10px 13px
backgroundColor: #FFFFFF
border: 1px solid #D3D8DF

Layout & motion

Container: 1274px
Grid columns: 20
Hero: centered
Navigation: top-sticky
Page height: 17,599px

Easing: cubic-bezier(0.33, 1, 0.68, 1)
Durations: 150ms 200ms 300ms 400ms
Transitions: 344
Keyframes: 6
Stack: next.js, tailwind, storyblok, intercom, vercel, cloudflare

Page sections (16)

section labels are heuristic

01nav
02hero
03feature detail?Welcome to agentic revenue.
04content?
05feature detail?Picks up leads at 2am. Catches renewals before they slip. Hands you the answer b The intelligent system that never sleep
06logosSpeed to lead, every time.
07feature detail?Run every motion, your way.
08code sample?For the people who own the number.
09features?Keep more. Grow more.
11content?
12stats?Production-grade for your team and agents. Run at any scale.
13feature detail?From first agent to enterprise scale. Trusted by 30,000+ customers.
14newsletterNew features every week to keep pace with you. Better as you grow.

How Attio compares

Body text: 14px: smaller than 82% of indexed sites (median 16px).
Largest heading: 64px: larger than 56% of indexed sites (median 60px).
Type scale: 1.18×: flatter than 89% of indexed sites (median 1.28×).
Container: 1274px: wider than 55% of indexed sites (median 1242px).
Text contrast: 16.9:1: lower than 59% of indexed sites (median 17.6:1).
Page length: 17,599px: longer than 96% of indexed sites (median 8,217px).
Corner radius: Mostly 12px, shared by 14 of 274 indexed sites (5%).
Inter: One of 58 indexed sites that load Inter (21%).
Inter Display: One of 2 indexed sites that load Inter Display (1%).
Color scheme: Light by default, like 75% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.

In short

What font does Attio use?

Attio uses Inter (loaded as "inter") for body text. Inter Display (loaded as "interDisplay") is used for headings. Tiempos Text (loaded as "tiemposText") is used for other.

What are Attio's brand colors?

Attio's website uses a light scheme: background #FFFFFF, surface #F3F4F6, text #1C1D1F, muted text #6F7988 and borders #E4E7EC.

How is Attio's website laid out?

The most common corner radius is 12px, body text is 14px with 1.429 line height, and the page container is 1274px wide.

Similar to Attio

Buildwithfernbuildwithfern.com

Deepnotedeepnote.com

Expoexpo.dev

Upstashupstash.com

Capacitiescapacities.io