Humdrum Style Guide

Style guides for Humdrum.one

Surfaces & layout

background --bg
surface --bg-card
surface-raised --bg-elevated

Elevated content, dropdowns, modals

border --border

Default borders, dividers, card edges

border-strong --border-strong

Emphasis, active states, focus rings

accent-subtle background with accent border

Used for highlighted panels, info banners, active list items

Surface tokens

Color levels

200 lightest → 600 strongest. --{name} aliases --{name}-400.

Typography

display: Awke body: Untitled Sans mono: Name Mono

Awke — display

thin / 100
The quick brown fox
regular / 400
The quick brown fox
bold / 700
The quick brown fox

Untitled Sans — body

light / 300
Jackdaws love my big sphinx of quartz italic too
regular / 400
Jackdaws love my big sphinx of quartz italic too
medium / 500
Jackdaws love my big sphinx of quartz italic too
bold / 700
Jackdaws love my big sphinx of quartz italic too
black / 900
Jackdaws love my big sphinx of quartz italic too

Type scale

5xl
The quick brown fox
4xl
The quick brown fox
3xl
The quick brown fox
2xl
Jackdaws love my big sphinx of quartz
xl
Jackdaws love my big sphinx of quartz
lg
Jackdaws love my big sphinx of quartz
base
Jackdaws love my big sphinx of quartz. The five boxing wizards jump quickly.
sm
Jackdaws love my big sphinx of quartz
xs / muted
Jackdaws love my big sphinx of quartz

Name Mono

code
const x: Item = { id: 'abc', done: false };
italic
// shared contract for /api/items + Go CLI

Interactive elements

Buttons

Inputs

Badges & tags

Default Accent LABEL Error Success

Card

Card title

Cards sit on --bg-card. Borders use --border.

Nav

Spacing & radius

Snippet

/* Use tokens, never literals */
.card {
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
}