September 14, 2026
The office dream again, the third time. Same empty floor.
Badge
A small pill that labels something: a date range, a count, a tone, "related". It is read, not pressed. A badge that also filters (a dream's tones) is a button underneath, and its label brightens on hover, but nothing else about it changes.
Tones and sizes
neutral is the item card's badge: a --bg-muted pill in a --border-default rule, --text-muted. outline drops the fill and takes --text-accent-muted (search's "related"). accent drops the rule and takes --text-accent (a dream's tones). md is the default; .sm is .68rem, tracked; .lg is .72rem with more air. One line, never wraps: a badge too wide for its row ends in an ellipsis.
7 entries
7 entries
7 entries
related
related
related
surreal
surreal
surreal
In context
The three places badges live today, drawn with each screen's own stylesheet. The card sizes its badges per card size in card.css; colour, rule and shape come from .badge.
July 31, 2026 — Friday run with Mika related
met Mika at Greenwood Park after work for a run…
Not badges
Two pills that look close but are controls, with their own pages: a chip is a button that selects (filter rows, jump pills: button group); a toggle stays pressed (toggle). The tag editor's removable .tag, with its ×, belongs to entities.
Anatomy
span.badge[.sm | .lg][.outline | .accent] button.badge… when it also filters
pill
--radius-pill, a 1px rule (transparent for accent), padding .1rem .5rem at md.
label
UI face, --font-2xs/1.4 at md, tabular figures, one line with an ellipsis.
hover
Only a button.badge: the label goes to --text-default.
Tokens
Fill --bg-muted; rule --border-default; labels --text-muted, --text-accent-muted, --text-accent; size --font-2xs; radius --radius-pill. In Figma: one Badge set, tone × size, with a label property.