// design system

Bubbletea TUI

A terminal-native design system: rounded Lip Gloss borders, monospace type, and ANSI neon on blue-black. Every value below is a CSS custom property, so the navbar theme toggle repaints the whole page without a single component knowing which theme it is in.

Colour

Deep blue-black surfaces carrying neon foreground. Purple and hot pink anchor the brand; cyan and mint supply the Tron edge; gold and coral cover warning and danger.

Brand

charm purple--charm-purple

charm pink--charm-pink

fuchsia--charm-fuchsia

lilac--neon-lilac

Neon / status

cyan — info--neon-cyan

mint — success--neon-mint

gold — warning--neon-gold

coral — danger--neon-coral

Surfaces

void--bg-void

terminal--bg-terminal

surface--bg-surface

raised--bg-surface-2

Text

bright--text-bright

body--text-body

muted--text-muted

dim--text-dim

Type

Monospace throughout — that is the brand, not a code-block choice. JetBrains Mono is the workhorse, Space Mono the display voice, Silkscreen the pixel accent. Hierarchy comes from weight, size and colour, never from switching to a proportional face.

--text-3xlDisplay

--text-xlTitle

--text-mdHeading

--text-baseBody copy

--text-smUI label

--text-xsHint text

--font-pixel// PIXEL EYEBROW

Badges

The chip recipe is the same everywhere: a low-alpha wash of the hue, the hue itself as text, and a hairline border at partial alpha — mixed with color-mix so one definition tracks the base colour through a theme flip.

Status

✅ ACCEPTED💡 PROPOSED📦 DEPRECATED⏫ SUPERSEDED🚫 REJECTED

Severity

🔴 CRITICAL🟠 HIGH🟡 MEDIUM🟢 LOW🔵 INFO

Priority

🔴 P0🟠 P1🟡 P2🟢 P3

RFC 2119 level / domain / date

CRITICALHIGHOPTIONAL📦 platform📅 2026-08-15

RFC 2119 keywords

Highlighted in place inside spec prose, so obligation is visible while scanning rather than only when reading. Coral for the absolute, gold for the strong default, cyan for the genuinely optional.

The daemon MUST reject an unauthenticated attach, SHOULD log the attempt with its source address, and MAY rate-limit repeat offenders.

Metadata strip and requirements

FieldGroup is the readout strip at the top of every ADR. RequirementBox is a Lip Gloss rounded panel that turns cyan and glows when you link straight to it — the :target state below is what a shared anchor lands on.

Status:✅ ACCEPTED

Date:📅 2026-08-15

Decision Makers:joestump

req-example

CRITICAL

The template MUST render identically on Gitea Pages and GitHub Pages, differing only in the host baked into canonical and og:url tags.

Cross-references

Bare ADR-0001 / SPEC-0001 mentions in prose become chips automatically, with the artifact's emoji. Text already inside a link or inline code is left alone, so nothing gets double-linked.

Supersedes 📝 ADR-0001 and implements SPEC-0001.

Consequence keywords

MADR consequence bullets are colour-coded by their leading word, so the shape of a decision's trade-offs is legible before you read any of them.

Good, because one language end-to-end means the wire contract is defined once.
Neutral, because the browser stack is community packages rather than core.
Bad, because the ecosystem is small and the tooling is thin.