---
title: "Attio design system"
variant: extended
source: https://attio.com/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/attio-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Attio · Design System

> Quiet clarity, with the product in focus

**Theme:** light · **Industry:** ai · **Source:** https://attio.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Attio pairs a bright, spacious editorial canvas with polished CRM interface previews and a deep-black product story. Restrained typography, fine borders, and soft cool gradients make the dense software visuals feel approachable.

## North star

Keep the canvas quiet and spacious so precise product-interface imagery and clear typography do the explaining.

## Overview

The page opens on a nearly pure white canvas, letting a large CRM interface preview carry the hero rather than competing with it through decoration. Dark ink typography provides the main contrast; muted slate supports secondary copy, while pale cool-grey bands quietly distinguish content sections. Small blue, green, violet, and coral accents appear mainly in interface details and badges, not as broad brand fills. A black announcement strip and an expansive black product section create deliberate tonal punctuation. Display headlines mix a refined serif for the opening message with clean Inter-family sans serif for subsequent headings and body copy. The layout is spacious and centered, with a restrained navigation bar, generous vertical intervals, and wide product screenshots that alternate with concise feature copy. Product imagery is treated as crisp interface evidence, framed by subtle borders and soft shadows rather than dramatic photography.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page canvas and light content background; preserves a clean, open frame around interface previews. |
| Signal Green | `#007d53` | `--color-signal-green` | semantic | Positive status text and small success badges inside CRM interface examples. |
| Action Blue | `#266df0` | `--color-action-blue` | accent | Small interface links, controls, and badges; an interface accent rather than a page-wide fill. |
| Soft Violet | `#9b69ff` | `--color-soft-violet` | accent | Occasional product-preview badge or status accent, not a primary page surface. |
| Alert Coral | `#ff5b59` | `--color-alert-coral` | semantic | Small alert or product-interface detail; use sparingly within demonstrations. |
| Carbon Black | `#101010` | `--color-carbon-black` | surface | Announcement bar, lower product-story section, and inverse content surfaces. |
| Core Ink | `#1c1d1f` | `--color-core-ink` | neutral | Primary headings, body copy, navigation text, and interface content. |
| Graphite Text | `#242629` | `--color-graphite-text` | neutral | Secondary dark text and interface labels where softer than the main ink is appropriate. |
| Clay Marker | `#a8623d` | `--color-clay-marker` | semantic | Rare badge tone within interface examples; not a defining page color. |
| Mist Surface | `#f3f4f6` | `--color-mist-surface` | surface | Pale neutral panel and card surface, including softly separated interface areas. |
| Quiet Divider | `#e4e7ec` | `--color-quiet-divider` | neutral | Fine borders and hairlines between navigation, cards, and content regions. |
| Slate Copy | `#6f7988` | `--color-slate-copy` | neutral | Muted supporting copy and secondary explanatory text. |
| Cloud Edge | `#eeeff1` | `--color-cloud-edge` | surface | Light interface borders, media framing, and subtle background detail. |
| Deep Link Blue | `#245bc2` | `--color-deep-link-blue` | accent | Occasional blue text or badge in product examples; keep localized to UI details. |
| Amethyst Mark | `#6238b5` | `--color-amethyst-mark` | accent | Small violet badge detail appearing in product-interface previews. |
| Warm Sand | `#d6a07a` | `--color-warm-sand` | semantic | Low-frequency warm badge tone within the illustrated CRM interface. |
| Pale Slate | `#8f99a8` | `--color-pale-slate` | neutral | Lighter muted text and low-emphasis supporting interface content. |
| Attio Vermilion | `#bb2a1e` | `--color-attio-vermilion` | brand | Measured accent within a colored section gradient; use as a restrained brand-color highlight. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#101010` (Carbon Black) · `--color-surface-2` → `#f3f4f6` (Mist Surface) · `--color-text` → `#1c1d1f` (Core Ink) · `--color-text-muted` → `#6f7988` (Slate Copy) · `--color-text-subtle` → `#8f99a8` (Pale Slate) · `--color-border` → `#e4e7ec` (Quiet Divider) · `--color-accent` → `#bb2a1e` (Attio Vermilion) · `--color-accent-2` → `#6cbdb0` · `--color-accent-3` → `#ccc427`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1c1d1f` | `#ffffff` | 16.87:1 | AAA |
| `#1c1d1f` | `#101010` | 1.13:1 | fail |
| `#1c1d1f` | `#f3f4f6` | 15.33:1 | AAA |
| `#6f7988` | `#ffffff` | 4.41:1 | AA-large |
| `#6f7988` | `#101010` | 4.32:1 | AA-large |
| `#6f7988` | `#f3f4f6` | 4:1 | AA-large |
| `#8f99a8` | `#ffffff` | 2.88:1 | fail |
| `#8f99a8` | `#101010` | 6.61:1 | AA |
| `#8f99a8` | `#f3f4f6` | 2.62:1 | fail |
| `#bb2a1e` | `#ffffff` | 6.06:1 | AA |

### Gradients

- `conic-gradient(rgb(238, 241, 234) 0deg, rgb(108, 189, 176) 10deg, rgb(22, 30, 105) 60deg, rgb(22, 30, 105) 180deg, rgb(187, 42, 30) 180deg, rgb(187, 42, 30) 300deg, rgb(204, 196, 39) 350deg, rgb(238, 241, 234) 360deg)`
- `repeating-linear-gradient(to right, rgba(255, 255, 255, 0.035) 0px, rgba(255, 255, 255, 0.035) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 8px)`
- `radial-gradient(70% 106.667% at 50% 0%, lab(99.9987 0.0337958 0.000309944) 32%, rgba(0, 0, 0, 0) 64%)`
- `radial-gradient(90% 80% at 50% 100%, rgb(230, 236, 255) 0%, rgb(188, 203, 255) 45%, rgb(134, 160, 238) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| inter | `--font-body` | webfont | 500, 600 | Navigation, body copy, buttons, captions, and most interface text | Inter |
| interDisplay | `--font-display` | webfont | 500, 600 | Secondary section headings and display sans-serif headlines | Inter |
| JetBrains Mono | `--font-mono` | webfont | 500 | Small code-style or technical labels | JetBrains Mono |

- **inter:** Mostly medium to semibold; compact tracking and sentence case keep labels crisp.
- **interDisplay:** Medium weight with slightly tight tracking; use sentence case and a clean, restrained rhythm.
- **JetBrains Mono:** Medium weight, tight tracking, and small scale; reserve for technical microcopy.

### Type scale — Perfect Fourth (ratio ≈ 1.361, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 400 | 1.08 | -0.015em | — | tiemposText | Opening hero headline, set as a refined serif statement. |
| h2 | 40px | 500 | 1.1 | -0.01em | — | interDisplay | Major feature and section headlines in display sans serif. |
| h3 | 24px | 500 | 1.15 | -0.01em | — | interDisplay | Feature-group and subsection headings. |
| h4 | 18px | 500 | 1.22 | -0.01em | — | inter | Compact card or supporting section headings. |
| body | 14px | 500 | 1.43 | -0.01em | — | inter | Main explanatory copy and product-page descriptions. |
| caption | 12px | 500 | 1.33 | -0.013em | — | inter | Small labels, interface annotations, and supporting metadata. |
| button | 14px | 500 | 1.43 | -0.005em | — | inter | Concise CTA and navigation action labels. |
| nav | 15px | 500 | 1.47 | -0.011em | — | inter | Primary site navigation and menu labels. |
| code | 10px | 500 | 1.5 | -0.016em | — | JetBrains Mono | Technical microcopy and code-oriented labels. |

OpenType features in use: `"ss03"`.

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 1, 2, 3, 4, 5, 6, 7, 8, 10, 12, 16, 24, 32 px.
- Section rhythm 152px · element gap 6px · card padding 2px · max content width 1390px.

Use a centered, wide desktop frame capped by the measured 1390px page width, with generous side breathing room and spacious vertical section intervals. The opening hero centers a large software preview beneath the navigation; subsequent content uses alternating feature copy and wide interface panels. Several feature areas use multi-column arrangements, while the self-building CTA returns to centered alignment. Maintain clear section bands through subtle pale backgrounds and occasional full-width black contrast. Overall density is low outside the product previews, where interface detail can be dense.

## Shape & elevation

- Radius: button `10px` · card `12px` · media `50%` · badge `50%` · nav `12px` · xs `2px` · sm `4px` · md `5px` · lg `6px` · xl `7px` · 2xl `8px` · pill `9999px`
- Shadow `inset` (other): `rgba(255, 255, 255, 0.1) 0.2px 0.2px 2px 0px inset, rgba(0, 0, 0, 0.25) 0px 1.5px 1.5px 0px`
- Shadow `md` (other, 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`
- Shadow `sm` (other, card): `rgba(0, 0, 0, 0.04) 0px 1px 3px 0px, rgba(28, 40, 64, 0.18) 0px 0px 2px 0px`
- Shadow `hairline` (badge): `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, lab(99.9987 0.0337958 0.000309944) 0px 0px 0px 0.5px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `md-2` (other): `rgb(224, 224, 224) 0px 0px 2px 0px, rgba(24, 39, 75, 0.02) 0px 2px 4px -2px, rgba(24, 39, 75, 0.06) 0px 4px 4px -2px`
- Shadow `xl` (card): `rgba(11, 13, 24, 0.06) 0px 0px 0px 1px, rgba(11, 13, 24, 0.024) 0px 1px 2px 0px, rgba(11, 13, 24, 0.03) 0px 3px 6px 0px, rgba(11, 13, 24, 0.035) 0px 8px 14px 0px, rgba(11, 13, 24, 0.04) 0px 16px 28px `
- Motion: standard transition `0.3s cubic-bezier(0.2, 0, 0, 1)` on interactive elements.

The visual system is mostly flat: thin pale borders separate navigation, cards, and interface panels. Product previews sit slightly above the canvas using soft, diffuse shadows rather than heavy depth. Rounded card and button edges soften the otherwise precise grid; black sections rely on tonal contrast and hairlines for structure.

## Imagery

Use crisp product-interface screenshots and recreated CRM dashboards as the primary imagery, not lifestyle photography. Frame previews as broad, carefully aligned panels with pale borders, soft shadows, and restrained corner rounding. Include charts, workflow diagrams, tables, and small status details within the UI; keep colored accents localized. Lower-page dark sections use subtle technical graphics and integrations marks against black.

## Components

### Announcement strip

Full-width black band above the navigation with centered compact announcement text and a small dismiss control.

### Primary navigation

White horizontal navigation with dark Inter labels, understated dropdown indicators, a lightly outlined Sign in action, and a black Start for free CTA.

### Product preview panel

Wide CRM interface mockup on a pale surface, with fine borders, rounded corners, and subtle shadow; interface details supply most color.

### Feature copy block

Short heading and concise supporting text aligned beside or above a large product UI demonstration.

### Workflow diagram

Light product-preview field containing connected workflow nodes, thin connector lines, and compact colored status labels.

### Dark product section

Large Carbon Black section organized with subtle hairlines, small muted copy, integration marks, and low-contrast technical artwork.

### CTA button

Compact rounded action with short Inter label; use black for primary actions and a light outlined treatment for secondary actions.

### Measured component styles

- **Primary button** (“Start for free”): background #202124 · text #f3f4f6 · border 1px solid #505967 · radius 10px · padding 0px 12px · 500 14px inter
- **Secondary button** (“Developers”): transparent background · text #2e3238 · border 1px solid · radius 10px · padding 0px 12px · 500 15px inter
- **Link**: background #fafafb · text #1c1d1f · radius 0px · padding 0px 24px · 500 16px inter
- **Card** (“Lumio AI Sep 30, 2026 USD $20,800 A Amel”): background #ffffff · text #1c1d1f · border 1px solid #eeeeee · radius 12px · padding 6px 0px 0px 0px · 500 16px inter
- **Badge** (“98”): background #e0fced · text #007d53 · border 1px solid #cbf7e1 · radius 7px · padding 0px 4px · 500 14px inter
- **Navigation item** (“Platform Resources Developers Customers ”): transparent background · text #1c1d1f · radius 0px · padding 0px · 500 16px inter

## Do

- Keep the main page canvas white and uncluttered.
- Let product-interface previews dominate the hero and feature storytelling.
- Use dark ink for headings and muted slate for supporting copy.
- Reserve blue, green, violet, and coral for localized interface details.
- Separate content with fine borders and subtle cool-grey surfaces.
- Use black sections as deliberate contrast, not as the default background.

## Don't

- Do not turn the page into a saturated gradient-led landing page.
- Do not use decorative photography in place of product UI.
- Do not add heavy shadows or thick card outlines.
- Do not crowd the whitespace between major feature blocks.
- Do not use bright accent colors as large page backgrounds.
- Do not make headings or buttons shout with all-caps styling.

## Agent prompt

Build a new Attio-style SaaS page with a quiet white canvas and product evidence at the center. Use Gallery White (#ffffff) for the main background, Core Ink (#1c1d1f) for headings and primary copy, Slate Copy (#6f7988) for supporting text, and Quiet Divider (#e4e7ec) for fine borders. Keep the navigation compact, with a black primary CTA and a restrained outlined secondary action. Use generous vertical breathing room, centered wide layouts, and crisp CRM interface panels with subtle shadows and soft corners. Localize Action Blue (#266df0), Signal Green (#007d53), and Soft Violet (#9b69ff) to interface badges or controls. Build feature storytelling around tables, workflows, and charts rather than lifestyle imagery. Include a later Carbon Black (#101010) section for tonal contrast, structured with hairlines and muted technical graphics.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero with a large CRM interface preview beneath the global navigation. | announcement strip, primary and secondary CTAs, product preview | white canvas, black CTA, soft interface panel, subtle cool gradient |
| 2 | logo-cloud | A pale horizontal band with customer marks arranged in rows. | customer proof | light band, monochrome logos, generous spacing |
| 3 | feature-grid | Long pale section with a feature index, concise copy, and wide product demonstrations. | feature navigation, alternating explanations, workflow showcase | multi-column grid, CRM panels, charts and diagrams, subtle borders |
| 4 | cta | Centered single-column statement and CTA on a pale background. | self-building proposition, start-free action | centered heading, small eyebrow, outlined CTA |
| 5 | product-showcase | Three-part product view centered around a wide CRM record interface. | record detail, email summary, activity context | wide interface preview, dense product UI, light framing |
| 6 | feature-grid | Full-width black section containing stacked feature panels and integration content. | capability narrative, integration discovery, developer entry point | black surface, fine grid lines, muted technical graphics |
| 7 | footer | Simple full-width light closing region. | closing navigation | white surface, minimal structure |

## Source CSS custom properties (selected)

```css
--button-primary-bg-from: rgb(0, 0, 0);
--button-primary-bg-to: rgb(0, 0, 0);
--button-outline-bg: lab(99.9987% .0337958 .000309944);
--button-outline-border: lab(83.208% -.844151 -5.26234);
--button-outline-text: lab(20.5697% -.638425 -4.44436);
--button-outline-bg-hover: lab(99.9987% .0337958 .000309944);
--button-outline-border-hover: lab(50.3787% -1.31875 -9.56043);
--button-outline-text-hover: lab(20.5697% -.638425 -4.44436);
--button-outline-bg-focus: lab(99.9987% .0337958 .000309944);
--button-outline-border-focus: lab(50.3787% -1.31875 -9.56043);
--button-outline-text-focus: lab(20.5697% -.638425 -4.44436);
--button-outline-bg-active: lab(96.1596% -.0828803 -1.13571);
--button-outline-border-active: lab(25.9077% -.872329 -6.43952);
--button-outline-text-active: lab(14.599% -.159428 -2.99254);
--button-outline-bg-disabled: lab(99.9987% .0337958 .000309944);
--button-outline-border-disabled: lab(91.5182% -.365466 -2.84777);
--button-outline-text-disabled-foreground: lab(83.208% -.844151 -5.26234);
--button-ghost-bg: transparent;
--button-ghost-text: lab(20.5697% -.638425 -4.44436);
--button-ghost-bg-hover: lab(96.1596% -.0828803 -1.13571);
--button-ghost-text-hover: lab(14.599% -.159428 -2.99254);
--button-ghost-bg-focus: lab(96.1596% -.0828803 -1.13571);
--button-ghost-text-focus: lab(14.599% -.159428 -2.99254);
--button-ghost-bg-active: lab(94.3726% -.157326 -2.23036);
--button-ghost-text-active: lab(12.7212% .103362 -2.22102);
--button-ghost-bg-disabled: transparent;
--button-ghost-text-disabled-foreground: lab(76.2541% -1.09726 -7.09252);
--context-menu-portal-z-index: 200;
--context-menu-positioner-z-index: 201;
--context-menu-popup-z-index: 202;
--color-page-background: lab(99.9987% .0337958 .000309944);
--color-banner-background: lab(0% 0 0);
--color-overscroll-top: lab(0% 0 0);
--color-overscroll-bottom: lab(4.67701% 0 0);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/attio-com