---
title: "Graphite design system"
variant: extended
source: https://graphite.com/
captured_at: 2026-10-12
theme: dark
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/graphite-dev)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Graphite · Design System

> Quiet darkness, precise tools, luminous code.

**Theme:** dark · **Industry:** devtools · **Source:** https://graphite.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Graphite pairs a near-black canvas with restrained typography and luminous product imagery to present code review as a focused, modern workflow. Compact navigation, clear calls to action, customer proof, and product-interface panels structure the long page without breaking its dark visual continuity.

## North star

Keep the page almost entirely near-black, and let crisp type and carefully framed product UI provide the contrast.

## Overview

The page is anchored by a nearly black canvas (#0a0a0a), carried continuously through the hero, feature sections, and footer. Near-white headings and muted gray copy establish a clear hierarchy without introducing bright section bands. The restrained orange and amber accents appear as small link details and decorative border treatments, while vivid blue and other saturated colors are peripheral or confined to footer artwork rather than defining the core interface. Matter sans-serif typography keeps the presentation contemporary and compact: a large, tightly tracked hero headline contrasts with readable body copy and smaller navigation labels. A centered content frame organizes the page into broad, quiet sections, with split layouts and bordered product panels adding structure. Product UI imagery, customer marks, and a luminous abstract outline provide visual interest against the dark field. Spacing gives the hero and feature blocks room to breathe, while cards remain dense enough to show real workflow details.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Graphite Black | `#0a0a0a` | `--color-graphite-black` | brand | Continuous page canvas behind navigation, hero, feature sections, and footer. |
| Quiet Gray | `#a1a1a1` | `--color-quiet-gray` | neutral | Muted navigation labels, supporting copy, and footer text. |
| Soft White | `#fafafa` | `--color-soft-white` | neutral | Primary headings, body text, and high-contrast labels on dark surfaces. |
| Pale Ash | `#bebebe` | `--color-pale-ash` | neutral | Secondary muted copy where text needs more contrast than subdued gray. |
| Signal Orange | `#ff8833` | `--color-signal-orange` | accent | Sparse link accent; not a dominant background or primary button color. |
| Amber Trace | `#ffb931` | `--color-amber-trace` | accent | Accent border and decorative gradient details, including subtle CTA edging. |
| Panel Charcoal | `#171717` | `--color-panel-charcoal` | surface | Raised dark cards, button surfaces, and product UI panels. |
| Electric Blue | `#1061ff` | `--color-electric-blue` | semantic | Secondary saturated accent, mainly visible in decorative/footer artwork. |
| Shadow Black | `#111111` | `--color-shadow-black` | surface | Near-black gradient stop and subtle tonal variation within dark visuals. |
| Graphite Edge | `#262626` | `--color-graphite-edge` | surface | Dark button fills, card details, and understated outlines against the canvas. |
| Slate Gray | `#858585` | `--color-slate-gray` | neutral | Occasional subdued text and tonal detail, not a primary brand surface. |
| Coral Ember | `#ff6231` | `--color-coral-ember` | semantic | Saturated color appearing within decorative footer artwork, not core interface UI. |
| Cyan Flash | `#14c7ff` | `--color-cyan-flash` | semantic | Bright blue-cyan detail confined to decorative/footer artwork. |
| Card Border | `#2b2b2b` | `--color-card-border` | surface | Thin outlines around dark customer and product cards. |
| Iron Line | `#404040` | `--color-iron-line` | surface | Subtle borders on secondary dark buttons and interface elements. |
| Button Light | `#e5e5e5` | `--color-button-light` | neutral | Light primary CTA surface with dark label text. |

### Semantic aliases

`--color-canvas` → `#0a0a0a` (Graphite Black) · `--color-surface` → `#171717` (Panel Charcoal) · `--color-text` → `#fafafa` (Soft White) · `--color-text-muted` → `#a1a1a1` (Quiet Gray) · `--color-text-subtle` → `#bebebe` (Pale Ash) · `--color-border` → `#ffb931` (Amber Trace) · `--color-accent` → `#ff8833` (Signal Orange) · `--color-accent-2` → `#ffb931` (Amber Trace) · `--color-accent-3` → `#1061ff` (Electric Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#fafafa` | `#0a0a0a` | 18.97:1 | AAA |
| `#fafafa` | `#171717` | 17.18:1 | AAA |
| `#a1a1a1` | `#0a0a0a` | 7.66:1 | AAA |
| `#a1a1a1` | `#171717` | 6.94:1 | AA |
| `#bebebe` | `#0a0a0a` | 10.65:1 | AAA |
| `#bebebe` | `#171717` | 9.65:1 | AAA |
| `#ff8833` | `#0a0a0a` | 8.32:1 | AAA |
| `#ff8833` | `#171717` | 7.53:1 | AAA |

### Gradients

- `linear-gradient(to top, oklab(0 0 0 / 0.25) 0%, rgba(0, 0, 0, 0) 50%, oklab(0 0 0 / 0.25) 100%)`
- `conic-gradient(rgba(255, 255, 255, 0.5) 0deg, rgba(255, 255, 255, 0) 60deg, rgba(255, 255, 255, 0) 310deg, rgba(255, 255, 255, 0.5) 360deg)`
- `linear-gradient(270deg, rgb(255, 185, 49) 5%, rgb(255, 255, 255) 30%, rgb(255, 255, 255) 60%, rgb(46, 115, 252) 95%)`
- `conic-gradient(from -100deg, rgba(0, 0, 0, 0) 0deg, rgba(255, 255, 255, 0.7) 30deg, rgba(255, 255, 255, 0.7) 170deg, rgba(0, 0, 0, 0) 200deg)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| matterFont | `--font-body` | webfont | 400, 500, 600, 700 | Site-wide interface type, including display headings, body text, navigation, links, and buttons. | Inter |

- **matterFont:** Use clean sans-serif forms; display text is medium-weight with tight negative tracking, while navigation and controls stay compact and untransformed.

### Type scale — Augmented Fourth (ratio ≈ 1.392, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 500 | 1 | -0.025em | — | matterFont | Hero headline and prominent display messaging. |
| h1 | 36px | 500 | 1.11 | 0 | — | matterFont | Primary section and page-level headings. |
| h2 | 24px | 600 | 1.17 | 0 | — | matterFont | Feature and content section headings. |
| h3 | 20px | 500 | 1.4 | 0 | — | matterFont | Card titles and smaller feature headings. |
| body | 16px | 400 | 1.5 | 0 | — | matterFont | Paragraphs, product explanations, and supporting content. |
| caption | 14px | 500 | 1.43 | 0 | — | matterFont | Small supporting notes and compact metadata. |
| button | 14px | 500 | 1.43 | 0 | — | matterFont | Primary and secondary call-to-action labels. |
| nav | 14px | 500 | 1.43 | 0 | — | matterFont | Header navigation items and compact menu labels. |
| link | 16px | 400 | 1.25 | 0 | — | matterFont | Inline actions and text links within feature content. |

OpenType features in use: `"clig" 0, "liga" 0`.

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 1, 2, 3, 4, 8, 12, 14, 16, 24, 32, 48, 50 px.
- Section rhythm 32px · element gap 8px · card padding — · max content width 1120px.

Use a centered content frame with a measured maximum width of 1120px. The hero begins with a left-aligned text-and-CTA column balanced by a large visual on the right, followed by a wide product video and customer cards. Lower sections alternate between split feature layouts and centered introductions, then finish with multi-column footer links. The measured grid uses 12 columns for the opening section and narrower column structures below. Keep spacing compact between related controls, but allow generous breathing room between major content blocks.

## Shape & elevation

- Radius: button `8px` · card `8px` · media `10px` · nav `8px` · link `9999px` · xs `4px` · sm `6px` · md `8px` · lg `10px` · xl `11px` · 2xl `12px` · pill `9999px`
- Shadow `sm` (other): `rgba(0, 0, 0, 0.25) 0px 4px 4px 0px`
- Shadow `inset` (card): `rgba(101, 129, 128, 0.15) 0px 0px 2px 2px inset, rgba(32, 47, 46, 0.15) 0px 0px 4px 4px inset`
- Shadow `sm-2` (button, text): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2`
- Shadow `md` (other, media): `rgba(0, 0, 0, 0.3) 0px 8px 10px 0px`
- Shadow `inset-2` (button): `rgb(255, 255, 255) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.1) 0px -2px 6px 0px inset`
- Shadow `sm-3` (card): `rgb(0, 0, 0) 0px 0px 8px 8px`
- Motion: standard transition `0.5s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat: the near-black canvas does the visual work, while thin dark borders separate cards and product panels. Use restrained shadows to lift media or controls without creating bright halos. Layer screenshots within bordered panels, and reserve subtle inset treatment for interactive product mockups.

## Imagery

Favor product-interface captures and video framed inside dark, rounded panels with thin charcoal outlines. The hero uses an abstract, luminous white geometric mark rather than photography; customer logos and case-study cards provide supporting proof. Keep imagery low-key, with dark surroundings, restrained contrast, and bright interface details left to the screenshots themselves. Saturated footer colors belong to decorative artwork, not the main palette.

## Components

### Primary CTA

Light #e5e5e5 button with #171717 label, an 8px radius, and compact medium-weight text.

### Secondary CTA

Dark #262626 button with a 1px #404040 outline, #fafafa label, and an 8px radius.

### Navigation

Compact horizontal links over the canvas, mostly #fafafa with secondary items in #a1a1a1.

### Product media panel

Wide product video or screenshot within a dark frame, using a 10px media radius and quiet border treatment.

### Customer story cards

Dark case-study cards with #2b2b2b borders and contrasting customer-brand artwork in the card media.

### Split feature panel

Two-column feature layout pairing concise copy and links with product-interface imagery.

### Footer link columns

Compact groups of product, company, resource, and social links over the continuous dark canvas.

### Measured component styles

- **Primary button** (“Get started for free”): background #e5e5e5 · text #171717 · radius 8px · padding 0px 32px · 500 14px matterFont · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Secondary button** (“Request a demo”): background #262626 · text #fafafa · border 1px solid #404040 · radius 8px · padding 0px 32px · 500 14px matterFont · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Link** (“Read more about our CLI”): transparent background · text #fcfcfc · radius 20px · padding 0px · 400 16px matterFont
- **Card** (“Semgrep × Graphite How stacked PRs help ”): transparent background · text #fafafa · border 1px solid #2b2b2b · radius 8px · padding 0px · 400 16px matterFont · shadow rgba(101, 129, 128, 0.15) 0px 0px 2px 2px inset, rgba(32, 47, 46, 0.15) 0px 0px 
- **Navigation item** (“Features Resources Customers Docs Pricin”): transparent background · text #fafafa · radius 0px · padding 0px · 400 14px matterFont

## Do

- Use #0a0a0a as the dominant canvas.
- Set headings in near-white and supporting text in measured grays.
- Use product UI as the primary visual evidence.
- Keep primary actions light and secondary actions dark.
- Separate cards with thin, low-contrast outlines.
- Reserve vivid accents for small details or artwork.

## Don't

- Do not introduce bright section backgrounds.
- Do not use saturated accents as large interface fills.
- Do not add unmeasured spacing, sizing, or radius values.
- Do not make every card heavily elevated.
- Do not use oversized decorative gradients across the canvas.
- Do not let product mockup colors redefine the brand palette.

## Agent prompt

Build a new page in Graphite’s dark, product-led visual style. Use Graphite Black (#0a0a0a) as the continuous canvas and Soft White (#fafafa) for key headings; reserve Quiet Gray (#a1a1a1) and Pale Ash (#bebebe) for supporting copy. Use Matter or a close sans-serif substitute such as Inter, with compact navigation, clean medium-weight headings, and restrained tracking. Structure content inside a centered frame no wider than the measured 1120px, using split text-and-product layouts, bordered dark panels, and deliberate whitespace between sections. Primary actions use Button Light (#e5e5e5) over Panel Charcoal (#171717) text; secondary actions use Graphite Edge (#262626) with an Iron Line (#404040) outline. Keep Amber Trace (#ffb931) and Signal Orange (#ff8833) sparse. Prefer realistic product UI imagery over decorative art.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Left-aligned hero copy and CTAs beside a luminous geometric mark, followed by wide product video. | Primary and secondary CTA, Trial reassurance, Customer logo proof | Dark canvas, Large display heading, Product media frame, Abstract glowing mark |
| 2 | testimonials | A row of customer story cards with carousel controls beneath. | Customer proof, Case-study links, Previous and next controls | Bordered dark cards, Customer artwork, Compact card captions |
| 3 | feature-split | Two-column feature panels pair product-interface content with a vertically grouped set of feature messages. | Feature switching, Inline learn-more links | Dark product panel, Split columns, Subtle outlines |
| 4 | feature-grid | Centered section heading above a sequence of alternating two-column product feature cards. | Feature discovery, Inline actions, Further-features link | Alternating copy and UI, Dark bordered cards, Centered introduction |
| 5 | integrations | Centered introduction followed by three horizontally organized integration and infrastructure points. | Integration reassurance, Workflow capability overview | Centered heading, Three-column content, Minimal dark layout |
| 6 | footer | Brand mark beside multiple compact link columns, with a narrow status and legal row below. | Grouped site navigation, Status and legal links, Social destinations | Multi-column link lists, Dark canvas, Subtle divider |

## Source CSS custom properties (selected)

```css
--font-matter: 'matterFont', 'matterFont Fallback';
--font-dm-mono: 'dmMono', 'dmMono Fallback';
--font-jet-brains-mono: 'JetBrains Mono', 'JetBrains Mono Fallback';
--font-inter: 'Inter', 'Inter Fallback';
--ease-cubic-in-out: cubic-bezier(.66,0,.34,1);
--animation-gradient-border: gradient-border 3s linear infinite;
--animation-bg-cursor-start-to-end: bg-position-x-0-to-100 .9s/**/forwards;
--animation-bg-linear-to-r: bg-linear-to-r 1.2s/**/linear infinite;
--font-mono: 'dmMono', 'dmMono Fallback';
--color-red-300: lab(76.5514% 36.422 15.5335);
--color-red-400: lab(63.7053% 60.745 31.3109);
--color-red-500: lab(55.4814% 75.0732 48.8528);
--color-red-600: lab(48.4493% 77.4328 61.5452);
--color-red-900: lab(28.5139% 44.5539 29.0463);
--color-orange-300: lab(80.8059% 21.7313 50.4455);
--color-orange-400: lab(70.0429% 42.5156 75.8207);
--color-orange-500: lab(64.272% 57.1788 90.3583);
--color-yellow-300: lab(89.7033% -.480294 84.4917);
--color-yellow-500: lab(76.3898% 14.5258 98.4589);
--color-green-400: lab(78.503% -64.9265 39.7492);
--color-green-500: lab(70.5521% -66.5147 45.8073);
--color-green-900: lab(30.797% -29.6927 17.382);
--color-emerald-300: lab(83.9203% -48.7124 13.8849);
--color-emerald-400: lab(75.0771% -60.7313 19.4147);
--color-emerald-500: lab(66.9756% -58.27 19.5419);
--color-emerald-600: lab(55.0481% -49.9246 15.93);
--color-emerald-700: lab(44.4871% -41.0396 11.0361);
--color-cyan-400: lab(76.6045% -40.9406 -29.6231);
--color-blue-400: lab(65.0361% -1.42065 -56.9802);
--color-blue-500: lab(54.1736% 13.3369 -74.6839);
--color-blue-600: lab(44.0605% 29.0279 -86.0352);
--color-blue-700: lab(36.9089% 35.0961 -85.6872);
--color-blue-800: lab(30.2514% 27.7853 -70.2699);
--color-violet-400: lab(62.8239% 34.9159 -60.0512);
--color-violet-500: lab(49.9355% 55.1776 -81.8963);
--color-purple-300: lab(78.3298% 26.2195 -34.9499);
--color-rose-300: lab(76.6339% 38.3549 9.68835);
--color-rose-400: lab(64.4125% 63.0291 19.2068);
--color-rose-600: lab(49.1882% 81.577 36.0311);
--color-gray-500: lab(47.7841% -.393182 -10.0268);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/graphite-dev