ui/README.md

lvl0/ui

The shared visual style for lvl0 projects — palette, glow utilities, and the seven-segment display font. Published as @lvl0/ui.

Red-on-black terminal aesthetic: monospace type, square corners, thick borders, and CRT-style glow. This repository is the source of truth. Before it existed the style lived as three divergent copies across incr, buckets, and buckets-budget, reverse-engineered from each other — read the values here rather than from another project.

Status: early. The package is not published yet; see the open issues.

Palette

Defined as Tailwind 4 @theme tokens. Use the token names rather than raw red-* steps so a palette change lands in one place.

Token	Value	Role
--color-primary	oklch(0.637 0.237 25.331)	House red. Text, active borders, focus states, glow source.
--color-bordeaux	oklch(0.258 0.092 26.042)	Secondary. Dividers, resting borders, recessed chrome.
--color-background	oklch(0.1 0 0)	Near-black page ground
--color-card	oklch(0.12 0 0)	Raised surface
--color-muted	oklch(0.2 0 0)	Muted surface
--color-muted-foreground	oklch(0.5 0.1 25)	Muted text
--color-destructive	oklch(0.577 0.245 27.325)	Destructive actions
--radius	0	Square corners throughout

Chart colours --chart-1 … --chart-5 are also defined.

Primary or bordeaux? Primary for anything active or foreground: text, focused inputs, the borders of things you can click. Bordeaux for structure: dividers, the resting state of an input border, panel outlines. An element commonly moves from bordeaux to primary on focus.

Utilities

Class	Use
.glow-red	Box-shadow bloom in primary, with :hover and :focus steps
.glow-red-text	Two-layer text-shadow, for headings without a border
.glow-bordeaux	Softer bloom, for bordeaux-bordered elements
.glow-bordeaux-line	Two-layer variant for 1–2px rules
.scrollbar-red	Themed scrollbar, Firefox and WebKit
.font-digital	Seven-segment face — numerals only

Three rules that are not obvious from the values:

• .glow-red haloes a box, not text. On a borderless heading it smudges around the element's invisible box. Use .glow-red-text there.
• .glow-bordeaux emits primary-tinted light, not bordeaux. Bordeaux at oklch(0.258 …) is too dark to bloom against a near-black ground, so a bordeaux halo is invisible. Dim element, brighter glow — as CRT phosphor behaves.
• A single wide shadow on a hairline just fades out. .glow-bordeaux-line uses a tight core plus a wider spill so a 2px rule reads as lit.

Font

fonts/7segment.woff — 7-Segment by Jan Bobrowski, version 3.0, licensed under the SIL Open Font License 1.1.

The OFL permits bundling and redistribution provided the licence text travels with the font. fonts/OFL.txt must ship wherever 7segment.woff does — including in the published npm tarball. Do not move one without the other.

Licence verified 2026-08-23 from two independent sources: the font's own name table (ID 13 LicenseDesc = "SIL OFL", ID 9 Designer = "Jan Bobrowski") and the designer's page.

Letters render poorly in a seven-segment face. Use it for digits — counters, lengths, readouts — and set everything else in font-mono.

Usage

Once published:

@import 'tailwindcss';
@import '@lvl0/ui';

Licence

MIT — see LICENSE. Deliberately different from the AGPL-3.0 used across the other lvl0 repositories: this package is meant to be imported, and AGPL's copyleft would attach to any consuming work. The bundled font keeps its own OFL terms.