Gitbook

# Gitbook — Style Reference
> Architectural blueprint on bright white

**Theme:** light

**Site:** https://www.gitbook.com

GitBook employs a crisp, structured aesthetic with a focus on product documentation. The visual system features abundant negative space, subtle surface differentiation, and a single vibrant orange accent color. Typography is precise and highly tracked, guiding the eye through dense information without visual clutter. Components favor soft curves and gentle elevation, projecting an approachable yet authoritative tone through careful restraint rather than overt decoration.

## Tokens — Colors

| Name | Value | Token | Role |
|------|------|------|------|
| Sunset Orange | `#fe551b` | `--color-sunset-orange` | Decorative accents, illustrative elements, subtle background washes for differentiation |
| Canvas | `#ffffff` | `--color-canvas` | Page backgrounds, primary card surfaces, active input backgrounds |
| Ink | `#1c1917` | `--color-ink` | Primary headings, active button backgrounds, dark text accents |
| Ash | `#57534d` | `--color-ash` | Body text, secondary text, border for muted elements |
| Stone | `#79716b` | `--color-stone` | Muted body text, secondary icons, subtle borders |
| Parchment | `#fafaf9` | `--color-parchment` | Secondary card backgrounds, slightly elevated surfaces |
| Whisper Gray | `#efeeed` | `--color-whisper-gray` | Subtle surface accents, very light card backgrounds, hover states |
| Outline Gray | `#e5e5e5` | `--color-outline-gray` | Subtle button and input borders |
| Obsidian | `#000000` | `--color-obsidian` | Hero headlines, critical UI text, dark icon fills |

## Tokens — Typography

### sans-serif
- **Weights:** 400
- **Sizes:** 12px, 16px
- **Line height:** 1.2
- **Role:** sans-serif — detected in extracted data but not described by AI

### General Sans Variable
- **Substitute:** system-ui, sans-serif
- **Weights:** 700
- **Sizes:** 12px, 14px, 16px, 20px, 24px, 30px, 32px, 38px, 45px, 55px
- **Line height:** 1, 1.2, 1.3, 1.4, 1.5, 1.6
- **Letter spacing:** -0.0400em at 55px, -0.0300em at 45px, -0.0200em at 38px, 0.0100em at 12px
- **Role:** Hero headlines and major section titles, where impactful, tightly tracked text announces key sections. The variable bold weight provides visual strength.

### Inter
- **Substitute:** system-ui, sans-serif
- **Weights:** 400, 500, 600
- **Sizes:** 10px, 11px, 12px, 14px, 15px, 16px, 20px
- **Line height:** 1.08, 1.18, 1.2, 1.3, 1.4, 1.6
- **Letter spacing:** -0.0300em at 20px, -0.0100em at 10px
- **Role:** Body text, subheadings, and UI labels. Its range of weights allows for hierarchy within text blocks while maintaining a consistent visual voice.

### General Sans
- **Substitute:** system-ui, sans-serif
- **Weights:** 500
- **Sizes:** 18px
- **Line height:** 1.6
- **Letter spacing:** -0.0100em
- **Role:** Stand-alone body text components and feature descriptions. A specific weight and size choice for narrative blocks.

### Geist Mono
- **Substitute:** Space Mono
- **Weights:** 600
- **Sizes:** 10px, 14px
- **Line height:** 1, 1.3
- **Letter spacing:** -0.0200em
- **Role:** Code snippets, technical terms, and small, functional labels requiring clear separation from general text.

### General Sans Variable Variable Bold
- **Weights:** 700
- **Sizes:** 12px, 14px, 16px, 20px, 24px, 30px, 32px, 38px, 45px, 55px
- **Line height:** 1, 1.2, 1.3, 1.4, 1.5, 1.6
- **Letter spacing:** -0.04, -0.03, -0.02, 0.01
- **Role:** General Sans Variable Variable Bold — detected in extracted data but not described by AI

### Space Mono
- **Weights:** 400
- **Sizes:** 8px
- **Line height:** 1.3
- **Role:** Space Mono — detected in extracted data but not described by AI

## Tokens — Type Scale

Augmented Fourth (1.414) from 16px base.

| Role | Size | Line height | Letter spacing |
|------|------|------|------|
| caption | 10px | 1.18 | -0.1px |
| body | 16px | 1.4 | -0.16px |
| subheading | 18px | 1.6 | -0.18px |
| heading | 32px | 1.3 | -0.64px |
| heading-lg | 45px | 1.4 | -1.35px |
| display | 55px | 1 | -2.2px |

## Tokens — Spacing

- **Section gap:** 40px
- **Card padding:** 12px
- **Element gap:** 10px

## Tokens — Radius

- **Default:** 8px
- **Buttons:** 99px
- **Cards:** 16px
- **full:** 9999px
- **tags:** 4px

## Tokens — Elevation

- **Card:** `rgba(0, 0, 0, 0.15) 0px 4px 12px 0px`
- **Subtle UI Elements:** `rgba(0, 0, 0, 0.25) 0px 1px 2px 0px`
- **Button:** `rgba(0, 0, 0, 0.05) 0px 1px 3px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px -1px`

## Components

### Primary Filled Button
*Call to action*

Filled with Ink (#1c1917) background and Canvas (#ffffff) white text, using 99px border-radius for a pill shape. Padding is 8px vertical, 20px horizontal. Uses Inter font, size 16px, weight 500.

### Ghost Button
*Secondary action*

Transparent background with a subtle fill of rgba(0, 0, 0, 0.04) and Ink (#1c1917) text. Pill-shaped with 99px border-radius. Padding is 10-12px vertical, 14px horizontal.

### Text Link Button
*Tertiary action, inline link*

Canvas (#ffffff) background with Ink (#1c1917) text, no border-radius (square shape). Padding is 8px vertical, 10px horizontal. Used for compact actions.

### Text Link Button (Transparent)
*Inline navigation, minimal action*

Fully transparent background with Ink (#1c1917) text. Pill-shaped with 99px border-radius. Padding is 10px vertical, 15px horizontal. Used for embedded actions.

### Feature Card (Parchment)
*Informational display*

Parchment (#fafaf9) background, 16px border-radius. No explicit padding or shadow, relying on content for internal spacing.

### Feature Card (Canvas)
*Prominent information display*

Canvas (#ffffff) background, 16px border-radius. No explicit padding or shadow.

### Screenshot Display Card
*Visual content container*

Canvas (#ffffff) background, 8px border-radius, no shadow or padding. Used for containing product screenshots or visual examples.

### Subtle Elevated Card
*Minor elevated content*

Whisper Gray (#efeeed) background with 8px 8px 0px 0px border-radius. No explicit padding or shadow. Used for subtle visual separation.

## Guidelines

### Do

- Prioritize Ink (#1c1917) for primary headings and Canvas (#ffffff) for backgrounds to maintain a clean contrast.
- Use 99px border-radius for all interactive buttons and tags to ensure a consistent pill shape (e.g., 'Start for free').
- Apply General Sans Variable, weight 700 with aggressive negative letter-spacing for all display and large heading text.
- Utilize Parchment (#fafaf9) or Whisper Gray (#efeeed) for secondary card backgrounds, creating subtle layered surfaces.
- Maintain a clear element gap of 10px for vertical stacking of UI elements and 8px for smaller interactive elements.
- Ensure textual contrast: Ink (#1c1917) on Canvas (#ffffff) surfaces, and Canvas (#ffffff) text on Ink (#1c1917) button backgrounds.
- Reserve Sunset Orange (#fe551b) primarily for decorative accents, illustrations, or as a background wash to avoid competition with functional UI.

### Don't

- Avoid using Sunset Orange (#fe551b) for primary calls to action or essential text; its role is decorative accent, not functional interface element.
- Do not introduce heavy drop shadows; prefer subtle 1px shadows or no shadows to maintain the light, modern aesthetic.
- Refrain from using strong, saturated colors beyond Sunset Orange; the palette is intentionally restrained to highlight content.
- Do not deviate from the specified General Sans, Inter, Geist Mono, and system sans-serif fonts; no additional typefaces should be introduced.
- Avoid tight spacing for body text; ensure adequate line-height and letter-spacing are respected to preserve readability.
- Do not apply rounded corners to full-bleed sections or backgrounds; surfaces should adhere to the specified radii of 8px, 16px, or 99px for components.
- Do not use black #000000 for body text; reserve it for large, impactful headlines where maximum contrast is desired.

## Agent Prompt Guide

Quick Color Reference: 
text: #1c1917
background: #ffffff
border: #e5e5e5
accent: #fe551b
primary action: #1c1917 (filled action)

Example Component Prompts:
1. Create a Primary Action Button: #1c1917 background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA.
2. Design a feature card: Parchment (#fafaf9) background, 16px border-radius, elementGap 10px internally. Include a bold subheading "GitBook Agent" using Inter weight 600 at 20px, and body text below it with Inter weight 400 at 16px, color Ash (#57534d). 
3. Create a ghost button for navigation: transparent background, Ink (#1c1917) text, 99px border-radius, 10px vertical padding, 15px horizontal padding. The text should be Inter weight 500 at 16px.
4. Design a small decorative info label: Sunset Orange (#fe551b) background, Canvas (#ffffff) text, 4px border-radius, using Inter weight 600 at 12px, 6px horizontal padding.