🎨 Design System v12.0

Docket Rocket Design System

Complete token + component catalog for v12.0. Every class reference token. Every component dogfooded with live example and copy-pasteable markup.

1. Tokens

Colors

Paper, ink, and semantic palettes.

--paper-base
#FAF7F0
--paper-warm
#F5F0E6
--paper-shadow
#E8E2D4
--ink-primary
#2B2A26
--ink-secondary
#5C5A54
--ink-tertiary
#8A8880
--accent
#D97757
--success
#2D8659
--warning
#C8861D
--error
#C94C4C
--info
#4A7BA7 
background: var(--paper-base);
color: var(--ink-primary);
border-color: var(--accent);

Spacing Ladder

4px base, modular scale.

--space-1 (4px)
--space-2 (8px)
--space-3 (12px)
--space-4 (16px)
--space-5 (24px)
--space-6 (32px)
--space-8 (48px)
--space-10 (64px)
padding: var(--space-4);
gap: var(--space-3);
margin-top: var(--space-6);

Radii

sm
--radius-sm (6px)
md
--radius-md (10px)
lg
--radius-lg (14px)
xl
--radius-xl (20px)
full
--radius-full
border-radius: var(--radius-md);
border-radius: var(--radius-full); /* pills */

Shadows

--shadow-sm
--shadow-md
--shadow-lg
--shadow-glass
box-shadow: var(--shadow-sm);
box-shadow: var(--shadow-md);
box-shadow: var(--shadow-lg);

2. Typography

Fluid type scale via clamp(). Resize the viewport to see scaling.

H1 Heading — 4xl

H2 Heading — 3xl

H3 Heading — 2xl

H4 Heading — xl

H5 Heading — lg
H6 Heading — base (600)

Body paragraph text at --text-base. The quick brown fox jumps over the lazy dog.

const monoSample = "code snippet"; 
<h1>Heading 4xl</h1>
<h2>Heading 3xl</h2>
<p>Body text</p>
<code>inline code</code>

3. Layout Primitives

.container, .stack, .cluster, .grid — composable layout classes.

.stack (vertical flow)

Stack item 1
Stack item 2
Stack item 3
<div class="stack">
  <div>item</div>
  <div>item</div>
</div>

.cluster (horizontal wrap)

tag 1 tag 2 tag 3 tag 4 tag 5 
<div class="cluster">
  <span>item</span>
  <span>item</span>
</div>

.grid (responsive: 1 col < 640px / 2 col 640-1024px / auto-fit 280px ≥ 1024px)

Grid A
Grid B
Grid C
Grid D
<div class="grid">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

4. Buttons

Five semantic variants, three sizes, with disabled state.

Variants

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-subtle">Subtle</button>
<button class="btn btn-danger">Danger</button>
<button class="btn">Base</button>

Sizes

<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-sm">Small</button>

Disabled

<button class="btn btn-primary" disabled>Disabled</button>

5. Cards

Three elevation levels — flat, elevated, and glass.

.card

Flat card on paper-warm background with subtle shadow. Good for inline content grouping.

.card-elevated

White card with medium shadow that lifts on hover. Primary content containers.

.card-glass

Glassmorphic card — blurs content behind it. Reserved for elevated overlays.

<div class="card">...</div>
<div class="card-elevated">...</div>
<div class="card-glass">...</div>

6. Inputs

Text, select, textarea, and size modifiers.

<label for="email">Email</label>
<input id="email" class="input" type="email">

<input class="input input-lg" type="text">

<select class="select">
  <option>Choose</option>
</select>

<textarea class="textarea"></textarea>

7. Badges

Pill tags with 4 semantic variants.

Default Success Warning Error Info 
<span class="badge">Default</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-error">Error</span>
<span class="badge badge-info">Info</span>

8. Alerts

Inline banners for status messaging.

Success — Your list was saved.
Warning — Prices may be outdated.
Error — Could not reach the server.
Info — Next scrape runs Wednesday 2am.
<div class="alert alert-success">Success message</div>
<div class="alert alert-warning">Warning message</div>
<div class="alert alert-error">Error message</div>
<div class="alert alert-info">Info message</div>

9. Tables

Default table styling with row hover.

Product Coles Woolworths Aldi
Milk 2L$3.10$3.10$2.95
Bread 700g$4.00$3.90$3.25
Eggs 12pk$6.50$6.80$5.99
 
<table>
  <thead><tr><th>Col</th></tr></thead>
  <tbody><tr><td>Data</td></tr></tbody>
</table>

10. Glass Elements

Three glassmorphic components with @supports fallback. The sticky header at the top of this page is .header-bar.

.card-glass

Glass card

Reserved for elevated overlays that need to show content beneath them.

<div class="card-glass">
  <h4>Glass card</h4>
</div>

.modal

Modal heading

Simulated modal with glass treatment. In production, render inside a backdrop overlay.

<div class="modal">
  <h3>Title</h3>
  <p>Body</p>
</div>

.header-bar

See the sticky glass header at the top of this page — it dogfoods .header-bar with blur + saturate.

<header class="header-bar">
  <div class="container between">
    <strong>Logo</strong>
    <nav>...</nav>
  </div>
</header>

Design System v12.0 — Phase 89 Foundation