Attio — design system & UI screens

Productivity · 1 screen · 7 sections · attio.com

Centered, light pricing page anchored by a giant serif-feel "From zero to IPO." headline over a Monthly/Annual pill toggle, then four tier cards (Free/Plus/Pro/Enterprise) where the Pro card is highlighted with a thin blue outline and a solid black "Continue with Pro" button. The signature element is the exhaustive full-width feature comparison matrix that dominates the middle 60% of the page — grouped category bands (Credits, Workspace, Automations, Email and calendar, Enrichment, Reporting, Security and admin, Support) with repeating plan column headers and dotted check/value cells, ending in a clean single-column FAQ accordion and a black footer.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/attio.

Decoded design system

Attio's decoded design system: background #FFFFFF, text #2E3238, accent #1A1A1A, link #6F7988, primary #B5BDC9; type scale h1 64px / h2 32px / body 16px; 8px spacing base; 10px base radius. The single interactive/action color is #202124 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Using these colors

• Action color #202124 — the single interactive color; only on things you click or must notice, never large fills.
• accent #1A1A1A — accent for emphasis — keep it rare on the page.
• primary #B5BDC9 — a neutral UI color (chips, tags, icon fills, chrome), not the action color (action = #202124).
• link #6F7988 — reads as a neutral UI color, not a link accent — verify against the reference (action = #202124).
• secondary #A4ADBA — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

Typography

• Heading: Inter Display
• Body: Inter
• Mono: JetBrains Mono
• h1: 64px
• h2: 32px
• body: 16px

Spacing

• base unit: 8px
• scale: 2px, 3px, 4px, 5px, 6px, 7px, 8px, 10px, 12px, 16px

Radii

• base: 10px
• button: 10px

Shadows (elevation)

• subtle: rgba(0, 0, 0, 0.04) 0px 1px 3px 0px, rgba(28, 40, 64, 0.18) 0px 0px 2px 0px
• card: rgba(0, 22, 62, 0.01) 0px 0px 1px 1px, rgba(0, 22, 62, 0.04) 0px 4px 12px -1px, rgba(0, 22, 62, 0.18) 0px 1px 3px -1px
• overlay: rgba(16, 17, 18, 0) 0px 18px 40px -16px, rgba(16, 17, 18, 0) 0px 5px 14px -6px

Motion

Micro-interactions run at 300ms (dominant) with ease.

• durations: 300ms · 200ms · 500ms
• easings: ease · cubic-bezier(0, 0, 0, 1)
• animated properties: color, border-color, background-color, outline-color

Native design tokens

…and 110 more measured on the page.

Button states (measured)

• primary hover: border 1px solid lab(50.3787 -1.31875 -9.56043)
• primary focus: border 1px solid lab(50.3787 -1.31875 -9.56043)

Layout (measured)

• container max-width: 1440px
• nav: 116px

Motion choreography (measured)

Load order: circle.pipeline-radar-ring-inne → g.motion-safe:animate-in×4 → div.flex → div.relative×2 → svg.animate-spin → circle.pipeline-radar-ring-oute

Scroll reveal: 7 elements rest at opacity 0, translateY(16px), animate in over 680ms.

Stagger: g ×4 — 120ms apart.

Responsive (measured)

• breakpoints: 375px · 576px · 768px · 992px · 1200px · 1536px
• mobile (390px): hero 64px · nav hamburger

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

• From zero to IPO pricing page with four-tier cards and a full feature comparison matrix

Sections (7)

• Banner — Black announcement bar + sticky nav
• Hero — Centered hero headline + Monthly/Annual toggle
• Pricing / Plans — Four-tier cards with highlighted Pro plan
• Logo Wall — Customer logo strip
• Comparison — Full feature comparison matrix across all plans
• FAQ — Single-column FAQ accordion
• Footer — Dark multi-column footer