The system behind LiveWire's fleet dashboard. One dark glass surface, one coral accent, depth built from blur and light instead of borders — every token, control, and pattern the product actually ships with, in one place.
Color, radius, typography, and the glass elevation recipe everything else is built from.
Buttons, chips, pill selects, and the fluid morphing tab bar.
The hover-to-expand sidebar, favorites items, and table pagination.
KPI cards, status pills, ring gauges, charts, the fault map, tables and lists.
The login sequence states, hint tooltips, and the favorites empty state.
The raw tokens. Everything downstream — every card, chip, and chart color — pulls from this set. Nothing in the product uses a color, radius, or font that isn't listed here.
Amber is the only brand color. Cyan, violet, red, and green are semantic — they mean something specific (info, tertiary data, fault, healthy) and never get used decoratively.
Two typefaces, split by job: Space Grotesk carries every word a person reads — titles, labels, copy. JetBrains Mono is reserved for numbers and machine identifiers, so telemetry always reads like telemetry.
Every surface in the product is the same recipe: a soft diagonal light gradient over a near-opaque dark base, blurred and saturated, with a single hairline of inner highlight along the top edge. No borders, anywhere — depth comes entirely from blur and shadow.
background: linear-gradient(155deg, rgba(255,255,255,.075), rgba(255,255,255,.02)), rgba(9,10,13,.58);
backdrop-filter: blur(30px) saturate(150%);
box-shadow: 0 20px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07);
Everything a person clicks, types into, or toggles.
The pill measures the clicked button's own box and slides/resizes to match — try it. The star reveals on hover and stays lit once a tab is favorited.
The telemetry itself — numbers, states, charts, and the fault map. This is most of the surface area of the product.
| TCUID | Date | Security | Range |
|---|---|---|---|
| 353915080106927 | 08/09/2021 | Armed | 255,456 |
| 15542000002638 | 02/20/2021 | Alarm | 175,118 |
The login sequence, its hint tooltips, and what an empty screen looks like before someone's pinned anything.
Hover any tab up top and tap the star to pin it here for quick access.