Attio

Overview

Attio is an agentic CRM platform designed for revenue teams to build pipeline, accelerate deals, and grow accounts autonomously around the clock. The design system embodies "Intelligent Minimalism"—a movement that combines technical precision with approachable clarity. The brand personality is confident yet accessible: the UI prioritizes data visibility and actionability over decoration, using a vibrant primary blue (#266df0) as the signature accent that signals agency, trust, and forward momentum. The aesthetic evokes a modern SaaS product built for power users who demand both beauty and performance.

Attio's voice is direct, data-driven, and optimistic without being breathless. The tone avoids jargon where possible, preferring concrete outcomes over abstract features. Example sentence in brand voice: "Your agents work while you sleep—Attio catches every lead, every renewal, every opportunity." The visual language reinforces this through clean typography (Inter family), generous whitespace (24px gutters, 40px section spacing), and purposeful color accents that guide attention to high-impact actions.

Colors

The color system is built on a light, neutral foundation (#fbfbfc surface, #242629 on-surface text) with three strategic accent colors that each serve distinct roles. Primary blue (#266df0) is the signature brand color, used exclusively for CTAs, active states, and key interactive elements—it conveys agency and trust. Secondary green (#00d17e) is reserved for success states, confirmations, and positive outcomes (e.g., "Deal won", "Lead qualified"). Tertiary purple (#9b69ff) provides a third accent for secondary actions, highlights, and supporting UI elements. The surface stack progresses from #fbfbfc (base) through #eeeff1 (dim) to #e6e7ea (container) to #cbf7e1 (highest), creating subtle visual hierarchy without relying on darkness. Error red (#d97757) is used sparingly for destructive ac

Typography

The typography system uses Inter (regular weights 400, 500, 600, 700) for body and UI text, paired with Inter Display (weights 600, 700) for headlines and display text. This pairing creates a cohesive, modern aesthetic that feels both technical and human. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines and major page titles; Headline-lg (40px, 600 weight, -0.02em tracking) anchors section headers; Headline-md (28px, 600 weight) breaks up content into digestible chunks. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and prominent copy; Body-md (16px, 400 weight, 24px line-height) is the default for form labels, descriptions, and body text. Label-md (14px, 600 weight, 20px line-height, 0.01em tracking) is applied to button text, b

Layout

The layout system uses a 12-column grid with a 1280px max-width container, centered on the viewport with 24px gutters on desktop (reducing to 16px on tablet, 12px on mobile). Sections are separated by 40px (lg spacing) vertically, creating a rhythm that feels spacious without being wasteful. The design favors a fluid, content-driven approach: cards and components scale responsively within the grid, and whitespace is used intentionally to separate concerns and guide the eye. The 24px gutter is the primary spacing unit; multiples of 8px (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) are used consistently for padding, margins, and gaps. Container max-width is 1280px to accommodate data-heavy dashboards and multi-column layouts without overwhelming the user. Margins between major sections (

Elevation & Depth

Elevation is achieved through subtle shadows and layering rather than dramatic depth. Level 1 (Base Surface) has no shadow; Level 2 (Cards, Inputs) uses box-shadow: 0 1px 2px rgba(0,0,0,0.06) to create a gentle lift; Level 3 (Modals, Dropdowns, Elevated Cards) uses box-shadow: 0 4px 12px rgba(0,0,0,0.08) for more pronounced separation. Hover states on cards transition to Level 3 shadow (0 4px 12px rgba(0,0,0,0.08)) with a 200ms ease-out timing function. Interactive elements (buttons, inputs) use a 1px border at rgba(80, 89, 135, 0.5) to define their edges without relying on shadow. Focus state

Shapes

The shape philosophy is "Technical Softness"—rounded corners are used consistently to soften the technical nature of the product while maintaining clarity and precision. Buttons and interactive elements use 1rem (16px) border-radius for a friendly, approachable feel; cards and containers use 1.5rem (24px) for a more generous, spacious appearance; inputs and smaller UI elements use 0.5rem (8px) for subtle definition. The full radius (9999px) is reserved for badges, pills, and circular avatars. This graduated approach creates visual hierarchy: larger, more prominent elements (cards, modals) have

Components

Action Elements Buttons are the primary interaction mechanism and use a radial-gradient background (from primary blue at center to primary blue at edges) to create subtle depth. The button-primary component uses background-image: radial-gradient(at center -10%, {colors.primary} 0%, {colors.primary} 100%) with a 1px border at rgba(80, 89, 135, 0.5). On hover, the gradient shifts to a darker blue (#1e5ac8) with a 200ms ease-out transition. Focus states add a 3px outline in primary-container (#e5eeff) with 4px offset. Button-outline uses a transparent background with a 1px border at {colors.outline-variant} (#cdced2); on hover, the background becomes {colors.surface-container} (#e6e7ea) with the border darkening to {colors.outline} (#75777c). Button-ghost has no background or border by de

Do's and Don'ts

**Do**

• Do use primary blue (#266df0) exclusively for CTAs, active states, and high-priority interactions—it is the signature brand color and must be reserved for moments that matter.
• Do maintain 24px gutters and 40px section spacing to create breathing room; whitespace is a design tool, not wasted space.
• Do apply negative letter-spacing (-0.02em to -0.04em) on all headlines to create visual tightness and sophistication.
• Do use the full rounded radius (9999px) only for badges and pills; use 1rem for buttons and 1.5rem for cards to maintain visual hierarchy.
• Do transition all interactive states (hover, focus, active) over 150–200ms with ease-out timing to feel responsive without being jarring.
• Do apply box-shadow: 0 1px 2px rgba(0,0,0,0.06) as the base elevation for cards and containers; reserve 0 4px 12px rgba(0,0,0,0.08) for elevated states only.

**Don't**

• Don't use secondary green (#00d17e) or tertiary purple (#9b69ff) for CTAs or primary actions—these are supporting accents and will dilute the brand's visual focus.
• Don't apply shadows larger than 0 16px 40px rgba(0,0,0,0.12); excessive shadow depth contradicts the clean, technical aesthetic.
• Don't mix rounded corner sizes arbitrarily; stick to the graduated scale (0.5rem for inputs, 1rem for buttons, 1.5rem for cards, 9999px for badges).
• Don't use system fonts or generic sans-serif; Inter and Inter Display are mandatory for brand consistency and must be loaded via @font-face or Google Fonts.
• Don't reduce letter-spacing below -0.04em on headlines or increase it above 0.1em on body text; both extremes harm readability.
• Don't apply focus outlines with blur or spread; use a crisp 3px outline at 4px offset with 0px blur for clarity and accessibility.