SkyCanvass · Design System
Forensic interfaces
for storm-damage work.
A token-driven system for building evidence-grade tools across canvassing, supplements, and compliance. Built around precision, calm authority, and field-ready density.
Pillars
Four principles that resolve every design decision when in doubt.
Forensic precision
Every datum cites its source. No ambiguity, no lost context.
Field-ready density
Built for adjusters, estimators, and crews — not marketing decks. Information first.
Calm authority
Restrained color, technical typography. The product earns trust by feeling official.
Token-driven
Two CSS files theme the entire system. Brand changes, dark mode, and density are switches.
Foundations
The atomic decisions every component inherits.
Color
Sky-blue 11-step brand scale, slate neutrals, semantic feedback, hail intensities.
Typography
System sans for UI, ui-monospace for forensic data. 8-step scale, 4 weights.
Spacing & layout
4px base. 12-step scale. Container widths, density modes, grid presets.
Radii & elevation
Subtle 6px default. Five elevation levels for layering and focus.
Motion
Five durations, three easing curves. Always purposeful, never decorative.
Iconography
Lucide. 16/20/24px. 2px stroke, rounded caps. Domain glyphs ride alongside.
Components & patterns
12 core components and 7 domain patterns. Each documented with anatomy, tokens, states, and do/don't.
Buttons
5 variants × 4 sizes × all states. Icon-only and link variants included.
Form inputs
Text, textarea, select, checkbox, radio, toggle. With labels and validation.
Tables
Forensic data grids. Tabular numerics, sticky headers, hover, selection.
Property card
Address + parcel data. The atomic unit of every canvass list.
Code citation
Section reference + quote + jurisdiction provenance.
Hail map legend
5-step intensity scale, calibrated for radar overlays.
Using the system
Two stylesheets. Drop them into any HTML file in this project.
<!-- Foundations: tokens, theme, layout --> <link rel="stylesheet" href="design-system/tokens.css"/> <!-- Components: buttons, inputs, cards, etc. --> <link rel="stylesheet" href="design-system/components.css"/> <!-- Toggle dark mode --> <html data-theme="dark">