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

# GitButler · Design System

> Editorial typography meets practical developer tooling

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

GitButler pairs a warm neutral canvas and expressive serif headlines with compact, practical product demonstrations. Teal accents, restrained borders, and terminal imagery make the page feel both approachable and unmistakably developer-focused.

## North star

Keep the page warm and editorial, using expressive serif headlines to frame compact, credible developer-tool demonstrations.

## Overview

The page uses a warm off-white canvas (#f3f2f1) as a continuous backdrop, keeping the experience calm while dark ink (#1c1917) gives headlines, navigation, and links strong definition. But Head serif headlines lend the product an editorial character; Inter handles navigation and explanatory copy, while Geist Mono makes code and compact technical labels feel native. Teal (#25b1b1) is reserved for important actions and select emphasis, with pale aqua section panels separating key comparison and closing calls to action. A narrow, centered content column keeps the hero and product demo focused, while later feature grids and testimonial columns widen the information density. Rounded CTA surfaces contrast with thin gray card borders. Terminal screenshots and interface mockups provide the main visual evidence, with a playful illustrated download panel near the footer. Generous breathing room and clear section breaks let the page move from product introduction to proof, features, community, and conversion without feeling crowded.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Ink | `#1c1917` | `--color-soft-ink` | brand | Primary text, headings, navigation, and most links on the light canvas. |
| Warm Canvas | `#f3f2f1` | `--color-warm-canvas` | surface | Dominant page background, continuing behind the hero and most content sections. |
| Stone Line | `#cac6c3` | `--color-stone-line` | neutral | Thin borders around cards and outlined controls; also used in subtle section details. |
| Misty Divider | `#e2dfdd` | `--color-misty-divider` | neutral | Measured button gradient stop; a subtle control treatment rather than a defining page color. |
| Signal Teal | `#25b1b1` | `--color-signal-teal` | accent | Primary login action and prominent teal call-to-action or product emphasis. |
| Pale Aqua | `#d3f3f3` | `--color-pale-aqua` | surface | Soft tinted comparison or feature section background behind content. |
| Muted Taupe | `#7c716a` | `--color-muted-taupe` | neutral | Secondary descriptive copy, footer text, and lower-emphasis links. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Feature card and control surfaces; also appears in text on dark or teal controls. |
| Terminal Charcoal | `#272321` | `--color-terminal-charcoal` | surface | Dark code-card and terminal mockup background, not the main page canvas. |
| Soft Teal | `#8dd9d9` | `--color-soft-teal` | accent | Light accent in footer details and secondary aqua visual treatments. |
| Console Gray | `#d4d4d4` | `--color-console-gray` | neutral | Text inside dark terminal mockups; treat as product-interface detail. |
| Muted Periwinkle | `#8d9cc4` | `--color-muted-periwinkle` | accent | Small accent text within product or interface details, not a dominant brand color. |
| Bright Aqua | `#9fe4e4` | `--color-bright-aqua` | accent | Minor link and text highlight detail; use sparingly. |
| Terminal Gold | `#ffd700` | `--color-terminal-gold` | semantic | Highlighted code text inside terminal imagery, not a general-purpose page accent. |
| Deep Teal | `#1d8a8a` | `--color-deep-teal` | accent | Small emphasis in measured text and headings; subordinate to Signal Teal. |
| Olive Charcoal | `#4b4b46` | `--color-olive-charcoal` | surface | Minor dark interface or illustration detail rather than a recurring page surface. |

### Semantic aliases

`--color-canvas` → `#f3f2f1` (Warm Canvas) · `--color-surface` → `#cac6c3` (Stone Line) · `--color-surface-2` → `#d3f3f3` (Pale Aqua) · `--color-surface-3` → `#25b1b1` (Signal Teal) · `--color-surface-4` → `#ffffff` (Paper White) · `--color-text` → `#1c1917` (Soft Ink) · `--color-text-muted` → `#7c716a` (Muted Taupe) · `--color-text-subtle` → `#ffffff` (Paper White) · `--color-border` → `#cac6c3` (Stone Line) · `--color-accent` → `#25b1b1` (Signal Teal) · `--color-accent-2` → `#8dd9d9` (Soft Teal) · `--color-accent-3` → `#8d9cc4` (Muted Periwinkle) · `--color-on-accent` → `#ffffff` (Paper White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1c1917` | `#f3f2f1` | 15.64:1 | AAA |
| `#1c1917` | `#cac6c3` | 10.31:1 | AAA |
| `#1c1917` | `#d3f3f3` | 14.89:1 | AAA |
| `#1c1917` | `#25b1b1` | 6.66:1 | AA |
| `#7c716a` | `#f3f2f1` | 4.24:1 | AA-large |
| `#7c716a` | `#cac6c3` | 2.8:1 | fail |
| `#7c716a` | `#d3f3f3` | 4.04:1 | AA-large |
| `#7c716a` | `#25b1b1` | 1.81:1 | fail |
| `#ffffff` | `#f3f2f1` | 1.12:1 | fail |
| `#ffffff` | `#cac6c3` | 1.7:1 | fail |

### Gradients

- `radial-gradient(circle, color(srgb 0.666489 0.635053 0.615511 / 0.24) 1px, rgba(0, 0, 0, 0) 1px)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 600, 500 | Body copy, navigation, links, and common controls. | Inter |
| Geist Mono | `--font-mono` | webfont | 400, 600 | Code samples, terminal commands, and technical captions. | Space Mono |
| But Head | `--font-display` | webfont | 400 | Display and page headings, including the hero and section titles. | Bodoni Moda |

- **Inter:** Measured weights 400, 500, and 600; use regular body text and medium-weight navigation without uppercase styling.
- **Geist Mono:** Measured weights 400 and 600; keep the monospace treatment confined to technical content and compact labels.
- **But Head:** Measured regular weight; use expressive serif headlines with natural casing and no added tracking.

### Type scale — Custom (ratio ≈ 2, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 400 | 1 | 0 | — | But Head | Largest editorial display treatment for prominent page messaging. |
| h1 | 48px | 400 | 1 | 0 | — | But Head | Primary hero heading and top-level page title. |
| body | 15px | 400 | 1.6 | 0 | — | Inter | Feature descriptions, explanatory copy, and testimonials. |
| caption | 14px | 400 | 1.5 | 0 | — | Geist Mono | Monospace technical labels and compact supporting details. |
| nav | 14px | 500 | 1.2 | 0 | — | Inter | Header navigation links and utility menu items. |
| link | 12px | 400 | 2 | 0 | — | Inter | Small inline and footer links. |
| code | 14px | 400 | 1.5 | 0 | — | Geist Mono | Terminal commands, code examples, and product output. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 6, 8, 10, 12, 14, 16, 20, 24, 32, 40 px.
- Section rhythm 58px · element gap 12px · card padding 24px · max content width —.

A centered content column anchors the header, large hero, CTA row, and terminal demo. The measured page has no fixed max-width value, so preserve the screenshot’s contained, generous side margins rather than inventing one. Sections alternate between focused single-column storytelling and wider feature or comparison grids. Use clear vertical separation between major blocks, with compact gaps inside cards and controls. The overall density is comfortable: large headline space and product imagery are balanced by short copy, concise feature summaries, and aligned columns.

## Shape & elevation

- Radius: button `9999px` · card `8px` · media `16px` · link `20px` · xs `6px` · sm `8px` · md `16px` · lg `20px` · pill `9999px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0.1) 0px 1px 6px 0px, rgba(0, 0, 0, 0.2) 0px 24px 44px 3px`
- Shadow `inset` (card): `rgb(58, 53, 50) 0px 4px 100px 0px inset`
- Shadow `inset-2` (button): `rgba(0, 0, 0, 0.2) 0px -36px 54px 0px inset`
- Motion: standard transition `0.2s ease` on interactive elements.

The visual system favors thin stone-gray borders and mostly flat surfaces. Dark terminal panels use inset depth and subtle shadowing to separate them from the canvas, while the feature interface card and large demo gain more pronounced elevation. Keep shadows selective; rely on spacing, contrast, and borders for most section separation.

## Imagery

Product imagery is primarily terminal output and interface mockups, framed as dark panels against the pale canvas. A video-card gallery and community portraits add proof and human context; the lower download area includes a playful illustrated character rather than lifestyle photography. Keep screenshots crisp, dark, and legible, while treating colorful demo thumbnails as content rather than as the site-wide palette.

## Components

### Header navigation

A compact horizontal brand-and-link row on the warm canvas; use dark Inter navigation and a teal Log in action.

### Hero statement

Large But Head serif headline, brief supporting copy, and a CLI/Desktop selector beneath the header.

### Install CTA

Prominent dark command panel with serif title and monospace install command, paired with a light outlined docs control.

### Terminal demo

Wide charcoal product screenshot with terminal text and restrained interface chrome; treat code highlights as image detail.

### Feature grid

Thin-bordered, pale cards with small interface icons, concise labels, and compact explanatory copy.

### Comparison panel

Pale aqua section containing a white feature comparison table with short rows and minimal status marks.

### Closing CTA and download

Teal conversion panel followed by a pale aqua download area with platform links, illustration, and footer utilities.

### Measured component styles

- **Primary button** (“Log in”): background #25b1b1 · text #ffffff · radius 6px · padding 4px 8px · 400 16px Inter
- **Secondary button** (“Parallel Branches”): transparent background · text #1c1917 · border 1px solid #cac6c3 · radius 0px · padding 16px · 400 16px Inter
- **Link** (“[↗]”): transparent background · text #1c1917 · radius 0px · padding 0px · 400 12px Inter
- **Card** (“# Ask your agent to move, absorb, squash”): background #272321 · text #d4d4d4 · radius 0px · padding 24px · 400 14px Source Code Pro · shadow rgb(58, 53, 50) 0px 4px 100px 0px inset
- **Navigation item** (“Docs”): transparent background · text #1c1917 · radius 0px · padding 0px · 500 14px Inter

## Do

- Use #f3f2f1 as the main page canvas.
- Set display headings in an expressive serif.
- Reserve #25b1b1 for important actions and selective emphasis.
- Use monospace for commands and terminal content.
- Keep card borders light and shadows selective.
- Use screenshots as product proof, not decorative wallpaper.

## Don't

- Do not replace the warm canvas with stark white.
- Do not apply teal to every link or section.
- Do not use heavy shadows on every card.
- Do not turn technical copy into decorative typography.
- Do not make terminal mockups brighter than the page’s primary CTA.
- Do not crowd the hero with lengthy explanatory copy.

## Agent prompt

Build a new GitButler page that keeps the warm #f3f2f1 canvas, #1c1917 ink, and calm editorial tone. Use But Head or a close serif substitute for large, naturally cased headlines; use Inter for navigation and body copy, and monospace for commands. Apply #25b1b1 selectively to the primary action, with #d3f3f3 for occasional soft feature panels and #cac6c3 for restrained borders. Center the main content, preserve generous section breathing room, and alternate focused product demonstrations with wider feature grids. Show the product through crisp dark terminal or interface mockups. Keep cards mostly flat, use rounded action surfaces sparingly, and let clear hierarchy—not decoration—guide the reader from introduction to proof and conversion.

## Source CSS custom properties (selected)

```css
--font-mono: Geist Mono, monospace;
--font-default: Inter, sans-serif;
--font-accent: But Head, serif;
--art-scene-bg: hsl(175 46.4% 89%);
--bg-1: hsl(0 0% 100%);
--bg-2: hsl(30 7.7% 94.9%);
--bg-3: hsl(20 5.9% 90%);
--bg-danger: hsl(6 55.6% 96.5%);
--bg-mute: hsl(60 7.7% 97.5%);
--bg-overlay: hsl(0 0% 83.9% / .45098039215686275);
--bg-pop: hsl(180 55.6% 96.5%);
--bg-purple: hsl(270 55.6% 96.5%);
--bg-safe: hsl(156 55.6% 96.5%);
--bg-toast: hsl(24 9.8% 10%);
--bg-warn: hsl(34 88.9% 96.5%);
--border-1: hsl(23 7.1% 64.1%);
--border-2: hsl(26 6.2% 77.8%);
--border-3: hsl(20 5.9% 90%);
--btn-danger-outline-bg: hsl(8 58.8% 81%);
--btn-danger-outline-text: hsl(8 67.9% 41.6%);
--btn-gray-outline-bg: hsl(26 6.2% 77.8%);
--btn-gray-outline-text: hsl(20 8.3% 14.1%);
--btn-opacity-outline-bg: 10%;
--btn-opacity-outline-bg-hover: 25%;
--btn-opacity-outline-border: 40%;
--btn-pop-outline-bg: hsl(180 56.1% 75.9%);
--btn-pop-outline-text: hsl(180 65.3% 32.7%);
--btn-purple-outline-bg: hsl(270 52.4% 83.5%);
--btn-purple-outline-text: hsl(270 59.8% 45.9%);
--btn-safe-outline-bg: hsl(155 52.2% 77.8%);
--btn-safe-outline-text: hsl(155 59.8% 36.1%);
--btn-warn-outline-bg: hsl(35 81.4% 81%);
--btn-warn-outline-text: hsl(35 95.2% 32.9%);
--chip-danger-bg: hsl(9 60.7% 89%);
--chip-danger-fg: hsl(8 67.9% 41.6%);
--chip-gray-bg: hsl(20 5.9% 90%);
--chip-gray-fg: hsl(23 7.4% 21.2%);
--chip-pop-bg: hsl(180 57.1% 89%);
--chip-pop-fg: hsl(180 65.3% 32.7%);
--chip-purple-bg: hsl(270 53.6% 89%);
```

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