# Graphite — Marketing Site Design Spec

> Source: graphite.com (redirected from graphite.dev) — live DOM, computed styles (Tailwind v4 token layer), 2026-07-23 (desktop 1400px).
> Coverage: marketing home (nav, hero, product mockups). Dashboard: `needs-dashboard` (login required). Hero animation is deferred/canvas-driven and rendered only partially at capture; product UI described from the token set + queue notes. Responsive: not deeply captured.

## 1. Visual Theme & Atmosphere

A near-black, engineered developer surface for "code review in the age of AI." The whole page lives on a tight Tailwind neutral ladder (`#0a0a0a` → `#171717` → `#262626`) with white type, and separation is drawn with `rgba(255,255,255,.1)` hairlines and a faint dot-grid rather than fills — so it reads like the inside of the product itself. Chrome is strictly monochrome; the only saturated colour is a rationed **category system** (teal, blue, orange, pink) confined to PR labels, stacked-diff markers and product artwork, plus one pink-red `#ff5487` brand accent. One text family — Matter, capped at weight 500 — keeps everything precise, with DM Mono carrying code, PR identifiers and keycaps. Nothing is decorative beyond the dot-grid and a couple of soft teal-tinted glows. Feels: dark, precise, technical, product-forward.

## 2. Color Palette & Roles

### Neutrals (dark ladder — Tailwind zinc/neutral)
| Token | Hex | Role / usage |
|---|---|---|
| background | `#0a0a0a` | Page canvas |
| card / popover / sidebar | `#171717` | Raised panels, product surfaces |
| muted / accent / secondary | `#262626` | Insets, hover fills, Log-in button |
| neutral-700 | `#404040` | Stronger dividers / raised chips |
| ring | `#737373` | Focus ring, disabled |
| primary | `#e5e5e5` | Light "Sign up" button fill |
| foreground | `#fafafa` | Primary text, headings |
| border | `rgba(255,255,255,.1)` | Hairlines (primary structural device) |

### Accent & category system
| Token | Hex | Role / usage |
|---|---|---|
| red (brand) | `#ff5487` | Pink-red accent, highlights, diff/delete |
| dark-purple | `#39036f` | Deep purple wash / glow |
| terminal-highlight | `#d4b1ff` | Lavender terminal / prompt highlight |
| category-teal | `#30ead5` | PR label / stacked-branch marker |
| category-blue | `#73a8ff` | PR label / category |
| category-orange | `#ff8632` | PR label / category |
| category-pink | `#ffb7c7` | PR label / category |
| red-code-highlight | `#ffebeb` | Diff highlight background |

Rule: chrome stays monochrome; category colours appear only on PR labels, stacked-diff markers and product artwork — never on chrome buttons, nav or borders.

## 3. Typography Rules

- Display + body: `matterFont` (Matter) — a neo-grotesque, capped at weight 500
- Mono: `dmMono` (DM Mono) — code, PR identifiers, keycaps
- System fallback: `--font-system` (-apple-system stack)

| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Display (h1) | matterFont | 60 / 60 | 500 | -1.5px (-2.5%) |
| Sub-headline | matterFont | 18 / 24 | 500 | normal |
| Section head | matterFont | ~32-40 | 500 | slight negative |
| Body | matterFont | 16 / 24 | 400-500 | normal |
| Button / UI | matterFont | 14 / 20 | 500 | normal |
| Nav | matterFont | ~14-15 | 500 | normal, muted gray |
| Mono / code / keycap | dmMono | 12-14 | 400-500 | normal |

Patterns: weight tops out at 500 — hierarchy from size + tight negative tracking on the display line only. Mono is a first-class voice (code, PR ids, the "G" keyboard-shortcut keycap).

## 4. Component Stylings

### Buttons
- **Primary ("Sign up")**: bg `#e5e5e5`, text `#171717`, radius `8px`, h `42px`, Matter 14/500, padding `8px 16px`, trailing arrow.
- **Secondary ("Log in")**: bg `#262626`, text `#fafafa`, 1px `#262626` border, radius `8px`, h `42px`, with an inset DM Mono "G" keycap chip (keyboard shortcut).
- Hover: subtle fill/opacity shift over 0.3s.

### Inputs
- Dark fill on the `#171717`/`#262626` ladder, `rgba(255,255,255,.1)` border, radius 8px. Focus: `#737373` ring. (Marketing uses few inputs.)

### Cards / panels
- bg `#171717`, `rgba(255,255,255,.1)` border, radii 10-12px (up to 20px, and a 32px `--radius-4xl` on large surfaces). Product mockups float on soft shadows.

### Nav
- Floating rounded bar (radius ~12-16px) over the dot-grid: circular Graphite mark + wordmark left, muted Matter links (Features, Resources, Customers, Docs, Pricing, Contact) center, Log-in + Sign-up right. Top announcement strip ("Cursor Cloud Agents are now in Graphite").

### PR / stacked-diff component (signature)
- Product surfaces render stacked pull-requests and diffs: DM Mono PR identifiers, category-coloured labels (teal/blue/orange/pink), red/green diff markers, all on the `#171717` panel ladder with hairline separators.

## 5. Layout Principles

- Centered container (`--container-md`); hero is centered on the dot-grid field.
- Hero anatomy: floating nav → dot-grid background → 60px Matter headline ("The next generation of code review") → 18px sub → CTA pair → floating stacked-PR product mockup.
- Spacing on a 4px grid; generous vertical section rhythm; hairline `rgba(255,255,255,.1)` dividers.

## 6. Depth & Elevation

- Radius scale: `4px`, `8px` (controls), `10px` (most common), `12px`, `20px`, `32px` (`--radius-4xl` = 2rem), plus full pill (`9999px`) for badges.
- Control heights: buttons 42px.
- Shadows: a base `rgba(0,0,0,.25) 0 4px 4px`, a deeper `rgba(0,0,0,.3) 0 8px 10px` under floating product panels, the Tailwind default stack, and a signature **teal-tinted inset glow** `rgba(101,129,128,.15) 0 0 2px 2px inset, rgba(32,47,46,.15) 0 0 4px 4px inset`. Structure is mostly hairlines + the dot-grid.

## 7. Motion

- Micro-transitions: `0.3s cubic-bezier(.4,0,.2,1)` on color/background/border, a slower `0.5s cubic-bezier(.4,0,.2,1)` for larger moves.
- Named chained keyframe tokens observed (`--animation-chained-translate-50-right-to-left-opacity-1`, `--animation-translate-up-subtle`) drive staggered entrance/scroll reveals of the hero and product panels.
- The hero product mockup is animated/canvas-driven (deferred load).

## 8. Backgrounds, Effects & WebGL

- Near-black flat canvas with a faint **dot-grid** field behind the hero (the signature atmosphere).
- Soft glows: a teal-tinted inset glow on cards; deep `--dark-purple #39036f` and lavender `#d4b1ff` washes reserved for terminal/prompt product moments.
- No gradients on chrome; depth is hairlines + dot-grid + soft shadows. Hero carries a deferred animated/canvas product render.

## 9. Do's and Don'ts

### Do
- Build on the near-black neutral ladder `#0a0a0a` / `#171717` / `#262626` with `#fafafa` white type.
- Separate with `rgba(255,255,255,.1)` hairlines and the dot-grid, not fills.
- Keep chrome monochrome; use category colours (teal `#30ead5`, blue `#73a8ff`, orange `#ff8632`, pink `#ffb7c7`) only on PR labels, diff markers and product art.
- Use Matter capped at weight 500 with tight -2.5% tracking on the display line; DM Mono for code, PR ids and keycaps.
- Keep controls 42px at radius 8px; light `#e5e5e5` primary vs `#262626` secondary with a mono keycap.

### Don't
- Don't colour buttons, nav or borders with the category palette or the `#ff5487` accent.
- Don't use weight 600+ — Matter tops out at 500.
- Don't replace hairlines/dot-grid with heavy shadows; shadows stay soft and, where tinted, teal.
- Don't switch the canvas to light — the marketing surface is near-black.

## 10. Responsive Behavior

- Floating nav collapses; centered hero and product mockups reflow to a single column. Not deeply captured — desktop 1400px only.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#0a0a0a` · Card `#171717` · Inset `#262626` · Text `#fafafa` · Border `rgba(255,255,255,.1)` · Accent `#ff5487`
- Fonts: Matter (display+body, weight 500), DM Mono (code/keycap) · Body 16px · Radius 8px control / 10-12px card · Control height 42px
- Focus: `#737373` ring · Primary button `#e5e5e5`/`#171717` · Secondary `#262626`/`#fafafa` + mono "G" keycap

<graphite_design_language>
Use the Graphite design language: a near-black developer surface (canvas #0a0a0a, cards #171717, insets #262626) with white #fafafa type, where separation is drawn with rgba(255,255,255,.1) hairlines and a faint dot-grid field rather than fills — the page reads like the inside of the product. One text family, Matter, capped at weight 500 (60px display at -1.5px tracking, hierarchy from size not weight), with DM Mono for all code, PR identifiers and keyboard keycaps. Chrome is strictly monochrome; the only saturated colour is a rationed CATEGORY system (teal #30ead5, blue #73a8ff, orange #ff8632, pink #ffb7c7) confined to PR labels, stacked-diff markers and product artwork, plus one pink-red #ff5487 brand accent and lavender #d4b1ff / deep purple #39036f for terminal moments. Controls are 42px at radius 8px: a light #e5e5e5 primary vs a #262626 secondary carrying an inset mono "G" keycap. Radii 4/8/10/12/20/32px; shadows soft (rgba(0,0,0,.25) 0 4px 4px) with a signature teal-tinted inset glow; motion 0.3-0.5s cubic-bezier(.4,0,.2,1) with staggered entrance reveals. The signature surface is stacked pull-requests and diffs. Feels: dark, precise, technical, product-forward. Avoid: colouring chrome with the category palette or #ff5487, weights above 500, light backgrounds, and heavy drop shadows in place of hairlines and the dot-grid.
</graphite_design_language>