№ gitbutler-com--product

Gitbutler — Features

Crisp, dark technical clarity; precise sans-serifs on a deep, cool, digital canvas.

Specimenminimalism swiss monochrome brutalism developer toolslight

The page prioritizes functionality and clarity through a stark, dark aesthetic. Type hierarchy is strong, with a focus on code snippets and a clean, organized layout. Visual density is moderate, emphasizing information delivery over ornamentation. · dark saas, developer tools, git workflow, terminal interface, code management, minimalist design, technical website

Gitbutler — Features - mobile — Mobile · 375

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: monochrome · muted · high-contrast

SwatchHexOKLCHSuggested roleCopy

Hex#e82721
OKLCHoklch(59.9% 0.226 28)
RoleDominant
find sites →
Hex#24b4ac
OKLCHoklch(69.7% 0.114 189)
RoleSurface
find sites →
Hex#ef9f8b
OKLCHoklch(77.7% 0.100 35)
RoleInk
find sites →
Hex#6ea1a0
OKLCHoklch(67.3% 0.054 194)
RoleAccent
find sites →
Hex#a2c2c2
OKLCHoklch(79.1% 0.034 196)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h1	But Head	82px	400	1	-1%	Aa Bb Cc
h2	But Head	60px	400	1	0	Aa Bb Cc
h3	Inter	18px	600	1.2	0	Aa Bb Cc
body	Inter	16px	400	1.5	0	Aa Bb Cc
button	Inter	16px	400	1.5	0	Aa Bb Cc

Spacing scale

6px

10px

20px

24px

30px

32px

40px

60px

80px

Radius scale

0px

6px

20px

60px

Container

Max content width 1360px

Export

:root {
  --color-dominant: #e82721;
  --color-surface: #24b4ac;
  --color-ink: #ef9f8b;
  --color-accent: #6ea1a0;
  --color-detail: #a2c2c2;
}

/* CSS variables exposed by source */
:root {
  --text-fontfamily-default: Inter;
  --bg-overlay: hsl(0 0% 83.9% / .45098039215686275);
  --font-default: Inter, sans-serif;
  --text-lineheight-accent: 110%;
  --text-weight-bold: 600;
  --shadow-clr: hsl(0 0% 0% / .10196078431372549);
  --text-safe: hsl(155 60% 12.7%);
  --text-danger: hsl(8 68.1% 22.2%);
  --font-mono: Geist Mono, monospace;
  --bg-warn: hsl(34 88.9% 96.5%);
  --font-accent: But Head, serif;
  --bg-1: hsl(0 0% 100%);
  --bg-pop: hsl(180 55.6% 96.5%);
  --border-3: hsl(20 5.9% 90%);
  --text-weight-regular: 400;
  --bg-safe: hsl(156 55.6% 96.5%);
  --bg-danger: hsl(6 55.6% 96.5%);
  --radius-l: .75rem;
  --bg-mute: hsl(60 7.7% 97.5%);
  --text-fontfamily-accent: But Head;
  --radius-button: .375rem;
  --text-weight-semibold: 500;
  --bg-toast: hsl(24 9.8% 10%);
  --text-lineheight-default: 120%;
  --text-warn: hsl(35 94.2% 20.4%);
  --text-purple: hsl(270 60% 20.6%);
  --radius-ml: .625rem;
  --text-3: hsl(23 7.1% 64.1%);
  --radius-s: .25rem;
  --text-fontfamily-mono: Geist Mono;
  --text-lineheight-body: 160%;
  --text-2: hsl(23 7.8% 45.1%);
  --border-1: hsl(23 7.1% 64.1%);
  --radius-m: .375rem;
  --text-pop: hsl(180 64.7% 13.3%);
  --border-2: hsl(26 6.2% 77.8%);
  --text-1: hsl(24 9.8% 10%);
  --size-card-padding: .875rem;
  --size-button: 1.75rem;
  --bg-purple: hsl(270 55.6% 96.5%);
  --size-icon: 1rem;
  --radius-xl: 20px;
  --size-cta: 2rem;
  --bg-2: hsl(30 7.7% 94.9%);
  --bg-3: hsl(20 5.9% 90%);
  --size-tag: 1.375rem;
  --btn-danger-outline: hsl(8 67.8% 50%);
  --btn-warn-outline-bg: hsl(35 81.4% 81%);
  --diff-addition-count-bg: hsl(158 67.5% 84.3%);
  --lexical-input-background: hsl(0 0% 100%);
  --diff-count-bg: hsl(60 5.9% 96.7%);
  --clr-purple-5: hsl(270 59.5% 16.5%);
  --diff-locked-selected-count-text: hsl(38 72.4% 38.4%);
  --chip-danger-bg: hsl(9 60.7% 89%);
  --hover-safe-bg: color-mix(in srgb, hsl(156 55.6% 96.5%), hsl(155 59.8% 36.1%) 4%);
  --art-spot-fill: hsl(26 6.2% 77.8%);
  --fill-gray-fg: hsl(0 0% 100%);
  --diff-deletion-count-text: hsl(0 18.1% 53.5%);
  --commit-integrated: hsl(270 60% 53.9%);
  --clr-purple-95: hsl(270 55.6% 96.5%);
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Gitbutler — Features.
Reference design system (extracted from the live site):
- Palette: #e82721, #24b4ac, #ef9f8b, #6ea1a0, #a2c2c2
- Typefaces: But Head, Inter
- Macrostructure: Specimen
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/gitbutler-com--product

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

But Head

82px

400

-1%

Aa Bb Cc

But Head

60px

400

Aa Bb Cc

Inter

18px

600

1.2

Aa Bb Cc

body

Inter

16px

400

1.5

Aa Bb Cc

button

Inter

16px

400

1.5

Aa Bb Cc

:root { --color-dominant: #e82721; --color-surface: #24b4ac; --color-ink: #ef9f8b; --color-accent: #6ea1a0; --color-detail: #a2c2c2; } /* CSS variables exposed by source */ :root { --text-fontfamily-default: Inter; --bg-overlay: hsl(0 0% 83.9% / .45098039215686275); --font-default: Inter, sans-serif; --text-lineheight-accent: 110%; --text-weight-bold: 600; --shadow-clr: hsl(0 0% 0% / .10196078431372549); --text-safe: hsl(155 60% 12.7%); --text-danger: hsl(8 68.1% 22.2%); --font-mono: Geist Mono, monospace; --bg-warn: hsl(34 88.9% 96.5%); --font-accent: But Head, serif; --bg-1: hsl(0 0% 100%); --bg-pop: hsl(180 55.6% 96.5%); --border-3: hsl(20 5.9% 90%); --text-weight-regular: 400; --bg-safe: hsl(156 55.6% 96.5%); --bg-danger: hsl(6 55.6% 96.5%); --radius-l: .75rem; --bg-mute: hsl(60 7.7% 97.5%); --text-fontfamily-accent: But Head; --radius-button: .375rem; --text-weight-semibold: 500; --bg-toast: hsl(24 9.8% 10%); --text-lineheight-default: 120%; --text-warn: hsl(35 94.2% 20.4%); --text-purple: hsl(270 60% 20.6%); --radius-ml: .625rem; --text-3: hsl(23 7.1% 64.1%); --radius-s: .25rem; --text-fontfamily-mono: Geist Mono; --text-lineheight-body: 160%; --text-2: hsl(23 7.8% 45.1%); --border-1: hsl(23 7.1% 64.1%); --radius-m: .375rem; --text-pop: hsl(180 64.7% 13.3%); --border-2: hsl(26 6.2% 77.8%); --text-1: hsl(24 9.8% 10%); --size-card-padding: .875rem; --size-button: 1.75rem; --bg-purple: hsl(270 55.6% 96.5%); --size-icon: 1rem; --radius-xl: 20px; --size-cta: 2rem; --bg-2: hsl(30 7.7% 94.9%); --bg-3: hsl(20 5.9% 90%); --size-tag: 1.375rem; --btn-danger-outline: hsl(8 67.8% 50%); --btn-warn-outline-bg: hsl(35 81.4% 81%); --diff-addition-count-bg: hsl(158 67.5% 84.3%); --lexical-input-background: hsl(0 0% 100%); --diff-count-bg: hsl(60 5.9% 96.7%); --clr-purple-5: hsl(270 59.5% 16.5%); --diff-locked-selected-count-text: hsl(38 72.4% 38.4%); --chip-danger-bg: hsl(9 60.7% 89%); --hover-safe-bg: color-mix(in srgb, hsl(156 55.6% 96.5%), hsl(155 59.8% 36.1%) 4%); --art-spot-fill: hsl(26 6.2% 77.8%); --fill-gray-fg: hsl(0 0% 100%); --diff-deletion-count-text: hsl(0 18.1% 53.5%); --commit-integrated: hsl(270 60% 53.9%); --clr-purple-95: hsl(270 55.6% 96.5%); }

Build a landing page in the visual style of Gitbutler — Features. Reference design system (extracted from the live site): - Palette: #e82721, #24b4ac, #ef9f8b, #6ea1a0, #a2c2c2 - Typefaces: But Head, Inter - Macrostructure: Specimen Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/gitbutler-com--product