Precise light-theme CRM. Inter, hairline borders, near-black buttons, single blue accent #266df0.
Browse Attio in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: attio.com (live DOM, computed styles), 2026-07-06; motion/effects/responsive re-capture 2026-07-07 (desktop 1512px). Coverage: marketing site + sign-in page. Dashboard: pending login (needs-dashboard). Responsive: breakpoints from stylesheets only; mobile rendering not verified.
Precise, quiet, data-dense SaaS design — light-first, with everything set on a neutral gray ladder punctuated by a single blue accent. Chrome is entirely grayscale; blue appears only on interactive and active elements, so color itself signals affordance. Structure comes from high border density — almost every container carries a 1px hairline border — while elevation stays nearly flat, with borders doing the work shadows usually do. A single type family (Inter, no display font, weight capped at 600) keeps the whole surface engineered rather than expressive; nothing is decorative. Feels: precise, quiet, engineered.
| Token | Hex | Role / usage |
|---|---|---|
| ink-900 | #1c1d1f | Primary text, headings |
| ink-800 | #202124 | Primary button bg |
| ink-700 | #232529 | Dark surfaces, code blocks |
| ink-600 | #2e3238 | Secondary button text, strong labels |
| gray-600 | #505154 | Body text on light gray |
| gray-500 | #5c5e63 | Secondary text |
| gray-400 | #75777c | Tertiary text, captions |
| gray-350 | #9fa1a7 | Placeholder, disabled text |
| gray-300 | #b5bdc9 | Muted icons |
| border-strong | #cad0d9 | Input & secondary-button borders |
| border-default | #d3d8df | Hairline borders (most used color on page) |
| border-subtle | #e4e7ec | Card/table dividers |
| surface-200 | #edeff3 | Hover fills, pill bg |
| surface-100 | #f3f4f6 | Section bg, inset panels |
| surface-50 | #fafafb | Page tint |
| white | #ffffff | Page bg, cards |
| Token | Hex | Role / usage |
|---|---|---|
| blue-500 | #266df0 | Primary accent: links, focus rings, active states, CTA on auth pages |
| slate-blue | #505967 / #717a88 / #8f99a8 | Blue-tinted grays for secondary UI text |
Rule: chrome is grayscale; blue appears only for interactive/active elements. Rule: high border density — almost every container has a 1px border.
Inter, -apple-system, sans-serif (single family everywhere; no display font)#1c1d1f| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 64 / 64 | 600 | -1.28px (-2%) |
| Section (h3) | 32 / 38 | 600 | -0.32px (-1%) |
| Eyebrow (h2) | 12 / 14 | 600 | +0.72px (+6%), uppercase, color #75777c |
| Body | 16 / 22 | 400 | 0 |
| UI / buttons | 14 / 20 | 500 | 0 |
| Nav items | 15 | 500 | 0 |
| Caption | 13 / 18 | 400 | 0 |
Patterns: tight negative tracking on large sizes, generous positive tracking on tiny uppercase eyebrows. Weight tops out at 600 — never bold/700.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.