Infrastructure · 12 min read
The quiet season of the home-lab: what autumn maintenance actually earns you
Patch windows, dead containers and the case for pruning before it snows.
travismetcalf.com · design system
The shared design language behind the home-lab apps: a deep navy-purple
dusk ground (and its cream daylight counterpart), one crimson
accent doing all the talking, gold as the editorial second voice, and an
editorial type pair — Source Serif 4 for words, Inter Tight for
numbers and UI. Tokens live in
_shared/design/signal-tokens.css; every app consumes them
through a thin per-app adapter.
01 · Core tokens
Rendered from the live CSS custom properties — the hex under each chip is what the stylesheet actually computes right now, in the theme you're viewing. Click any chip to copy its variable name.
value changes between dusk and cream — flip the theme toggle to compare.
02 · The crimson ramp
There is no rainbow anywhere in the system. Emphasis, state and speed are all carried by one crimson at different depths — from the pale chip ink used on wine grounds down to the near-black stretch that marks a slow segment on the map.
03 · Typography
Display — Source Serif 4 · 640 · −1.5% tracking
Dusk settles over the interstate.
Reading — Source Serif 4 · 18px / 1.6
The serif carries titles and prose only. Body ink is a pale lavender-white,
never pure white — --signal-ink on the dusk ground, flipping to a
near-navy on cream. Secondary text steps down through
ink-soft to ink-faint, and every step clears
WCAG AA on both the page and raised cards.
UI — Inter Tight · variable
Numbers — proportional heroes, tabular columns
42 min
Hero figures use proportional figures — tighter, friendlier.
| Day | Leave | Median |
|---|---|---|
| Mon | 9:00 | 41 min |
| Thu | 9:00 | 44 min |
| Fri | 9:00 | 38 min |
tabular-nums only in columns and axes, so digits align.
04 · Data & maps
Dataviz colors are owned by their apps (commute-tracker today) and documented here. Status marks brighten on dusk where the light-theme values fail contrast — same idea, per-theme tuning.
The one place a green→red scale is allowed: the congestion heatmap, where the ramp is the data. Identical hexes in both themes; only the empty cell follows the ground.
Predicted wears the brand crimson; actual takes lavender — related to the dusk ground, never competing with the accent.
Only the primary corridor speaks traffic — one crimson, two tones, darker = slow. Alternates are colored by identity (lavender, gold), never congestion.
Every line sits on a casing — a wider stroke of the page ground — so it reads on a busy basemap. Light mode darkens the alternates a step; cased gold on beige is otherwise invisible.
Green is reserved for genuine good news; bad news reuses the crimson family. Chips pair an ink with its tint.
05 · Components
Recreations of each app's signature pieces, styled entirely with the variables above — if a component here looks wrong, a token is wrong.
Signal · digest story card
Infrastructure · 12 min read
Patch windows, dead containers and the case for pruning before it snows.
Signal · watchlist chip (dusk-only)
Buttons
Commute-tracker · stat card
41 min predicted
▼ beats the weekly median06 · House rules
Crimson is the only voice of emphasis; gold is a quieter editorial second. Anything that needs a third color is redesigned until it doesn't. The single sanctioned exception is the traffic heat ramp, where the scale is the data.
Every ink clears WCAG AA on the page and on raised cards —
--signal-ink-faint was lightened to #8d89aa for exactly this
reason. Marks re-tune per theme: heat-5 red is 2.9:1 on dusk, so chart
marks brighten to #ef5348 there.
Raw values live once, in signal-tokens.css, namespaced
--signal-* so they never collide with a host app. Each
consumer maps them onto its own variables in a thin adapter and vendors a
copy at deploy time — no runtime fetches, no CSP fights.
Source Serif 4 carries titles and reading; Inter Tight carries UI and every numeral. Tabular figures only in columns and axes — heroes use proportional figures.
Dusk ink is pale lavender (#ece9f5); cream ink is deep navy (#1a1b2e). The grounds carry the brand temperature even before any accent shows up.