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

# GitBook · Design System

> Quiet documentation, brought to life with orange signals.

**Theme:** light · **Industry:** devtools · **Source:** https://www.gitbook.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._

GitBook pairs a bright, restrained canvas with crisp product storytelling and vivid orange accents. Product interface previews, customer proof, and generous whitespace make a complex developer platform feel approachable.

## North star

Keep the page bright and editorial, using orange sparingly to point toward meaningful product actions and insights.

## Overview

The page is built on a white canvas, with warm off-white bands and cards adding quiet separation rather than heavy blocks of colour. Near-black headlines and body text carry the hierarchy; muted warm grays soften supporting copy, while vivid orange marks selected phrases, badges, and product accents. General Sans gives large headings a compact, confident presence, with tight tracking and short lines; supporting interface details use restrained sans-serif styling. The centered hero gives way to a wide product preview, then alternating feature explanations, diagrams, customer stories, and enterprise content. Layouts stay airy and carefully aligned despite a substantial amount of content. Product screenshots and custom diagrams provide the visual texture: pale panels and fine outlines are punctuated by orange ribbons and highlights. Rounded buttons, cards, and media frames keep the technical subject matter approachable. Shadows are selective, mainly lifting product mockups and cards from the otherwise flat page.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas, cards, and the light base behind the product preview. |
| Warm Porcelain | `#fafaf9` | `--color-warm-porcelain` | surface | Soft section and card surfaces that distinguish content without strong contrast. |
| Soft Charcoal | `#1c1917` | `--color-soft-charcoal` | neutral | Headlines, primary body text, and dark filled primary call-to-action buttons. |
| Warm Graphite | `#57534d` | `--color-warm-graphite` | neutral | Supporting paragraphs and secondary text beneath headings. |
| Peach Hairline | `#ffccba` | `--color-peach-hairline` | semantic | Warm fine outlines and subtle borders around pale surfaces. |
| Taupe Copy | `#79716b` | `--color-taupe-copy` | neutral | Lower-emphasis supporting copy and secondary information. |
| Blush Tint | `#fff2ef` | `--color-blush-tint` | surface | Subtle warm gradient tint and pale button or product-interface backing. |
| Mist Panel | `#f2f1f1` | `--color-mist-panel` | surface | Quiet card and interface panels, including embedded product UI surfaces. |
| Muted Bark | `#786b67` | `--color-muted-bark` | neutral | Occasional subdued supporting text; not a primary brand-defining colour. |
| Soft Stone | `#948d89` | `--color-soft-stone` | neutral | Low-emphasis text within dense interface and supporting content. |
| Pale Divider | `#e5e5e5` | `--color-pale-divider` | semantic | Subtle control or button borders, rather than prominent page dividers. |
| Signal Orange | `#fe551b` | `--color-signal-orange` | accent | Highlighted headline phrase, announcement marker, product accents, and selected interface states. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#fafaf9` (Warm Porcelain) · `--color-surface-2` → `#f2f1f1` (Mist Panel) · `--color-text` → `#1c1917` (Soft Charcoal) · `--color-text-muted` → `#57534d` (Warm Graphite) · `--color-text-subtle` → `#79716b` (Taupe Copy) · `--color-border` → `#ffccba` (Peach Hairline) · `--color-accent` → `#fe551b` (Signal Orange)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1c1917` | `#ffffff` | 17.49:1 | AAA |
| `#1c1917` | `#fafaf9` | 16.74:1 | AAA |
| `#1c1917` | `#f2f1f1` | 15.51:1 | AAA |
| `#57534d` | `#ffffff` | 7.64:1 | AAA |
| `#57534d` | `#fafaf9` | 7.31:1 | AAA |
| `#57534d` | `#f2f1f1` | 6.77:1 | AA |
| `#79716b` | `#ffffff` | 4.79:1 | AA |
| `#79716b` | `#fafaf9` | 4.58:1 | AA |
| `#79716b` | `#f2f1f1` | 4.25:1 | AA-large |
| `#fe551b` | `#ffffff` | 3.22:1 | AA-large |

### Gradients

- `linear-gradient(200deg, rgb(255, 255, 255) 65%, rgb(255, 242, 239) 100%)`
- `linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.72) 55%, rgba(255, 255, 255, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| General Sans Variable Variable Bold | `--font-body` | webfont | 700 | Headings and prominent page copy | Inter |
| Inter | `--font-inter` | webfont | 400, 500, 600 | Button labels and selected interface copy | Inter |
| General Sans | `--font-general-sans` | webfont | 500 | Supporting page and product text | Inter |
| Geist Mono | `--font-mono` | webfont | 600 | Compact code-like labels | Roboto Mono |

- **General Sans Variable Variable Bold:** Measured at weight 700; compact headlines use tight negative tracking and natural sentence case.
- **Inter:** Measured at regular weight for controls; keep labels concise and sentence case.
- **General Sans:** Measured at weight 500; use as a restrained companion to the bold heading face.
- **Geist Mono:** Measured at weight 600; tiny uppercase labels use slight positive tracking.

### Type scale — Perfect Fourth (ratio ≈ 1.295, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 45px | 700 | 1 | -0.02em | — | General Sans Variable Variable Bold | Centered hero headline with an orange-highlighted closing phrase. |
| h2 | 38px | 700 | 1 | -0.02em | — | General Sans Variable Variable Bold | Major feature, customer, and enterprise section headings. |
| h3 | 32px | 700 | 1.2 | -0.02em | — | General Sans Variable Variable Bold | Feature titles and prominent supporting statements. |
| h4 | 24px | 700 | 1.2 | -0.02em | — | General Sans Variable Variable Bold | Smaller content-group headings and card titles. |
| body | 16px | 700 | 1.5 | 0 | — | General Sans Variable Variable Bold | Feature descriptions, explanatory copy, and customer-story text. |
| caption | 14px | 700 | 1.6 | 0 | — | General Sans Variable Variable Bold | Short supporting notes, metadata, and compact labels. |
| button | 13px | 400 | normal | 0 | — | Inter | Primary and secondary action labels. |
| link | 14px | 700 | 1.6 | 0 | — | General Sans Variable Variable Bold | Navigation, inline actions, and footer links. |
| code | 12px | 600 | 1 | 0.02em | uppercase | Geist Mono | Compact uppercase technical or category labels. |

OpenType features in use: `"blwf", "cv03", "cv04", "cv09", "cv11"`.

## Spacing & layout

- Base unit **2px**, density **compact**.
- Scale (most used values): 1, 4, 6, 8, 10, 12, 14, 15, 16, 20, 24, 40 px.
- Section rhythm 40px · element gap 10px · card padding 6px · max content width 1160px.

The measured content max width is 1160px, with a compact underlying spacing scale and a 40px section gap. The first viewport centers a narrow hero beneath a restrained horizontal navigation, then opens into a broad logo row and oversized product mockup. Lower sections alternate text and media, use centered headings for major transitions, and switch to multi-column feature and footer arrangements. Preserve generous visual whitespace between content groups even where the underlying component spacing is compact.

## Shape & elevation

- Radius: button `9999px` · card `16px` · media `8px` · badge `9999px` · link `9999px` · xs `4px` · sm `8px` · md `10px` · lg `12px` · xl `16px` · pill `9999px`
- Shadow `hairline` (other): `rgba(0, 0, 0, 0.25) 0px 1px 2px 0px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.15) 0px 4px 12px 0px`
- Shadow `sm` (other): `rgba(0, 0, 0, 0.05) 0px 1px 5px 0px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0.08) 0px 3.22px 96.7571px 0px`
- Shadow `lg` (other): `rgba(0, 0, 0, 0.15) 0px 2.79px 29.5274px 0px`
- Shadow `sm-2` (button): `rgba(0, 0, 0, 0.05) 0px 1px 3px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px -1px`
- Motion: standard transition `0.2s ease` on interactive elements.

Most sections remain flat against white or warm off-white surfaces. Use the measured 16px card radius and 8px media radius; reserve soft shadows for product mockups and selected cards. Warm hairline borders define delicate edges, while buttons use rounded pill silhouettes without heavy visual framing.

## Imagery

Product UI previews and custom diagrams lead the visual narrative; they are framed as pale, rounded interface windows rather than full-bleed photography. Customer portraits appear within testimonial content, while enterprise illustrations use orange ribbons and small technical symbols. Treat screenshot details as product content, not as a source of extra brand colours; keep imagery crisp and let orange highlights provide contrast.

## Components

### Pill action

Primary actions use a near-black fill, white label, and pill shape; secondary actions sit on pale neutral surfaces.

### Hero announcement

A small rounded notice sits above the centered hero, with an orange status marker and understated supporting text.

### Product preview

Large, rounded documentation UI mockup combines a pale frame, compact navigation, content pane, and assistant panel.

### Feature split

Pair concise text and supporting diagrams or UI imagery in alternating two-column feature rows.

### Customer story

Set a short quotation beside a customer portrait or logo, with compact attribution and a small dark action.

### Logo rail

Present customer marks in a spacious horizontal row, generally monochrome and subordinate to the main content.

### Measured component styles

- **Primary button** (“Start for free”): background #1c1917 · text #0000ee · radius 99px · padding 10px 14px 12px 14px · 400 12px sans-serif
- **Secondary button** (“What is GitBook Assistant?”): background #fff6f3 · text #1c1917 · radius 8px · padding 12px 16px · 400 13px Inter
- **Link** (“Pricing”): transparent background · text #0000ee · radius 16px · padding 0px · 400 12px sans-serif
- **Card** (“Search… Ctrl K Ask Sign in Product API H”): background #f2f1f1 · text #000000 · radius 16px · padding 0px 8px 8px 8px · 400 12px sans-serif · shadow rgba(0, 0, 0, 0.15) 0px 4px 12px 0px
- **Badge** (“AI”): background #b1b1b1 · text #ffffff · radius 999px · padding 0.8px 3.5px 1.7px 3.5px · 600 10px sans-serif
- **Navigation item**: transparent background · text #656973 · radius 0px · padding 0px · 400 12px sans-serif

## Do

- Use white as the dominant page canvas.
- Reserve Signal Orange for selected highlights and product cues.
- Set major headings in bold General Sans or a close substitute.
- Keep the hero centered and product previews visually prominent.
- Use warm pale surfaces to separate cards without heavy bands.
- Apply rounded pills to primary actions and badges.

## Don't

- Do not turn the page into a dark theme.
- Do not use orange as a full-page background.
- Do not crowd the hero with extra copy or controls.
- Do not add strong borders to every card.
- Do not treat colours inside illustrations as the core brand palette.
- Do not replace product-focused visuals with generic stock imagery.

## Agent prompt

Build a new page in GitBook’s restrained developer-platform style. Use Gallery White (#ffffff) as the main canvas, Warm Porcelain (#fafaf9) and Mist Panel (#f2f1f1) for quiet surface changes, and Soft Charcoal (#1c1917) for headings and dark pill actions. Apply Signal Orange (#fe551b) selectively to a key phrase, status marker, or meaningful product state; keep Peach Hairline (#ffccba) subtle. Use bold, tightly tracked General Sans-style headings with calm warm-gray supporting copy. Center the opening message, then make room for a convincing documentation or AI product preview. Organize the remaining content into alternating text-and-visual rows, customer proof, and a clear final action. Use rounded media and cards, generous visual breathing room, and restrained shadows. Keep interface details crisp and avoid decorative clutter.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | testimonials | Two-column testimonial block on a white canvas, with customer imagery alongside a short quotation. | customer proof, attributed quotation | portrait or logo, compact story link, open whitespace |
| 2 | cta | Broad closing content area followed by a dense multi-column footer with supporting links and editorial cards. | final conversion prompt, grouped site navigation, related content links | centered CTA, dark pill action, multi-column footer |

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