ServiceResQ Design System
Density
First-Responder identity · rescue crimson #C8102E + graphite #141821 · Archivo + Inter · 3–4px rectangular radii · tight spacing
01

Color

Reference var(--token) everywhere — never hardcode a hex.

Rescue Crimson — brand primary

50#FFF1F2
100#FFE0E2
200#FCC5C9
300#F79AA1
400#EE5C68
500#DD2435
600 ·primary#C8102E
700#A60D26
800#850B1F
900#5F0815

Graphite — neutrals & dark chrome

50#F5F7FA
100#ECEFF3
200#DCE1E8
300#BCC4D0
400#8C95A4
500#626B7B
600#464E5C
700#2F3641
900 ·nav#141821
950#0B0E14

Signal Amber + Semantic intents

Amber
#F5A524accent · sparingly
Success
#15924Bbg #ECFDF3
Warning
#D9870Bbg #FFFAEB
Danger
#DC2626distinct from brand
Info
#2E78C7bg #EFF6FF
02

Typography

Archivo for display + numerals; Inter for body & UI.

On time, every time.
Display · Archivo
800 · 700 · 600
Body · Inter
Regular 400 · Medium 500 · Semibold 600 · Bold 700
Numerals
1,248 · $86,400 · 98.2%
03

Buttons

04

Inputs & status

Inputs
A store is required.
Status pills work-order lifecycle
Open Scheduled In progress Complete Invoiced Cancelled Draft
Neutral SS Filter
05

Cards, KPIs & alerts

Open work orders
38
▲ 6 vs last week
Completed (MTD)
214
▲ 12%
Avg. response
4.2h
SLA 6h
Invoiced (MTD)
$86.4k
▲ 8%
Standard card

Subtle border, soft elevation, 4px radius — the workhorse surface.

Branded header

Crimson gradient header for brand moments — used sparingly.

Alerts
Heads up — 3 stores have standing issues to bundle.
Overdue — Invoice #884 is 12 days past due.
06

Data table & app shell

FacilityResQ / Work Orders
Work Orders
All
Open
Scheduled
Completed
WO #StoreIssueChannelStatus
#1042Outback #1180HVAC — no cooling, dining roomServiceChannelIn progress
#1041Carrabba's #214Hydrojetting — quarterly PMRecurringScheduled
#1039Bonefish #77Ceiling tile replacement (24 ct)PhoneOpen
#1036Firehouse #903Light fixtures — 6 outEmailComplete

No estimates yet

Start a site-walk takeoff or build an estimate from a work order.

07

Foundations

Radius — rectangular
3px 4px pill 3px
Elevation
sm md lg
Spacing — tight 4px grid