// RoadHand · Iron Asphalt

Design system.

The design record, as exported: every card the system is described by, grouped as the record groups them, and the web UI kit built from the same tokens. Dark mode only, 0px corners, caution stripes, HiVis orange on asphalt. Sample data is fictional.

Brand

Logo · wordmarkROADHAND.APP — orange + bone, Space Grotesk 900

Colors

Primary · HiVis OrangeThe signature accent — orange-on-asphalt
Semantic colorsSafe / Caution / Danger — strip-applied status
SurfacesSix tonal dark layers — depth without shadows
Text colorsBone-on-asphalt — never pure white

Components

Badges & chipsStatus pills + data-source tags
ButtonsPrimary / Outlined / Secondary / Ghost
Cards · accented6px left-strip status variants
FormsInputs · filter chips
List rowsPlace result + hazard advisory
Nav barCaution-stripe + primary border-bottom
Road Score gaugeSignature contractor-score module

Spacing

Caution stripeSignature 45° hazard divider
Corner radii0px everywhere — pill is the escape hatch
Hard-stamp shadowSharp offset, 0 blur — never soft
Spacing scale4px base · sp-1 through sp-24

Type

Body typeInter · 17/14 · text-wrap pretty
Display headlineSpace Grotesk 900 · −0.04em · UPPERCASE
Eyebrow & mono// MODULE labels + JetBrains Mono
Big metricOversized hero stats — brand mannerism
Type scaleDisplay, headings — tight tracking

UI Kit — Web

RoadHand Web UI KitHomepage · contractor detail · dashboard — click nav to switchOpen full screen →