# Linear — Marketing Site Design Spec

> Source: linear.app homepage (live DOM, computed styles), recaptured 2026-07-08 at desktop 1512px; palette/weights cross-checked against Linear's published CSS custom properties (2026-07-06).
> Coverage: full homepage (hero → logo wall → feature chapters → closing CTA → footer). App shell: see `apps/linear/app/`. Responsive: breakpoints from stylesheets only; mobile rendering not verified.

## 1. Visual Theme & Atmosphere

A cinematic dark product brochure: near-black canvas, huge left-aligned Inter display at medium (510) weight with tight negative tracking, and real app screenshots floating in bordered frames over metallic silver-gradient floors. Color is almost absent — white/gray type, near-white pill CTAs, one indigo/violet brand hue reserved for product UI inside the screenshots. Sections read like numbered chapters (gray index numerals + arrow links), and a signature two-tone editorial device sets the lead clause in white and the rest in gray within one 48px block. Motion is restrained: fades and staggers, everything fast. Feels: cinematic, engineered, confident, quietly premium.

## 2. Color Palette & Roles

### Canvas & surfaces
| Token | Hex | Role / usage |
|---|---|---|
| bg | `#08090a` | Page canvas (deepest sections `#010102`) |
| surface-1 | `#0f1011` | Framed screenshot panels, cards |
| surface-2 | `#141516` | Higher panels |
| panel | `#1c1c1f` | Floating cards (Slack thread, Pulse card) |
| ghost-fill | `rgba(255,255,255,.05)` | Dark pill CTA (Contact sales) |
| border | `#23252a` / `rgba(255,255,255,.05)` | Hairlines, frame borders |
| nav | transparent + `backdrop-filter: blur(20px)`, h73, fixed | Header |

### Text
| Token | Hex | Role / usage |
|---|---|---|
| text-primary | `#f7f8f8` | Display, headings, lead clauses |
| text-secondary | `#d0d6e0` | Feature card titles (20/590) |
| text-tertiary | `#8a8f98` | Subheads, body, nav links, footer links, de-emphasized display text |
| text-quaternary | `#62666d` | Chapter index numerals, fine print |

### Brand & CTA
| Token | Hex | Role / usage |
|---|---|---|
| cta near-white | `#e5e5e6` | Primary pill buttons (text `#08090a`) |
| brand indigo | `#5e6ad2` / violet `#7170ff` | Appears only inside product screenshots and small UI accents — never as marketing chrome |
| metallic floor | silver gradient (light gray → white → dark) | Pedestal under hero/section screenshots |

Rule: marketing chrome is strictly grayscale; the only saturated color on the page lives inside embedded product UI (issue-state dots, charts).
Rule: two-tone display — lead clause `#f7f8f8`, remainder `#8a8f98`, same size/weight.

## 3. Typography Rules

- Font stack: `"Inter Variable", "SF Pro Display", -apple-system, "Segoe UI", Roboto, sans-serif`. One family; no display face.
- Optical weights: 400 body, 510 display/medium, 590 card titles. Display is 510 — lighter than you'd guess.
- Body: 16px / 24px / 400; subheads 15px / 24px / 400 `#8a8f98`.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero display (h1) | 64 / 64 | 510 | -1.408px (-2.2%), left-aligned |
| Closing display (h2) | 72 / 72 | 510 | -1.584px, centered |
| Section chapter (h2) | 48 / 48 | 510 | -1.056px (-2.2%) |
| Feature card title (h3) | 20 / 26.6 | 590 | -0.24px |
| Hero subhead | 15 / 24 | 400 | 0, `#8a8f98` |
| Body / editorial | 16 / 24 | 400 | 0 |
| Nav links | 13–14 | 400–510 | 0, `#8a8f98` |
| Footer: headers 13/510 `#f7f8f8`, links 13/400 `#8a8f98` | | | |

Patterns: display sizes are huge but weight stays 510; tracking tightens ~-2.2% at every display size; body tracking neutral.

## 4. Component Stylings

### Buttons (pills, radius 9999)
- **Primary small (nav "Sign up")**: bg `#e5e5e6`, text `#08090a`, h32, 13px/510, padding `0 12px`, layered stack-low shadow. Hover → white.
- **Primary large ("Get started")**: same recipe at h44, 16px/510, padding `0 20px`.
- **Dark pill ("Contact sales")**: bg `rgba(255,255,255,.05)`, text `#f7f8f8`, h44, 16px/510.
- **Ghost ("Log in")**: transparent, text `#8a8f98`, h32, 13px/400. Hover: text → `#f7f8f8`.

### Chapter index links (signature)
- Inline row: gray numeral (`#62666d`, e.g. "1.0", "3.1") + white label (`#f7f8f8`, 16px) + `→`. Used under section intros and as 2-column mini-indexes ("3.1 Issues · 3.2 Agents…").

### Framed product screenshots
- Real app UI in rounded frames: bg `#0f1011`, 1px border `rgba(255,255,255,.05)`, radius ~12–16, atop a metallic silver-gradient pedestal that fades into the canvas via vignette.

### Floating panels
- Slack-thread card, Weekly Pulse card: bg `#1c1c1f`, radius 12–16, soft deep shadow, 14–15px content, avatars + meta in `#8a8f98`.

### Two-tone editorial block
- One 48px/510 block: first sentence `#f7f8f8`, continuation `#8a8f98`. No other emphasis device used.

### Logo wall
- Single row of white (full-brightness) customer logos over the canvas, ~20px tall, generous gaps; no grayscale dimming.

### Footer
- 5 columns on `#08090a`: 13px/510 white headers, 13px/400 `#8a8f98` links, generous 10px row spacing; fine-print row (Privacy · Terms) `#62666d`.

## 5. Layout Principles

- Content column ~1200px; hero text left-aligned with a right-floated "New →" changelog link.
- Hero anatomy: nav (h73) → 64px H1 → 15px gray subhead → full-width framed app screenshot on metallic floor.
- Sections are chapters: 48px two-tone or white heading left, supporting 16px gray paragraph right (2-col split), then full-bleed product visual; gray-numeral index links close each chapter.
- Closing: centered 72px display ("Built for the future. Available today.") + Get started / Contact sales pill pair.
- Section rhythm generous (~160–240px); hairlines rare — separation via darkness and space.

## 6. Depth & Elevation

- Radii: pills 9999; frames/cards 12–16; small chips 4–6.
- Shadows: layered stack-low on light pills (`0 5px 2px #00000003, 0 3px 2px #0000000a, 0 1px 1px #00000012, 0 0 1px #00000014`); deep soft `0 4px 32px rgba(8,9,10,.6)` under floating panels.
- Depth mostly from vignettes, glows, and the metallic pedestal gradients — not borders.

## 7. Motion

- Micro-transitions 100–160ms, ease-out-quad `cubic-bezier(.25,.46,.45,.94)`: color .1s, filter/transform/opacity .16s.
- `staggerIn 0.4s` entrance on load; logo marquee keyframes (`scroll` 30s linear infinite) present in CSS; scroll-linked fades on chapter visuals.
- CSS-native — no GSAP/Framer/Lenis. Never bouncy or slow.

## 8. Backgrounds, Effects & WebGL

- No canvas/WebGL/video — atmosphere is layered CSS.
- Metallic pedestal: silver linear gradients under screenshots fading via `radial-gradient` vignette `rgba(8,9,10,0) → rgb(8,9,10)`.
- Low-alpha white radial glows (`rgba(255,255,255,.02–.04)`) behind displays; faint top glow above the footer.
- Glass nav: `backdrop-filter: blur(20px)` over content.

## 9. Do's and Don'ts

### Do
- Keep marketing chrome strictly grayscale on `#08090a`; let color exist only inside product screenshots.
- Set display type huge (48–72px) at weight 510 with ~-2.2% tracking; left-align the hero.
- Use the two-tone device: lead clause white, rest `#8a8f98`, same block.
- Use near-white `#e5e5e6` pills (h32 nav / h44 hero) with the layered stack-low shadow; dark 5%-white pill as the secondary.
- Frame product UI in `#0f1011` panels with 5%-white hairlines on metallic pedestal gradients.
- Number the chapters: gray `#62666d` numerals + white label + arrow.
- Keep logo walls white at full brightness.
- Keep motion 100–160ms ease-out; stagger entrances.

### Don't
- Don't center the hero — it is left-aligned (only the closing display centers).
- Don't use weights above 590; display is 510, never bold.
- Don't put indigo/violet in marketing chrome — it belongs to the product UI.
- Don't use hairline borders for section separation — darkness and spacing do it.
- Don't dim or grayscale the customer logos.
- Don't add springy or slow animation, or motion libraries.

## 10. Responsive Behavior

- Breakpoints in stylesheets: max-width 600, 640, 768, 1024, 1280.
- Mobile rendering not verified — captured at desktop 1512px only.

## 11. Agent Prompt Guide

- Canvas `#08090a` · Text `#f7f8f8` · Muted `#8a8f98` · Fine `#62666d` · Border `rgba(255,255,255,.05)` · CTA `#e5e5e6`
- Font: `"Inter Variable", "SF Pro Display", -apple-system, sans-serif` · Body: 16px · Radius: 9999 pills / 12–16 frames · CTA height: 32px nav, 44px hero
- Hover: ghost text `#8a8f98`→`#f7f8f8`; light pill → `#ffffff` · Shadow: stack-low layered on light pills

<linear-marketing_design_language>
Use the Linear marketing design language: near-black #08090a canvas, strictly grayscale chrome — white #f7f8f8, gray #8a8f98, fine-print #62666d — with color allowed only inside embedded product screenshots. Inter Variable at optical weights: hero 64px/510 with -1.408px tracking, LEFT-aligned; section chapters 48px/510 at -1.056px; closing display 72px/510 centered; card titles 20px/590; body 16/24 400. Signature two-tone display: lead clause white, remainder gray, same block. CTAs are pills: near-white #e5e5e6 (text #08090a, h32 nav / h44 hero, layered stack-low shadow) and dark rgba(255,255,255,.05) secondary. Product UI floats in #0f1011 frames with 5%-white hairlines on metallic silver pedestal gradients fading into vignette. Chapters numbered with gray #62666d numerals + white label + →. White full-brightness logo wall. Nav h73, fixed, blur(20px) glass. Motion CSS-native, 100–160ms ease-out-quad, staggered entrances. Feels: cinematic, engineered, quietly premium. Avoid: centered hero, bold display weights, indigo in chrome, dimmed logos, border-based section dividers, springy motion.
</linear-marketing_design_language>