Business

Attio

attio.com6 colors5 componentsinterMulti-page · 12 screens

The system for revenue teams to build pipeline, accelerate deals, and grow accounts around the clock.

Remix Visit

Remix

Visit

12 screenshots captured· attio.com

1 / 12 · Attio: The CRM for agentic revenue · Above the fold

Preview

the generated design system

Switch between the Visual preview, the rendered DESIGN.md and the Raw file.

Design tokens

Extracted from attio.com

Primary

#D97757

Accent / decorative

Neutral

#000000

Headings / primary text

#242629

Body copy

#505155

Captions, secondary text

#EEEFF1

1px borders and dividers

#E0E1E6

Neutral

Typography · inter

body13px · 500 · 20px

link14px · 400 · 20px

button14px · 500 · 20px

nav-link15px · 500 · 22px

body20px · 500 · 26px

body16px · 500 · 22px

caption12px · 400 · 18px

caption10px · 400 · 7px

body14px · 500 · 20px

heading18px · 500 · 24px

caption12px · 500 · 16px

h113px · 500 · 18.2px

caption12px · 500 · 16px

caption10px · 500 · 15px

body15px · 500 · 20px

body14px · 600 · 20px

list-item16px · 500 · 22px

body24px · 400 · 30px

body18px · 600 · 24px

button18px · 500 · 24px

body16px · 700 · 22px

h418px · 500 · 22px

nav-link18px · 500 · 21.6px

body14px · 500 · 20px

caption11px · 500 · 15px

body18px · 500 · 23.4px

h324px · 500 · 30px

body16px · 400 · 22px

button16px · 500 · 22px

body14px · 500 · 20px

body12px · 500 · 16px

body20px · 600 · 24px

body15px · 500 · 20px

h318px · 500 · 24px

heading20px · 600 · 26px

h316px · 500 · 22px

Typography · interDisplay

h256px · 600 · 60px

heading24px · 500 · 27.6px

h156px · 600 · 60px

display40px · 500 · 44px

h164px · 600 · 60.8px

h256px · 500 · 56px

h340px · 500 · 44px

heading32px · 500 · 36.8px

body24px · 500 · 30px

caption12px · 500 · 14px

h240px · 600 · 44px

h324px · 600 · 30px

heading32px · 600 · 36px

display40px · 600 · 44px

display56px · 700 · 60px

display98.8475px · 500 · 98.8475px

caption12px · 600 · 14px

h340px · 600 · 44px

Typography · tiemposText

display48px · 400 · 52px

display40px · 400 · 44px

Spacing

8px

4px

12px

24px

16px

20px

32px

48px

Elevation

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.230499 -0.000396319 -0.00407541 / 0.08) 0px 0px 0px 1px, oklch(0 0 0 / 0.01) 0px 1px 3px 0px, oklch(0 0 0 / 0.02) 0px 2px 4px -1px, oklch(0 0 0 / 0.03) 0px 4px 8px -2px, oklch(0 0 0 / 0.04) 0px 8px 16px -4px, oklch(0 0 0 / 0.05) 0px 16px 32px -8px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.04) 0px 12px 30px 0px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(15, 107, 233, 0.12) 0px 2px 4px -2px, rgba(15, 107, 233, 0.08) 0px 3px 6px -2px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px

Components · 5

Remixes of Attio

Latest remixes

No public remixes yet. Be the first to make one.

Remix it