Switch between the rendered Visual preview and the Raw DESIGN.md.
Attio's design system embodies a modern, enterprise-focused aesthetic refined for professional productivity. The visual language combines clean minimalism with purposeful data visualization, emphasizing clarity and efficiency. Dark neutrals anchor the interface while selective use of vibrant accent colors (blue, orange, teal) guide user attention to critical actions and outcomes. The typography hierarchy employs generous sizing to create breathing room and visual hierarchy. Shadow and elevation treatments are subtle and layered, creating depth without visual noise. This system feels trustworthy, contemporary, and purpose-built for complex business workflows at scale.
Key Characteristics
#000000): Primary text, headings, and dominant interface elements; conveys authority and clarity#1C1D1F): Secondary text, borders, and subtle UI elements; softer alternative to pure black#266DF0): Primary brand accent; used for key CTAs and interactive focus states#709FF5): Secondary blue; used for hover states, badges, and informational highlights#C8DCFF): Tinted blue; background fills and low-emphasis accent elements#FD9038): Tertiary accent for warnings, notifications, and secondary CTAs#F5B900): Status indicator for warning states and cautionary alerts#A3ECE9): Accent for success states, positive actions, and completed items#FF5B59): Error and destructive action indicator#266DF0): Default button background and primary interactive states#37426D): Subtle border treatment for primary buttons; derived from primary blue#000000): Text links appear in navy for consistency with body text; underlined on hover#CAD0D9): Borders, dividers, and tertiary UI elements; creates subtle visual separation#FFFFFF): Backgrounds for cards, modals, and light surfaces; maximum contrast#F5F5F5): Subtle background tint for alternate sections; near-white with minimal visual weight#CAD0D9): Standard border color for inputs, cards, and containers; neutral and recessive#FFFFFF): Primary background for all surfaces, content areas, and modals#F5F5F5): Secondary background for contrast sections, inactive tabs, and grouped contentPrimary Font: Inter Display
'Inter Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serifSecondary Font: Inter
'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / H1 | Inter Display | 64px | 600 | 64px | 0px | Hero headlines; maximum visual prominence |
| Heading / H2 | Inter Display | 32px | 600 | 38px | 0px | Section headings; strong visual anchor |
| Label / Overline | Inter Display | 12px | 600 | 14px | 0px | Field labels, category tags, section overlines |
| Body / Paragraph | Inter | 16px | 500 | 24px | 0px | Primary content text; high readability |
| Body Small | Inter | 13px | 500 | 20px | 0px | Secondary content, descriptions, captions |
| Link | Inter | 16px | 500 | 22px | 0px | Hyperlinks; standard body weight maintains flow |
| Button | Inter | 16px | 500 | 22px | 0px | Button text; consistent sizing with body for unity |
| Button Small | Inter | 15px | 500 | 22px | 0px | Compact button variants for dense layouts |
Primary Button
#266DF0#FFFFFF0px 14px12px1px solid #37426D46px22pxnone#1F55C9, border #2D3759#1A47A3, border #23294A2px solid #709FF5 offset 2pxSecondary Button (Ghost)
transparent#0000000px 12px10px1px solid transparent36px22pxnone#F5F5F5, text #000000#E8E8E8, text #000000Icon Button
transparent#0000000px10px1px solid transparent36px36px22pxnone#F5F5F5#E8E8E8Standard Card
#FFFFFF1px solid #CAD0D910px24pxrgba(28, 29, 31, 0.1) 0px 0px 0px 1px, rgba(28, 29, 31, 0.05) 0px 1px 2px 0px, rgba(28, 29, 31, 0.02) 0px 2px 4px -1px#000000Elevated Card (Modal)
#FFFFFF1px solid #CAD0D910px28pxrgba(28, 29, 31, 0.1) 0px 0px 0px 1px, rgba(28, 29, 31, 0.05) 0px 1px 2px 0px, rgba(28, 29, 31, 0.02) 0px 2px 4px -1px, rgba(28, 29, 31, 0.03) 0px 4px 8px -2px, rgba(28, 29, 31, 0.04) 0px 8px 16px -4px, rgba(28, 29, 31, 0.05) 0px 16px 32px -8px, rgba(28, 29, 31, 0.06) 0px 32px 64px -8px#000000Text Input
#FFFFFF#00000010px 13px10px1px solid #CAD0D9auto (minimum 40px)24pxnone#266DF0, outline 2px solid #C8DCFF offset 2px#505967, opacity 0.6Text Area
#FFFFFF#00000012px 13px10px1px solid #CAD0D924pxnone120px#266DF0, outline 2px solid #C8DCFF offset 2pxSelect / Dropdown
#FFFFFF#00000010px 13px10px1px solid #CAD0D940pxnone#266DF0Top Navigation Bar
#FFFFFF67px16px 0px 15px 0px1px solid #CAD0D9#000000Navigation Link (Default)
#0000006px 12px6pxtransparent#F5F5F5, text #000000#E8E8E8, text #000000Side Navigation Item
#50596712px 16px8pxtransparent#F5F5F5, text #000000#709FF5, text #FFFFFFBadge (Default)
#C8DCFF#266DF04px 8px6pxnoneBadge (Warning)
#FFF4E0#F5B9004px 8px6pxnoneBadge (Success)
#E0FBF9#A3ECE94px 8px6pxnoneBase Unit: 4px
Scale & Usage:
4px — Micro gaps between adjacent elements (e.g., icon-to-text spacing in buttons)8px — Tight clustering (e.g., button group gaps, form label-to-field)12px — Input padding, small card padding16px — Standard padding for moderate-density layouts, navigation vertical padding20px — Section breaks, tab spacing24px — Card internal padding, moderate component spacing28px — Modal padding, dialog spacing32px — Large section gaps, container-level spacing36px — Hero section vertical rhythm48px — Major section breaks, page-level spacing52px — Large feature spacing, full-width section separation60px — Top-level page padding, maximum breathing room60px on desktop, 24px on tablet, 16px on mobile24px between grid columnsAttio's layout philosophy prioritizes breathing room and visual rest. Generous whitespace reduces cognitive load in data-heavy interfaces. Spacing scales with content density: heroic landings receive maximum breathing room (52–60px vertical gaps), while operational dashboards use tighter 16–24px rhythm to fit more data. Negative space is treated as a design element equal to content; it guides eye flow and establishes visual hierarchy without relying on borders alone.
6px — Tight radius for small badges, pills, and icon buttons8px — Navigation items, smaller cards10px — Standard radius for inputs, buttons, and cards; primary system radius12px — Primary buttons, modals; slightly enhanced visual softness for key interactive elements16px — Large containers, expanded card states20px — Full-width section containers, maximum visual softness| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow; box-shadow: none | Tertiary actions, disabled states, background elements |
| Raised (sm) | rgba(28, 29, 31, 0.1) 0px 0px 0px 1px, rgba(28, 29, 31, 0.05) 0px 1px 2px 0px, rgba(28, 29, 31, 0.02) 0px 2px 4px -1px | Standard cards, inputs, popovers; subtle lift off background |
| Lifted (md) | rgba(28, 40, 64, 0.06) 0px 2px 6px 0px, rgba(28, 40, 64, 0.08) 0px 6px 20px -2px | Floating toolbars, expanded dropdowns; increased visual separation |
| Elevated (lg) | rgba(28, 40, 64, 0.18) 0px 0px 2px 0px, rgba(0, 0, 0, 0.04) 0px 1px 3px 0px | Sticky headers, floating filters; moderate depth |
| Modal (xl) | rgba(0, 0, 0, 0.04) 0px 12px 30px 0px | Modals, overlays, primary dialogs; maximum visual separation from content |
Shadow Philosophy
Attio's shadow system is intentionally minimal and layered. Each elevation level uses multiple, fine-grained shadow layers (blur and spread radius variations) to mimic natural light diffusion. Shadows are warm-toned (using dark grays with slight blue tint in the rgba(28, 40, 64, ...) variants) to feel sophisticated without coldness. The system avoids stark black shadows, maintaining the design's friendly, professional tone. Shadows increase in intensity and spread at higher elevations, creating clear visual depth hierarchy without visual harshness.
#CAD0D9 for all borders — Consistency in border color creates cohesion; deviations should be intentional (focused, active states)#709FF5 for outline color#CAD0D9 border to containers for definition| Breakpoint Name | Width | Key Changes |
|---|---|---|
| Mobile | 320px–639px | Single column, full-width cards, 16px padding, 28px heading size, compact nav, stack all groups vertically |
| Tablet | 640px–1023px | 2-column grid in some areas, 24px padding, 32px heading size, side nav optional, consolidated controls |
| Desktop | 1024px–1439px | 3-column grid, 48px padding, 32px heading size, fixed side nav (256px), full feature set visible |
| Large Desktop | 1440px+ | Max-width container (1440px) centered, 60px padding, layout locked at max width, optional whitespace on sides |
Navigation:
Forms:
Cards & Content:
Modals & Dialogs:
Tables:
#266DF0)#1F55C9)#000000)#1C1D1F)#CAD0D9)#FFFFFF)#F5F5F5)#A3ECE9)#FD9038) or Warning Gold (#F5B900)#FF5B59)#709FF5)#C8DCFF)All text uses Inter font family; sizes are 12px (labels), 13px (captions), 16px (body/buttons), 32px (headings), 64px (display)
Primary buttons are #266DF0 background with #FFFFFF text; 16px Inter weight 500; 46px height; 12px border radius; 14px horizontal padding
#000000 text; 36px height; 10px radius; 12px paddingAll text inputs use #FFFFFF background with #CAD0D9 border; 40px minimum height; 10px vertical padding; 13px horizontal padding; 10px radius
#266DF0 with #C8DCFF outline (2px, 2px offset)Cards use #FFFFFF background with #CAD0D9 border (1px); 10px radius; 24px padding; shadow is "Raised (sm)" level
Apply spacing in multiples of 4px; common sizes are 8px (buttons, tight groups), 16px (padding, standard), 24px (cards), 32px (sections), 60px (page container)
Borders are always #CAD0D9 unless indicating state (focus: #266DF0, error: #FF5B59, success: #A3ECE9)
Links in body copy are #000000 text with underline on hover; no background color unless in a button or badge context
12px label text with 6px padding, 6px radius; hover background is #F5F5F5Avoid pure black (#000000) borders on white backgrounds; use #CAD0D9 for visual softness while maintaining definition
All elevation comes from shadows, not borders; use shadow levels: flat (none), sm (standard cards), md (floating), lg (sticky), xl (modals)
Responsive strategy: desktop (1440px max, 60px padding, 3-col grid), tablet (640–1023px, 24px padding, 2-col), mobile (320–639px, 16px padding, 1-col, touch targets 48px+)