Design
Living gallery of cubby's components and tokens. Not in the nav — reachable at /design.
Design language
Warm-Paper LedgerA print-editorial aesthetic applied to a data-dense dashboard. Cubby is still a dashboard — panels, metrics, charts, tables — but it reads like a printed control sheet or ledger, not a lit-up glass UI. Matte instrument panel, not glass dashboard: no glass, glow, drop shadows, dark canvas, neon, or gradient fills. Light mode only.
The one rule — separation by rule and tone, never by elevation. The moment something casts a shadow or glows it reads as glass. Keep everything flat on the paper and it stays a ledger.
Palette
Type
- JetBrains Mono — data, cells, metrics, numerals (tabular-nums, right-aligned).
- Space Grotesk — headings & panel titles, letter-spacing -0.02em.
- Inter — body & prose. Eyebrows are mono, uppercase, tracked-out.
How dashboard elements translate
- · Panels → ruled regions: a hairline border or a 3px ink top-rule, paper-surface background, square corners, zero shadow.
- · Stat tiles → ledger entries: a big mono number + small label, hairline-divided. Accent only on the one live metric.
- · Charts → matte & ruled: a flat ink ladder + a single ultramarine, hairline gridlines, no gradients or glow. Rating scales stay off the blue axis.
- · Tables → zebra by paper tone; category fills are tints, not chips; sticky paper-surface headers under a 3px ink rule; tight rows.
- · Nav & chrome → hairline-divided and flat. No raised or shadowed bars.
- · Accent is the loudest thing on screen — active row, hover, focus, the one live value. Everywhere else stays ink + paper.
A warm-paper instrument panel: dense mono data on soft paper, panels defined by ink rules and hairlines instead of shadows, matte flat charts, and a lone ultramarine accent reserved for the live/active value — a dashboard that reads like a printed ledger, not a glass one.
References McMaster-Carr · Datasette · The Monospace Web · Oxide Computer (light) · US / Berkeley Graphics · Gwern + Tufte CSS. Not the vibe: Fey, Mercury, glass / dark dashboards — same density, opposite material. Paper, not glass.
Color tokens
styles.css :rootSurfaces
Semantic
Chart ramp
Sequential ramp
Rule & tone separation
Warm-Paper Ledger — no elevationPanels are defined by a 3px ink top-rule + hairline border and zebra paper tone — never a shadow, glow, or gradient. Corners are square.
Typography
styles.css @layer baseHeading 1 — Space Grotesk
Heading 2 — Space Grotesk
Heading 3 — Space Grotesk
Body copy is Inter. The quick brown fox jumps over the lazy dog — crisp, neutral, legible at small sizes.
Mono is JetBrains Mono — used on chrome, codes, and numerals: 041570052600 · $9.41 · 248
Eyebrow micro-label
A figure caption.
Surfaces
components/ui/surfaceIngredient decomposition
components/recipe/decomposition-viewComparison glyphs
components/recipe/compare/DeviationBarButtons
components/ui/buttonBadges & labels
badge · DotLabel · EntityInlineLinkForms
input · textarea · switch · checkbox · comboboxStored f64 shown after =. Renders fractions, parses 1/3 · ⅓ · 1 1/2 · decimals on blur.
Cards
components/ui/cardicon.Same surface + an icon-eyebrow header helper.
Table
components/ui/table| Ingredient | Category | Price |
|---|---|---|
| almond milk | food | $5.42 |
| rolled oats | food | $9.41 |
| Festool pad | tools | $39.99 |
| 3 items | $54.82 |
The selected row shows the paper tint + ultramarine spine.
Overlays
dialog · alert-dialog · dropdown · popover · toastAlerts
components/common/colored-alertMisc
info-row · ticket-divider · skeleton · noneFact sheet (dot-leader)
Ticket divider
Skeleton
Empty value
—Conversion graph
units/unit-mapping-graph · d3-forceNodes themed per measure kind · dashed native bridges (g↔lb) · nutrient edges opt-in
Entity preview
EntityPreviewContent · ui/preview-cardManifest hovercard shown on any entity link — shared header (icon · name · open · tag · identity) + cross-links + entity-specific body
Form field groups
inventory/amount-field-group · units/unit-mapping-pair-fieldFraction-aware amount + unit pair, and the composable “A = B” mapping pair (reused by the product unit-conversion editor)