pi
PI-LITConnected roadway safety

Design System

Visual language, reusable components, and interface rules expressing connectivity and safety on the road.

Version 1.0|June 2026|Active

01

Color Palette

A roadside-safety palette: high-visibility amber, confident product emphasis green, and clear roadway asphalt tones.

Brand & Signal

Signal Amber#F28A25 · labels, highlights
Deep Amber#D57F00 · primary actions
Warning Gold#F9A427 · numbering, icons
Roadway Green#009966 · product emphasis
Signal Tint#FFECCF · selected tags
Ambient Amber#F9E8CF · oversized motif

Neutrals & Surfaces

Utility Black#1A1A1A · header CTA
Asphalt#2D2D2D · primary text
Mid Gray#6E6E6E · body copy
Placeholder#C4C4C4 · form hints
Card Surface#F8F8F8 · testimonials
Paper White#FFFFFF · canvas, inputs

02

Typography

One type family creates the hierarchy: Manrope across display headers, editorial body text, and numeric callouts.

Display & body

Manrope

Display headlines, section titles, paragraphs, buttons, metrics, and tab selectors.

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk

Navigation

Manrope

Light and regular weights for navigation items and header utility items.

Aa Bb Cc Dd

Labels & metadata

Manrope

Medium uppercase styling for metadata labels, form headers, and category tags.

Aa Bb Cc Dd

65 / 78Display XL

Road safety, connected.

48 / 54Heading L

Built for every scene.

32 / 40Heading M

Clear direction

24 / 31Heading S

Smart Sequential Road Flares

18 / 20Title

Browse by product type

16 / 28Body L

Connected warning systems for faster, safer emergency scenes

15 / 25Body

PI-LIT helps crews warn earlier and guide drivers clearly.

10 / 12Eyebrow

Recommended products


03

Buttons & Links

An amber primary for high-value conversion, outlined secondaries for supportive pathways, and dark CTAs for header contexts.

Primary
66px height · 8px radius · 26px padding-inline · OKLAB Amber gradient
Primary Medium
50px height · 8px radius · 12px padding-inline · OKLAB Amber gradient
Secondary
Transparent fill · asphalt outline · same geometry as primary
Secondary Medium
Transparent fill · black outline · matches primary medium
Tertiary
66px height · 8px radius · 26px padding-inline · Utility Black background
NAV CTA
51px height · black surface · navigation context only
Icon action
48px minimum target · arrow indicates forward navigation

04

Form Controls & Tags

White fields with subtle gray boundaries, compact uppercase labels, and pill tags to configure options.

Product of interest
SelectedAmber tint + amber border
DefaultWhite + neutral hairline
Shape94px fully rounded radius

05

Icons & Foundations

Simple monoline symbols, generous touch targets, soft product curvatures, and a clear horizontal spacing rhythm.

Spacing rhythm

8 · 16 · 24 · 32 · 48 · 64 (px spacing values)

Radius scale

sm (4px)
md (8px)
lg (12px)
full (94px)
Applied consistently across buttons, input fields, cards, and option pills.