The operator-facing product brand for the platform DPW (and future tenants) run their business on. Register: working-class premium — Carhartt / Milwaukee / CAT. Made unmistakably for people who work with their hands, executed with the precision of something expensive. This software computes paychecks and legal quote acceptance; it can't look folksy-flimsy, and it must never read as corporate SaaS. The design scene: asphalt at dawn under a sodium work-light — cold steel, machined to tolerance, one hazard stripe.
Colorway: safety amber on steel (decided by bake-off — see below).
This brand skins the operator-facing shell ONLY: login, app header/nav, PWA icon, the OneTruck
marketing site, and a "Powered by OneTruck" statement footer. Tenant brands own every customer-facing
surface — quotes, invoices, texts, the customer website carry the operator's name, never OneTruck.
It's a core sales promise: "your name on everything your customers see." shell.html shows OneTruck's
steel chrome framing the DPW tenant as a small workspace chip; statement.html is issued by the tenant
(Dalton Pressure Washing) with OneTruck credited only in the footer.
onetruck.css — drop-in tokens + shell primitives (buttons, fields, focus) + the .ot-light block.mark.svg — compact mark (badge + abstract "1"). PWA icon / favicon. Survives 16px.wordmark.svg — mark + "OneTruck" (Saira Condensed) lockup.login.html — login reference implementation (brand rail + form discipline, all states).shell.html — authenticated app-header reference (chrome framing a tenant, coaching empty state).bakeoff.html — the colorway decision, on evidence (three colorways in shell context, scorecards).statement.html — light-mode pay statement (first consumer of .ot-light), bank-grade print view.Three colorways were rendered in the money-surface shell context with the stress cases that matter —
a Pay-month money table, the primary button next to a Void payment danger button, both tenant chips
(DPW orange, Summit green) in the chrome, and the mark at 16/24/32px on dark and white — and judged in
this order (bakeoff.html):
| Colorway | a | b | c | d | Verdict |
|---|---|---|---|---|---|
Amber #F4BE0F (h96) |
✅ | ✅ | ✅ | ✅ | WINNER |
Red #C8202F (h27) |
❌ | ✅ | ✅ | ✅ | out — primary red is danger red; "Close month" and "Void payment" read identical |
Ember #E4622C (h42) |
⚠️ | ❌ | ✅ | ✅ | out — ember ≈ DPW orange (h55); the chrome accent and the DPW tenant dot bleed together |
Amber wins on the two non-negotiables (a + b). Its hue (96°) sits 70°+ from danger red, so a destructive button can never mimic the primary; and it's clear of both tenant hues (DPW orange 55°, Summit green 150°), so the chrome frames tenants without blurring. Red is a beautiful Milwaukee/Georgia combo but fails (a) categorically — you cannot color a destructive action the same as the safe one on a screen that closes months and voids payments. Ember fails (b) — it is essentially DPW's orange, which collapses the product/tenant boundary the whole brand is built on. (c) and (d) are satisfied by all three and never get to vote. Amber's only soft spot is (d) on white; the dark "1" + a hardened badge border (stroke-opacity 0.20) carry it — verified at 16/24/32px on both grounds.
onetruck.css)Cool asphalt/steel darks so the chrome frames any tenant hue, one hi-vis amber accent, tan for warmth.
| Role | Token | OKLCH | ~hex |
|---|---|---|---|
| Asphalt (bg) | --ot-bg |
0.170 0.008 245 | #14171B |
| Steel panel | --ot-surface |
0.215 0.010 245 | #1D2127 |
| Machined line | --ot-line |
0.340 0.012 245 | #363C44 |
| Ink | --ot-ink |
0.970 0.004 250 | #F3F5F7 |
| Ink dim (body) | --ot-ink-dim |
0.800 0.006 250 | #BEC4CC |
| Muted (labels) | --ot-muted |
0.660 0.010 245 | #8A929C |
| Accent — safety amber | --ot-hi |
0.858 0.170 96 | #F4BE0F |
| On-accent text | --ot-on-hi |
0.170 0.010 250 | #16191E |
| Work-glove tan | --ot-tan |
0.800 0.050 74 | #D2BC9C |
Accent discipline: amber is the brand color — used only on the mark, the one primary action, focus rings, the active-nav indicator, and the single hazard stripe. Everything else is steel + ink. Warning is a tinted chip, never a solid fill, so it can't be mistaken for the solid-amber primary. Overusing the yellow is the fast path to "cheap"; restraint is what reads premium.
Every token pair actually used was computed (OKLCH → sRGB → WCAG). Dark mode: all 21 pairs pass
(tightest muted/surface-2 = 4.92:1; ink-dim 8–10:1; on-hi/amber button text 12.4:1; semantic inks
7–11:1). Light mode: all pass after nudging --ot-muted to 0.540 (muted/surface was 4.45 → 4.7:1).
No usage was changed to hide a failure — only tokens.
.ot-lightA token block on onetruck.css for printed pay statements (first consumer) and a future light shell.
Paper-white bg, dark ink, and amber kept as a fill/tint; amber-as-text switches to --ot-hi-ink
(darker ochre) because bright amber fails contrast on white. statement.html applies it: a bank-grade,
penny-aligned pay statement — tenant-issued, "Powered by OneTruck" in the footer.
One engineered family across widths (stamped-steel, DIN-adjacent), deliberately not the tenant's
Barlow/Inter. Tabular figures everywhere money appears. Display/wordmark = Saira Condensed 800; UI =
Saira 400–700; data/tables = Saira Semi Condensed with "tnum". Fixed rem scale, 1.2 ratio.
Compact mark = a machined rounded-square badge in safety amber with an asphalt "1" on a road/flatbed baseline — nods to OneTruck (the "One") without a cartoon truck. Legible as a 16–32px favicon on light or dark (badge border hardened to hold on white). Wordmark pairs it with "OneTruck" in Saira Condensed; the mark carries the only color. Clear space ≈ the badge's corner radius.
"Run the whole business from your pocket." — set as the login hero. Plain, confident, working-class; fits the one-phone-in-the-field reality of the ICP. The growth line "Every business starts with one truck." rides quietly as the rail-footer signature.
Not terminal-native dark and not SaaS-cream — a physical-world steel-and-PPE register grounded in the buyer's truck. No gradient text, no glassmorphism, no eyebrow on every section, no hero-metric template, no side-stripe borders. The one decorative device (the hazard stripe) is a deliberate brand signal, used once.