One design language,
every Profile screen.
The color roles, type, and components behind the Profile scheduler — laid out as a living reference. Everything here is the real production component and the real token value; nothing is a mockup. Flip the theme (top right) to see that light and dark are both first-class.
Color
Components name what a color means — a role like sch-accent or sch-late-soft — and the theme decides what it looks like. Swatch values below are read live from the rendered page, so they can never drift from what ships.
Brand cyan #00B2E9 (PMS 299C) never carries text — it reads 2.5:1 against white, failing accessibility at any size. It stays a highlight: selection washes, focus rings, the logo block. Anything with text on it uses the blue above.
Typography
Barlow — the brand's DIN OT substitute — for every word; JetBrains Mono for every number and code. Numerics are always mono with tabular figures, so columns of quantities align.
Form controls
Inputs, labels, checkboxes, menus and feedback from the ui package — themed once, reused everywhere.
Status vocabulary
One vocabulary on every screen — green is running, red is late/rush/down, amber is caution, cyan is a quiet live reading, neutral is idle or closed. These are the production pill and badge components, not drawings of them.
Cards & metrics
Cards sit on the canvas with a hairline border and a whisper of shadow; the status bar is inset and rounded, never a flush edge. Stats are label-over-mono-value.
Tables
Tracked uppercase headers in the faint text step, hairline row rules, quantities right-aligned in mono.
| Run # | Product | Line | Lbs | Est done |
|---|---|---|---|---|
| 84512 | 31084-CLR-30 | L1 | 18,240 | 8/23 14:53 |
| 84520 | 31090-CLR-32 | L1 | 22,400 | 8/25 13:35 |
| 84508 | 28816-WHT-24 | L2 | 12,600 | 8/22 23:09 |
Principles
The short list every screen follows — each one is written down in docs/design/design-language.md, and the color rule is enforced by the build.
Voice & tone
Plain, warm, and in the floor's vocabulary — pallets, rolls, lines, shifts. Say what happens next, not that an operation succeeded.