{{PRODUCT_NAME}} · design system · v{{VERSION}}

Living design system

Visual source of truth for {{PRODUCT_NAME}}. Maintained by {{OWNER_TEAM}}. Last updated {{ISO_DATE}}.

Palette

CSS tokens declared on :root. Override any token to retheme.

--ivory · #FAF9F5

--paper · #FFFFFF

--oat · #E3DACC

--slate · #141413

--clay · #D97757

--olive · #788C5D

--rust · #B04A3F

--sky · #6A8CAF

Type ramp

Heading 1 · 38px serif

Heading 2 · 26px serif

Heading 3 · 19px serif

Heading 4 · 16px serif

Lead · 16.5px sans · used directly under h1 to frame the document.

Body · 15px sans · default paragraph rhythm. Line height 1.6.

Small muted · 13px · for meta lines and timestamps.

Tiny uppercase · 11px mono · for eyebrows and labels.

Mono · ui-monospace · used for codes, ids, file paths.

Spacing scale

sp-1

4px

sp-2

8px

sp-3

12px

sp-4

16px

sp-5

24px

sp-6

32px

sp-7

48px

sp-8

64px

Radii

xs · 4

sm · 8

md · 12

lg · 20

Primitives

Badge

Semantic chip. Five color variants.

default clay success warn danger info

<span class="badge">default</span>
<span class="badge badge-clay">clay</span>
<span class="badge badge-success">success</span>
<span class="badge badge-warn">warn</span>
<span class="badge badge-danger">danger</span>
<span class="badge badge-info">info</span>

Use for status states inline. Five colors carry semantic meaning — don't pick by aesthetic.

Note

Inline aside with colored left edge. Four variants.

<aside class="note note-success">...</aside>
<aside class="note note-warn">...</aside>
<aside class="note note-danger">...</aside>
<aside class="note note-info">...</aside>

Open with a bold lead label.

Button

Three styles. Primary uses clay, default uses slate, ghost is outlined.

Primary Default Ghost

<a class="button button-primary">Primary</a>
<a class="button">Default</a>
<a class="button button-ghost">Ghost</a>

Use clay (button-primary) for the single most important action on a page. Default for normal actions. Ghost for tertiary.

Stat

Big number card. Used in stat strips on reports.

PRs merged

+12 vs last week

P0 bugs open

-3 vs last week

<div class="stats">
  <div class="stat">
    <div class="stat-num">42</div>
    <div class="stat-label">PRs merged</div>
    <div class="stat-delta up">+12 vs last week</div>
  </div>
</div>

.stat-accent adds a clay left border. Use on one cell at most.

Voice & density rules

One loud color only — clay is the accent. Olive / rust / sky are reserved for true semantic signals.
Serif headings, sans body, mono for small bits — never invert these.
1.5px borders — not 1px. The slightly heavier stroke is the visual signature.
Generous whitespace — page padding 56px 24px 120px is intentional. Don't compress.
No emojis as icons — use SVG, a .dot, or a .badge instead.
No drop shadows by default — reserved for hover and floating elements.

Generated {{ISO_DATE}} · system owner: {{OWNER_TEAM}}.