# Attio Design System

> A high-density, monochrome technical canvas where tight typography and subtle inset borders do the heavy lifting.

**Source:** https://attio.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Attio is a highly structured, data-dense monochrome system. It relies heavily on an off-white `#fbfbfb` canvas and absolute black `#000000` for primary actions. The typographic hierarchy is tightly tracked, utilizing Inter Display for sharp, technical headers and Tiempos Text for editorial contrast. Color is almost entirely suppressed, with `#266df0` acting as a rare accent. Components favor subtle inset shadows over deep elevation.

## Signature DNA
1. **High-density monochrome** (The UI relies on shades of gray like `#eeeff1`, `#75777c`, `#242629` and absolute black `#000000` against `#fbfbfb`, suppressing chromatic color to emphasize data. Observed across all pages.)
2. **Tight technical typography** (Inter Display at heavy weights like 600 with negative tracking up to -0.84px creates a compressed, engineered feel. Observed in hero and section headers.)
3. **Hairline inset borders** (Depth is achieved through 1px inset shadows like `oklab(0.230499 -0.000396319 -0.00407541 / 0.1) 0px 0px 0px 1px inset` rather than heavy drop shadows. Observed on cards and inputs.)

## Colors

### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `color-foundation-bg` | `#fbfbfb` | surface_bg, text | 63 | 1.0 | computed_style |
| `color-foundation-black` | `#000000` | border, text, surface_bg, button_bg | 31 | 1.0 | computed_style, css_variable |
| `color-foundation-gray-100` | `#f4f5f6` | surface_bg | 20 | 0.8 | computed_style |
| `color-foundation-gray-200` | `#eeeff1` | surface_bg, border | 51 | 0.8 | computed_style |
| `color-foundation-gray-300` | `#e5e7eb` | border, surface_bg | 17 | 0.8 | computed_style |
| `color-foundation-gray-400` | `#dcdcdd` | surface_bg | 3 | 0.6 | computed_style |
| `color-foundation-gray-500` | `#d2d7de` | surface_bg | 4 | 1.0 | computed_style, css_variable |
| `color-foundation-gray-600` | `#cad0d9` | text | 35 | 0.8 | computed_style |
| `color-foundation-gray-700` | `#9fa1a7` | text | 20 | 0.8 | computed_style |
| `color-foundation-gray-800` | `#75777c` | text | 40 | 0.8 | computed_style |
| `color-foundation-gray-900` | `#5c5e63` | text | 34 | 0.8 | computed_style |
| `color-foundation-gray-950` | `#505155` | text | 5 | 0.6 | computed_style |
| `color-foundation-gray-975` | `#2e3238` | border | 7 | 0.6 | computed_style |
| `color-foundation-gray-990` | `#242629` | text | 33 | 0.8 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `color-accent-primary` | `#266df0` | surface_bg, text, border | 3 | 0.6 | computed_style |
| `color-accent-blue-light` | `#e5eeff` | surface_bg | 6 | 0.6 | computed_style |
| `color-accent-blue-border` | `#d6e5ff` | border | 6 | 0.6 | computed_style |
| `color-accent-slate-light` | `#8f99a8` | text | 24 | 0.8 | computed_style |
| `color-accent-slate-dark` | `#717a88` | text | 8 | 0.6 | computed_style |
| `color-accent-yellow-bg` | `#fff3cc` | surface_bg | 3 | 0.6 | computed_style (<5 occurrences decorative_only) |
| `color-accent-yellow-border` | `#ffebad` | border | 3 | 0.6 | computed_style (<5 occurrences decorative_only) |
| `color-accent-green-bg` | `#ddf9e4` | surface_bg | 3 | 0.6 | computed_style (<5 occurrences decorative_only) |
| `color-accent-green-border` | `#c7f4d3` | border | 3 | 0.6 | computed_style (<5 occurrences decorative_only) |

### Semantic
Not captured in source.

## Typography

### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| `inter` | 500, 600, 700 | heading, body | Inter | OFL |
| `interDisplay` | 500, 600 | display, heading | Inter Display | OFL |
| `tiemposText` | 400, 500 | display, heading | PT Serif | Commercial |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `type-display-lg` | 56px | 60px | -0.84px | 600 | Hero display | `p.max-w-[18em].self-end` |
| `type-display-md` | 40px | 44px | -0.4px | 600 | Section display | `h2.text-center.text-heading-responsive-md` |
| `type-heading-lg` | 32px | 38px | -0.32px | 600 | Section heading | `h3.inline` |
| `type-heading-md` | 28px | 34.4px | -0.42px | 500 | Editorial heading | `p.relative.flex` |
| `type-heading-sm` | 24px | 30px | -0.24px | 500 | Card heading | `h3#engineering` |
| `type-subheading` | 18px | 24px | -0.18px | 500 | Sticky labels | `h2.sticky.top-[calc(var(--site-header-height)+197px)]` |
| `type-body-lg` | 16px | 22px | -0.16px | 500 | Primary body | `section.flex.w-full` |
| `type-body-md` | 14px | 20px | -0.07px | 500 | Secondary body | `span.text-sm` |
| `type-body-sm` | 13px | 18px | -0.16px | 500 | Tertiary body | `div.relative.flex` |
| `type-caption` | 12px | 18px | normal | 500 | Captions | `span` |

### Principles
- **Negative tracking on display**: Inter Display is tracked tightly (-0.84px at 56px) for a compressed, technical aesthetic.
- **Medium weight baseline**: Body text defaults to weight 500, avoiding lighter weights to maintain legibility against the off-white canvas.
- **Editorial contrast**: Tiempos Text is used sparingly for specific display moments to break the rigid sans-serif grid.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `space-1` | 4px | 13 |
| `space-2` | 8px | 228 |
| `space-3` | 12px | 64 |
| `space-4` | 16px | 19 |
| `space-5` | 20px | 49 |
| `space-6` | 24px | 61 |
| `space-8` | 32px | 8 |
| `space-20` | 80px | 3 |
| `space-40` | 160px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `radius-none` | 0px | Surfaces, full-width bands | 1603 occurrences |
| `radius-sm` | 6px | Small inputs | 301 occurrences |
| `radius-md` | 8px | Controls | 67 occurrences |
| `radius-lg` | 10px | Standard cards, buttons | 44 occurrences |
| `radius-xl` | 12px | Large controls | 53 occurrences |
| `radius-pill` | 9999px | Badges, primary buttons | 293 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `shadow-inset-subtle` | `oklab(0.230499 -0.000396319 -0.00407541 / 0.1) 0px 0px 0px 1px inset` | Card borders | 63 occurrences |
| `shadow-inset-light` | `rgb(238, 239, 241) 0px 0px 0px 1px inset` | Input borders | 5 occurrences |
| `shadow-drop-sm` | `rgba(28, 40, 64, 0.18) 0px 0px 2px 0px, rgba(0, 0, 0, 0.04) 0px 1px 3px 0px` | Hovered controls | 2 occurrences |
| `shadow-drop-md` | `rgba(28, 40, 64, 0.1) 0px 2px 3px -2px, rgba(28, 40, 64, 0.04) 0px 4px 6px -2px` | Elevated cards | 3 occurrences |
| `shadow-drop-lg` | `rgba(28, 40, 64, 0.08) 0px 10.85px 21.7px -4.34px...` | Floating panels | 7 occurrences |

## Components

### Tier 1: Foundational

#### Pill / Badge
**Role:** Status indicators and small labels.
**Pages observed:** https://attio.com, https://attio.com/about
**Spec:** Background `rgba(0, 0, 0, 0)` / Text `lab(10.7201 -0.0959039 -1.54182)` / Border `lab(91.5182 -0.365466 -2.84777)` / Radius `9999px` / Padding `0px` / Typography `16px` / Shadow `none`
**States observed:** Default | Hover: not captured | Focus: not captured | Active: not captured | Disabled: not captured

#### Rounded Button
**Role:** Secondary actions.
**Pages observed:** https://attio.com, https://attio.com/about
**Spec:** Background `lab(99.9987 0.0337958 0.000309944)` / Text `lab(37.426 -1.09151 -9.33263)` / Border `lab(91.5182 -0.365466 -2.84777)` / Radius `10px` / Padding `0px 10px` / Typography `14px` / Shadow `none`
**States observed:** Default | Hover: not captured | Focus: not captured | Active: not captured | Disabled: not captured

### Tier 2: Patterns

#### Card (Light)
**Role:** Standard content container.
**Pages observed:** https://attio.com, https://attio.com/pricing
**Spec:** Background `lab(99.9987 0.0337958 0.000309944)` / Text `lab(20.5697 -0.638425 -4.44436)` / Border `lab(83.208 -0.844151 -5.26234)` / Radius `10px` / Padding `0px 12px` / Typography `14px` / Shadow `none`
**States observed:** Default | Hover: not captured | Focus: not captured | Active: not captured | Disabled: not captured

#### Card (Dark)
**Role:** Emphasized content container.
**Pages observed:** https://attio.com, https://attio.com/pricing
**Spec:** Background `lab(12.7212 0.103362 -2.22102)` / Text `lab(96.1596 -0.0828803 -1.13571)` / Border `lab(37.426 -1.09151 -9.33263)` / Radius `10px` / Padding `0px 12px` / Typography `14px` / Shadow `none`
**States observed:** Default | Hover: not captured | Focus: not captured | Active: not captured | Disabled: not captured

### Tier 3: Surface-specific

#### Surface (Default)
**Role:** Base page sections.
**Pages observed:** https://attio.com, https://attio.com/about
**Spec:** Background `lab(99.9987 0.0337958 0.000309944)` / Text `lab(10.7201 -0.0959039 -1.54182)` / Border `lab(91.5182 -0.365466 -2.84777)` / Radius `0px` / Padding `0px` / Typography `16px` / Shadow `none`
**States observed:** Default | Hover: not captured | Focus: not captured | Active: not captured | Disabled: not captured

#### Surface (Transparent)
**Role:** Overlay containers.
**Pages observed:** https://attio.com, https://attio.com/about
**Spec:** Background `rgba(0, 0, 0, 0)` / Text `lab(10.7201 -0.0959039 -1.54182)` / Border `lab(91.5182 -0.365466 -2.84777)` / Radius `0px` / Padding `0px` / Typography `16px` / Shadow `none`
**States observed:** Default | Hover: not captured | Focus: not captured | Active: not captured | Disabled: not captured

## Layout
| Property | Value |
|---|---|
| Base Grid | 4px |
| Section Gap | 80px, 160px |
| Container Max Width | Not explicitly captured, inferred ~1200px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Typography scales down, multi-column grids collapse to single column. |
| Desktop | 1440px | Full grid layout, maximum typography scale. |

## Imagery & decoration
Attio relies on wireframe-style technical illustrations and grid backgrounds to convey a sense of engineering and data structure. Photography is kept to an absolute minimum. The brand avoids large blocks of saturated color, preferring thin lines and geometric shapes.

## Do's
- Use `#fbfbfb` as the primary canvas to ensure high contrast for text.
- Apply negative tracking to Inter Display for all headers above 24px.
- Use 1px inset shadows instead of solid borders for cards to create subtle depth.
- Reserve `#000000` for primary call-to-action buttons.
- Maintain a weight of 500 for body text to ensure legibility.

## Don'ts
- **Wrong:** Using `#266df0` as a primary button background. **Right:** Using `#000000` for primary buttons. **Reason:** The system is monochrome-first; color is reserved for subtle accents, not primary interactions.
- **Wrong:** Applying heavy drop shadows to cards. **Right:** Using `oklab(...) 0px 0px 0px 1px inset`. **Reason:** Deep shadows break the flat, technical aesthetic of the UI.
- **Wrong:** Tracking Inter Display loosely. **Right:** Applying tight negative tracking (e.g., -0.84px at 56px). **Reason:** Loose tracking dilutes the engineered, compressed signature of the brand.

## Similar brands
- Linear
- Vercel
- Stripe

## Quick start

```css
:root {
  --color-foundation-bg: #fbfbfb;
  --color-foundation-black: #000000;
  --color-foundation-gray-200: #eeeff1;
  --color-foundation-gray-800: #75777c;
  --color-foundation-gray-990: #242629;
  --color-accent-primary: #266df0;
  
  --font-display: 'Inter Display', sans-serif;
  --font-body: 'Inter', sans-serif;
  
  --shadow-inset-subtle: oklab(0.230499 -0.000396319 -0.00407541 / 0.1) 0px 0px 0px 1px inset;
}
```

## Agent prompt examples
- "Create a pricing card using the light card component spec. Use `#fbfbfb` background, `#83208` (lab) border, and 10px border radius."
- "Build a hero section with a 56px Inter Display header, tracked at -0.84px, and a primary CTA button with a `#000000` background and 9999px radius."
- "Generate a data table using `#eeeff1` for row borders and `#75777c` for column headers at 12px font size."

## Known gaps
Hover, focus, and disabled states were not captured in the source data. Container max-widths are inferred from standard practices rather than explicit token data.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Home | https://attio.com | Desktop 1440px, Mobile 390px | 2026-06-06T05:03:24.273Z |
| Pricing | https://attio.com/pricing | Desktop 1440px | 2026-06-06T05:03:24.273Z |
| About | https://attio.com/about | Desktop 1440px | 2026-06-06T05:03:24.273Z |