Attio Design Language - Layout Research
Reference document for the Ash design system. Based on live inspection of app.attio.com (April 2026).
Attio’s 5 Layout Archetypes
1. List View
Used for: Companies, People, Deals — any entity collection.
┌─ Sidebar ─┬─ TopBar: title + view toggle + filter + "New" action ────────┐│ │ Filter toolbar (sorted by, filter chips) ││ Nav items │ ┌────────────────────────────────────────────────────────────┐ ││ │ │ Table (no border, no card wrapping) │ ││ │ │ Header row — 12px, muted, uppercase-ish │ ││ │ │ Data rows — 14px, clean hover │ ││ │ │ Footer — count + calculations │ ││ │ └────────────────────────────────────────────────────────────┘ │└────────────┴───────────────────────────────────────────────────────────────┘Key patterns:
- Table is NOT wrapped in a card — flat, edge-to-edge within content area
- Column headers:
12px, muted color,font-medium - Hover cards on entity names (quick preview popover, not a modal)
- Footer row with count + “Add calculation” per column
- Filter toolbar: pill-style chips, not dropdown menus
2. Record Detail (Split View)
Used for: Company detail, Person detail — entity with activity/timeline + properties.
┌─ TopBar: ← 1 of N │ Google ☆ │ Compose email / actions ─────────────┐│ Tabs: Overview │ Activity │ Emails │ Calls │ Team │ Notes │├─ Main content (scrollable) ──────┬─ Right panel (scrollable) ────────┤│ │ Tabs: Details │ Comments ││ § Highlights │ ││ ┌──────┬──────┬──────┐ │ ▾ Record Details ││ │ stat │ stat │ stat │ │ ⊙ Domains google.com ││ └──────┴──────┴──────┘ │ ⊙ Name Google ││ │ ⊙ Description Google spec... ││ § Activity │ ⊙ Team No Team ││ timeline entries... │ ⊙ Categories SAAS Publishing ││ │ > Show all values ││ § Notes │ ││ note entries... │ ▾ Lists ││ │ This record has not been... │└───────────────────────────────────┴───────────────────────────────────┘Key patterns:
- Right panel is NOT a
<Card>— it’s a flat property list with collapsible sections - Panel has its own tab bar (Details / Comments)
- Sections are collapsible (▾ chevron + section title)
- Properties are key-value rows: icon + label left, editable value right
- No borders around individual property groups — just subtle horizontal separators between sections
- Left side “Highlights” uses metric cards (stat display) — the only card usage on this page
3. Settings / Configuration
Used for: Workspace Settings → General, Members, Plans, Billing, etc.
┌─ Settings sidebar ─┬─ TopBar: ⊕ General ──────────────────────────────┐│ Search settings │ ││ Personal │ General ││ Profile │ Change the settings for your current workspace ││ Appearance │ ───────────────────────────────────────────── ││ Workspace │ [Logo] + Upload ││ General ← │ Name ___nexusti___ Slug ___nexusti___ ││ Members │ ───────────────────────────────────────────── ││ Plans │ Export workspace data [Start new export] ││ Billing │ ┌─ mini table ────────────────────────────────┐ ││ Developers │ │ No exports yet │ ││ Security │ └─────────────────────────────────────────────┘ ││ ... │ ───────────────────────────────────────────── ││ │ Danger zone ││ │ ┌─ red-tinted card ────────────────────────────┐ ││ │ │ Delete workspace [Delete workspace] │ ││ │ └─────────────────────────────────────────────┘ │└─────────────────────┴──────────────────────────────────────────────────┘Key patterns:
- Full-width single-column layout — no split sidebar for settings
- Form fields are flat — label + input, no card wrappers
- Groups separated by
<Separator>— not by card boundaries - Sidebar replaces the main nav (full takeover, with ← back to app)
- Only exception: Danger zone uses a red-tinted card for visual warning
- Page title is large (H1 level) with subtitle description
4. Dashboard / Home
Used for: Home page — greeting, AI chat, meetings, tasks.
Key patterns:
- No cards for sections — flat layout with section headers
- AI chat box has a subtle border (input area, not a card)
- CTA cards only for empty states (“Sync Google Account”)
- Task list is flat, no card wrapper
- Section headers: “Meetings”, “Tasks” — plain text with count badge
5. Full-screen / Canvas
Used for: Workflow editor, Sequence builder.
- Full viewport canvas with floating controls
- Not relevant to form/config UI patterns
Typography Tokens (computed from live app)
| Role | Size | Weight | Letter-spacing | Color |
|---|---|---|---|---|
| Page greeting (H1) | 20px | 600 | -0.4px (-0.02em) | foreground |
| Section title (H3) | 16px | 600 | -0.32px (-0.02em) | foreground |
| Body emphasis | 14px | 600 | -0.14px (-0.01em) | foreground |
| Body / sidebar nav | 14px | 500 | -0.14px (-0.01em) | foreground |
| Form label | 12px | 500 | -0.12px (-0.01em) | muted (55% opacity) |
| Table header | 12px | 500 | normal | muted |
| Caption / helper | 12px | 400 | normal | muted |
Color & Surface Tokens
| Token | Value | Use |
|---|---|---|
| Sidebar bg | rgb(249,250,251) | Subtle warm gray, nearly white. Note: this is the SIDEBAR color only. It was previously misread as a “tinted body bg” for Focus pages — that was wrong. Focus body uses pure white (bg-background); see attio-layout-patterns.md §3d. |
| Content bg | #FFFFFF | Pure white content area |
| Border | rgba(0,0,0,0.06) | Extremely subtle, 6% opacity |
| Label color | rgba(0,0,0,0.55) | 55% opacity foreground |
| Accent | Indigo #475BA1 | Buttons, links, active indicators |
| Destructive card | rgba(239,68,68,0.05) bg + red border | Danger zone only |
| Radius | 8px | Standard border-radius |
When to Use Cards vs Flat Sections
Use <Card> | Use flat <FormSection> + <Separator> |
|---|---|
| Dashboard metrics / KPIs | Settings/config sidebar panels |
| Clickable entity previews (tool cards, agent cards) | Form field groups |
| Self-contained widgets | Properties/config in split view |
| Empty state CTAs | Right-side detail/properties panels |
| Danger zone (red-tinted card) | Sequential form sections |
Rule: Cards are for content containers — self-contained, potentially interactive entities. If the content is form fields, key-value properties, or configuration, use flat <FormSection> + <Separator>. Cards around config fields add unnecessary visual weight.
Attio Spacing System
- Base unit: 8px
- Field spacing (label → input): 6px (
space-y-1.5) - Field group spacing: 16px (
space-y-4) - Section spacing: 24px (
space-y-6) - Page padding: 24–32px
- Sidebar padding: 12–16px
- Card padding: 16px (when cards ARE used)
Interaction Patterns
Hover cards (on list rows)
- Quick preview popover appears on entity name hover
- Shows: avatar/logo, name, key metadata, recent activity
- Actions row at bottom: copy, open in new tab, quick actions
Inline editing
- Most property values in the right panel are click-to-edit
- No separate edit mode — the panel IS the edit surface
- Empty values show “Set a value…” placeholder
Collapsible sections
- ▾ chevron toggles section visibility
- State persists per section (not globally)
- Default: all expanded