The single source of visual truth for the Mike O’Dell Surveys operations platform — the color system,
typography, spacing, components, and the domain-specific status & role language that every
screen is built from. A dark, focused navy/blue interface engineered for crews working in
bright trucks and offices working on big monitors.
Theme · Dark NavyAccent · Brand BlueFor · Next.js + Tailwind + shadcn/uiWCAG · 2.1 AA target
01
Design principles
The non-negotiables that keep the product feeling like one coherent tool, not a pile of screens.
Mobile-first for the field, desktop-rich for the office. The same system scales from a 360px phone in a truck to a 1920px office monitor.
Calm, dark, low-glare. A deep navy canvas reduces eye strain on long shifts and lets job status colors pop.
One source of truth. One type scale, one spacing scale, one color system, one component kit — encoded as design tokens.
Four states, always. Every screen handles loading (skeleton), empty (guidance), error (recoverable), and populated.
02
Color
A navy-and-slate foundation with a single confident blue for action. Semantic colors are reserved strictly for meaning — never decoration.
Surfaces & structure
Backdrop#0A1120--bg
Surface#0F1A2E--surface
Panel#15233D--panel
Elevated#1C2E4D--panel-2
Border#25375A--border
Border strong#36507E--border-2
Brand blue
Blue deep#1D4ED8--blue-deep
Blue (primary)#3B82F6--blue
Blue bright#60A5FA--blue-bright
Blue soft fill#1E3A8A--blue-soft
Text
Primary#EAF1FB--text
Secondary#9DB0CC--text-dim
Muted / meta#64748B--text-muted
Semantic
Success#34D399--success
Warning#FBBF24--warning
Danger#F87171--danger
Info#38BDF8--info
Accent#A78BFA--violet
03
Typography
A serif for editorial moments (marketing, dashboards headers), a clean system sans for the working UI, and mono for data, codes, and timestamps.
Every job, one place
Display · Serif46 / 1.08 / 500
Today's assignments
Heading 1 · Serif32 / 1.2 / 500
Job #2024-0481 — Boundary Survey
Heading 2 · Sans22 / 1.3 / 600
Review milestones, assign crews, and surface blockers before they cascade.
Body · Sans16 / 1.6 / 400
Uploaded by M. Reyes · 2 hours ago · 4.2 MB
Small · Sans14 / 1.5 / 400
JOB-2024-0481 · 39.7392°N, 104.9903°W
Mono · Data13 / 1.5 / 400
04
Spacing
A 4px base scale. Generous by default — density is opt-in for data tables, never the resting state.
4sp-1
8sp-2
12sp-3
16sp-4
24sp-5
32sp-6
48sp-7
64sp-8
05
Radius & surfaces
Soft, modern corners and a flat surface system. This UI uses no shadows or gradients — depth comes only from solid fills and 1px borders.
Corner radius
5pxr-xs · pills/inputs
9pxr-sm · buttons/rows
14pxr-md · cards
22pxr-lg · modals
Surfaces
backdrop--bg
panel--panel · 1px border
elevated--panel-2 · 1px border
06
Core components
The shared kit, built on shadcn/ui primitives. Same components everywhere — Jobs, Employees, Equipment, Reports.
<Button />
<Input />
<Checkbox />
<Badge />
DraftIn reviewSyncedLicense expiringOverdue
07
Job status language
The four-state job lifecycle is the spine of the platform. These pills appear identically on dashboards, tables, the dispatch board, and the client portal — one color per state, everywhere.
Assigned
Job created and crew assigned, not yet started. The default landing state.
In Progress
Crew is actively on site. Live on field dashboards and the dispatch board.
Waiting
Blocked — pending client, permit, weather, or office input. Surfaces in alerts.
Completed
Field work done and signed off. Moves into reporting and invoicing.
08
Role color coding
Four roles, four accent hues — used on avatars, assignment chips, and the dispatch board so it's instantly clear who is who. Access is enforced on the server; color is just the visual cue.