Attio — Design System Reference

1. Visual Theme & Atmosphere

Attio presents itself as precision-engineered enterprise software with a refined, almost academic restraint. The aesthetic is bright and clean — white surfaces, near-black type, no decorative flourish — yet it avoids the sterility of generic SaaS by leaning into micro-detail: tight negative tracking on headlines, carefully tuned font-feature settings, and a layered z-index architecture that signals genuine UI complexity. The overall feeling is a well-lit workspace: nothing shouts, nothing hides. Trust is built through consistency rather than spectacle.

2. Color Palette & Roles

Foundation

• #ffffff / --color-white-100 — page background, card surfaces
• --color-primary-background — semantic alias for page BG (light mode default)
• --color-black-0 — banner/announcement bar backgrounds (near-black accent)
• --color-black-50 — overscroll bottom tint

Text hierarchy

• --color-black-400 — primary body and button text
• --color-black-300 — hover state text
• --color-black-200 — active/pressed text
• --color-white-900 — disabled foreground

Interactive surfaces

• --color-white-100 — button default background (outline variant)
• --color-white-300 — ghost button hover background
• --color-white-400 — ghost button active background
• --color-white-500 — disabled button border

Borders

• --color-white-800 — outline button default border
• --color-black-700 — outline button hover/focus border
• --color-black-500 — outline button active border

No brand color is used decoratively. The palette is deliberately achromatic — color is used only to communicate state, not identity.

3. Typography Rules

Attio uses two typefaces from the same Inter family — interDisplay for headings and inter for body — combined with the "ss03" OpenType feature enabled globally. This subtle stylistic set likely affects specific character forms (e.g., lowercase l disambiguation), reinforcing trust and legibility in a data-dense product.

Scale

Key decisions:

• Headlines carry significant negative letter-spacing, creating a compressed, premium feel
• Line-height on H1 equals font-size (64/64) — a deliberate 1:1 ratio that reads as intentional density
• 500 weight on body text is heavier than typical, improving readability in small UIs
• No serif, no display font experimentation — type is a tool, not a statement

4. Component Stylings

Buttons — Outline variant

• Default: white bg, white-800 border, black-400 text
• Hover: border upgrades to black-700 — border does the signaling, background stays static
• Active: background shifts to white-300, border to black-500
• Disabled: border recedes to white-500, text to white-900

Buttons — Ghost variant

• Transparent by default; hover adds white-300 fill
• State changes are incremental and low-contrast — designed for toolbar/icon contexts

Z-index system (explicit, documented)

• Mobile nav overlay: 90 / content: 91
• Site header: 92
• Navigation menu: 93
• Dialog overlay: 100 / content: 101

This explicit stacking ladder is a sign of a mature component library.

5. Layout Principles

Attio uses a multi-height header model with distinct desktop and mobile sub-header states. Desktop sub-header has a set pixel height; mobile sub-header collapses to 0px when hidden and expands to 63px when visible. Layout is header-driven — the page background color is a semantic alias, not a hardcoded value, meaning themes can be swapped cleanly. Notably absent: a defined grid system or column count in the extracted data, suggesting layout is handled per-section with flexbox/grid utilities rather than a global scaffold.

6. Depth & Elevation

Depth is handled architecturally through z-index layers rather than shadow. No box-shadow values appear on surface-level elements. The absence of shadow as a depth tool is a deliberate choice — Attio’s UI feels flat but layered, not skeuomorphic. Dialogs and menus announce their elevation through z-index and overlay, not blur or lift.

7. Do’s and Don’ts

Do:

• Use --color-* tokens — never hardcode hex values
• Enable "ss03" feature setting on all Inter instances for character consistency
• Apply negative letter-spacing on any heading above 24px
• Follow the documented z-index ladder precisely; never improvise stacking values
• Keep button state changes subtle — border/text shifts, not background floods

Don’t:

• Introduce color outside the achromatic system for decoration
• Use font-weight: 400 for body text — 500 is the minimum
• Add box-shadows to compete with the z-index elevation model
• Skip the semantic --color-page-background alias in favor of white

8. Responsive Behavior

Breakpoints: mobile-first with a key transition at ~768px (inferred from sub-header mobile/desktop split). The sub-header height variable --site-header-subheader-height switches between mobile and desktop values via CSS custom property reassignment — no media query needed in components, only in the :root or layout shell. This pattern keeps components ignorant of viewport size.

9. Agent Prompt Guide

Build a UI that matches Attio’s design language.

Use interDisplay (semi-bold, -1.28px tracking) for headings and inter (medium weight, -0.16px tracking) for all body and form text. Enable font-feature-settings: "ss03" globally. The palette is fully achromatic: white surfaces, near-black text, border-driven interactive states. Never use color decoratively — state changes happen through border-color and background shifts within the white/off-white range. Respect the z-index ladder: nav overlays at 90-91, header at 92, menus at 93, dialogs at 100-101. Components should be stateless regarding viewport — use CSS custom property reassignment at the layout shell level for responsive behavior, not media queries inside components.

Generated by Sparkbites — extracted from live CSS analysis