# Attio — Marketing Site Design Spec

> 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.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Neutrals (light theme)
| 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 |

### Accent
| 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.

## 3. Typography Rules

- Font stack: `Inter, -apple-system, sans-serif` (single family everywhere; no display font)
- Body: 16px / 22px line-height / 400 / `#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.

## 4. Component Stylings

### Buttons
- **Primary (dark)**: bg `#202124`, text `#f3f4f6`, border 1px `#505967` (lighter than bg — creates a subtle top-lit bevel), radius 10px, h 36px, 14px/500, padding `0 12px`. Hover: bg lightens to `#2e3238`.
- **Secondary (outline)**: bg `#ffffff`, text `#2e3238`, border 1px `#cad0d9`, radius 10px, h 36px. Hover: border darkens to `#6f7988`, bg stays white (also seen: bg `#f3f4f6`).
- **Primary (auth/CTA)**: bg `#266df0`, text white, radius 10px, full-width on auth pages.
- **Ghost/nav**: transparent, text `#2e3238`, radius 10px, hover bg `#edeff3`.

### Inputs
- h 36px, bg white, border 1px `#cad0d9`, radius 10px, placeholder `#9fa1a7`, leading icon 16px gray. Focus: border `#266df0` + 3px ring `rgba(38,109,240,.15)` (focus-visible only — no ring on programmatic focus).

### Cards / panels
- bg white, border 1px `#d3d8df`, radius 12px, padding 16–24px, no shadow (or hairline).
- App-preview panels: nested UI with sidebar (240px, bg `#fafafb`, right border `#e4e7ec`), rows h 32px, radius 8px hover `#edeff3`.

### Tabs (marketing feature switcher)
- Full-width row, 1px borders between cells, active cell bg `#f3f4f6`, inactive text `#75777c`, active text `#1c1d1f`.

### Chips / badges
- h 24–28px, radius 6px, bg `#edeff3`, text 12px/500 `#505154`.

### Table/list rows (from embedded product previews)
- Row h 32–36px, 13–14px text, icon+label pattern, hairline dividers `#e4e7ec`, hover full-row `#f4f5f6`.

## 5. Layout Principles

- Max content width ~1120px, centered; hero text centered.
- Spacing: 4px base grid; sections use 96–128px vertical rhythm; component gaps 8/12/16/24.
- Nav: h 64px, white, hairline bottom border; logo left, center links (15px/500), right actions (Sign in outline + Start for free dark).
- Hero: eyebrow pill link → 64px display → 20px gray subhead (`#5c5e63`) → dual CTA (dark primary + outline).
- Sections divided by full-bleed hairlines; frequent full-width bordered "graph paper" panels with dotted grid background (`radial-gradient(#d3d8df 1px, transparent 0)` at ~16px).
- Logo walls: grayscale customer logos, generous spacing.

## 6. Depth & Elevation

- Radii: buttons/inputs `10px`, cards/panels `12px`, small chips `6px`, avatars full.
- Control heights: buttons & inputs `36px` (compact `32px`); button padding `0 12px`.
- Elevation: nearly flat — borders instead of shadows. When present, shadows are hairline: `0 1px 2px rgba(0,0,0,.06)`.

## 7. Motion

- Micro-transitions only, 150–500ms. Census across ~3500 elements: dominant `color/background-color/border-color 0.3s cubic-bezier(0.2,…)`, then `0.5s cubic-bezier(0.32,…)`, `0.15s`, and `opacity, translate 0.4s cubic-bezier(0.2,…)`; occasional `stroke 0.3s cubic-bezier(0.4,…)` on SVG. Custom cubic-bezier easings, ease-out character.
- Named keyframes with observed triggers: `dialog-scale-in` / `dialog-scale-out` (dialog entrance/exit), `navigation-enter-from-right/left` + `navigation-exit-to-right/left` (nav menu entrance/exit), `search-shine` (shimmer), `ai-hero-box-gradient-spin` (spins the conic brand-gradient ring on the AI hero box), `spin 1s infinite` (loader).
- Other stylesheet keyframes (triggers not captured): rotate-reporting, pricing-cards-grid-line-appear, rotate, connection, running, completed, pulse, enter, exit, productivity-intro-width/height.
- No animation library detected — no GSAP, Lenis, Framer-style smooth scroll. No large scroll animations; product previews animate content inside static frames.

## 8. Backgrounds, Effects & WebGL

- Flat white canvas overall; no canvas/WebGL, no background video, no Lottie/Rive.
- Gradients are rare and fall into two roles:
  - **Signature brand conic ring** (AI hero, animated by `ai-hero-box-gradient-spin`): `conic-gradient(#fd9038 → #f5b900 → #ff5b59 → #266df0 → #13dd8d → #fd9038)`.
  - **Conic glow accents**: `#709ff500 → #709ff5aa → #709ff500` and `#a3ece900 → #a3ece9 → #709ff5 → #0000`.
  - **Subtle low-alpha washes**: `linear-gradient(rgba(0,102,153,.06) → rgba(0,102,153,.02))`; `linear-gradient(rgba(15,194,123,.08) → rgba(15,194,123,.02))`; `linear-gradient(#edeff3 → #e4e7ec)`; white fade `rgba(255,255,255,0) → #fff`.
- `backdrop-filter` blur (Tailwind var-based) present but used sparingly.

## 9. Do's and Don'ts

### Do
- Keep all chrome grayscale; reserve blue `#266df0` for links, focus rings, active states, and auth CTAs.
- Put a 1px hairline border on almost every container (`#d3d8df` default, `#e4e7ec` subtle) — borders, not shadows, create structure.
- Use tight negative tracking on large headings (-2% at 64px) and generous positive tracking (+6%) on tiny uppercase eyebrows.
- Use Inter as the single family everywhere, weights 400/500/600 only.
- Keep buttons and inputs 36px tall (32px compact) at radius 10px; cards at radius 12px.
- Keep lists dense: 32–36px rows with hairline dividers and full-row hover fills.
- Stay on the 4px spacing grid with 96–128px section rhythm.
- Keep customer logos grayscale.
- Limit motion to 150–500ms micro-transitions on color/bg/border/opacity/translate; use scale-in/out only for dialogs and nav menus.
- Keep gradients rare: low-alpha tints (~.02–.08 alpha) or the multicolor conic brand ring, reserved for AI features.

### Don't
- Don't use weight 700+ — weight tops out at 600, never bold.
- Don't introduce a display font or any second type family.
- Don't use blue for non-interactive chrome, or add a second accent color.
- Don't replace hairline borders with shadows; when a shadow appears at all it is only `0 1px 2px rgba(0,0,0,.06)`.
- Don't add large scroll animations or a smooth-scroll library.
- Don't add canvas/WebGL effects or background video — the canvas stays flat white.
- Don't use the multicolor conic gradient outside AI-feature framing.
- Don't add decorative elements — nothing on the page is decorative.

## 10. Responsive Behavior

- Breakpoints in stylesheets: 375, 576, 768, 992, 1200 (+ max-width 1199), 1536.
- A hamburger menu button exists in the header markup (mobile nav pattern).
- Mobile rendering not verified — captured at desktop 1512px only.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#ffffff` · Text `#1c1d1f` · Muted `#75777c` · Border `#d3d8df` · Accent `#266df0`
- Font: `Inter, -apple-system, sans-serif` · Body: 16px · Radius: 10px control / 12px card · Control height: 36px
- Focus: border `#266df0` + 3px ring `rgba(38,109,240,.15)` (focus-visible only) · Hover fill: `#edeff3`

<attio_design_language>
Use the Attio design language: light theme, white background, Inter only. Text #1c1d1f; secondary #5c5e63; tertiary #75777c. Hairline 1px borders everywhere (#d3d8df default, #e4e7ec subtle); surfaces #f3f4f6/#edeff3. Single accent blue #266df0 used only for links, focus rings and active states. Headings weight 600 max with tight tracking (-2% at 64px); 12px uppercase eyebrows (+6% tracking, #75777c). Buttons and inputs 36px tall, radius 10px; primary button near-black #202124 with a lighter 1px border #505967; secondary white with #cad0d9 border. Cards radius 12px, border not shadow. Dense 32px rows, 4px spacing grid, flat elevation; 150–500ms micro-transitions on color/border/opacity only, and one signature animated conic brand-gradient ring (#fd9038→#f5b900→#ff5b59→#266df0→#13dd8d) reserved for AI features. Feels: precise, quiet, engineered. Avoid: font weights 700+, a second type family or accent color, shadows in place of hairline borders, large scroll animations, and decorative elements.
</attio_design_language>