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-yellow stripe.
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." The app header
(shell.html) demonstrates this — OneTruck's steel chrome frames the tenant (Dalton Pressure Washing)
as a small workspace chip; the tenant's color appears only as a 16px brand dot.
onetruck.css — drop-in design tokens + shell primitives (buttons, fields, focus). Import once in the app shell.mark.svg — compact mark (badge + abstract "1"). PWA icon / favicon. Survives 16px.wordmark.svg — horizontal lockup (mark + "OneTruck", Saira Condensed).login.html — login screen reference implementation (the brand moment + form discipline).shell.html — authenticated app-header reference implementation (chrome framing a tenant).onetruck.css for the tokens)Cool asphalt/steel darks so the chrome frames any tenant hue without clashing, one hi-vis accent, tan for warmth.
Distinct from tenants by construction: DPW is navy #1E2A4A / orange #EA7A2B; Summit will be forest/slate.
| 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 |
| Hi-vis accent | --ot-hi |
0.858 0.170 96 | #F4BE0F |
| Work-glove tan | --ot-tan |
0.800 0.050 74 | #D2BC9C |
Accent discipline: hi-vis safety-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. Overusing the yellow is the fast path to "cheap"; restraint is what reads premium. Formality gradient: money surfaces (Pay, statements) most precise; coaching surfaces (playbook, empty states) warmest — the tan appears there ("First truck? Start here").
One engineered family across widths (stamped-steel, DIN-adjacent), deliberately not the tenant's Barlow/Inter so the product reads as its own tool. Tabular figures everywhere money appears.
font-feature-settings: "tnum" (tables align to the penny).--ot-text-*.Compact mark = a machined rounded-square badge in hi-vis amber with an asphalt "1" that sits on a road/flatbed baseline — nods to OneTruck (the "One") without a cartoon truck, and stays legible as a 16–32px favicon on light or dark. Wordmark pairs it with "OneTruck" in Saira Condensed; the mark carries the only color. Minimum clear space ≈ the badge's corner radius on all sides. (For print/embedding, outline the wordmark text — the SVG references the web font.)
"Run the whole business from your pocket." — set as the login hero. It's the value promise in plain, confident, working-class language (no jargon, no "actionable insights"), and it 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 brand signature (it ties to the name + future Solo/Crew/Fleet tiers); the product one-sentence carries the descriptor subline. One hero tagline, no competing lines.
Not terminal-native dark (no monospace/IDE/matrix-green) and not SaaS-cream — it's 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 exactly once.