A near-black code-review surface that reads like the inside of its own product: the whole page lives on a tight Tailwind neutral ladder (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. One text family, Matter, capped at weight 500 (60px display at -1.5px tracking, hierarchy from size not weight), with DM Mono carrying 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.
Browse Graphite 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: 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.
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.
| 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) |
| 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.
matterFont (Matter) — a neo-grotesque, capped at weight 500dmMono (DM Mono) — code, PR identifiers, keycaps--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).
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.