Graphite Elevate: Design System for Evidence
The foundations of the Evidence brand - color, type, space, shape, and the components built from them. Use the switches above to compare today's brand against the Elevate direction, one aspect at a time; each switch's info icon explains exactly what it changes.
One accent on a neutral foundation
A single accent color carries every primary action and highlight. A neutral ramp does the structural work - text, surfaces, lines - and a small semantic set signals success, warning, and error. Nothing decorative competes with the content.
Every bright has its dark
Text on a bright surface always uses its paired dark from the same family - never slate, never translucent. Maximum legibility, on-brand contrast.
against
#86EFAC
against
#C2E9FF
against
#FFD3E7
against
#FFCE8F
against
#FAE580
Hierarchy through scale and weight
A display treatment carries headlines and big numbers; a workhorse face handles body, labels, and data. Size and weight set the hierarchy, and tabular figures keep numbers aligned.
Three levels of action
One clear primary action per view, a quieter secondary, and a minimal tertiary. Buttons are interactive controls - they never carry status.
Badges label state, they don't act
Badges and tags mark state - active, healthy, warning, critical. They are not interactive and are never styled as buttons. Different purpose, different shape.
Surfaces that group content
Cards gather related content onto their own surface, set apart from the page by a border or a fill. The container frames; the content leads.
Proof, not noise
Every finding ships with evidence of real-world financial impact - not a CVSS guess.
Insurer-grade
Detections derive from actuarial loss data. If it never caused a payout, it's not a FIRE.
Fix what's real
Less than 1% of vulnerabilities actually matter. We find the ones that do.
| Asset | Status | FIREs | Risk |
|---|---|---|---|
| api.acme.com | Healthy | 0 | 12 |
| portal.acme.com | Warning | 2 | 48 |
| mail.acme.com | Critical | 5 | 94 |
Fields that read as fields
Form inputs are clearly bounded and comfortably sized, paired with a verb-first action and a visible focus state.
Built for breathing room
A small, fixed set of spacing tokens creates rhythm and breathing room. Reusing the same steps everywhere keeps every gap deliberate.
One radius scale
Corners follow a single radius scale, applied consistently from small chrome up to cards and full pills.
A simple, familiar icon language
Lucide icons - one geometric style at a consistent stroke. Two sizes: 24px for standard UI, 16px for dense layouts.
A signature moment
An inverted band - the accent on the darkest neutral - reserved for the loudest moments. Used sparingly, it carries weight.
See what's real
A content band that inverts the palette: Evidence green on near-black ink, used sparingly for the biggest moments.
Three breakpoints, one rhythm
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | < 768px | Hero stacks; grids 1-up |
| Tablet | 768-1023px | Grids 2-up |
| Desktop | ≥ 1024px | Hero split; full grids |
Pricing tiers
A standard pricing layout; the featured tier is lifted onto the darkest surface to draw the eye.
- External perimeter scan
- FIRE report
- Email alerts
- Everything in Starter
- Recurring scans
- Role-based access
- REST API
- Everything in Team
- Financial impact report
- $1M warranty
Specific, editorial, numbers-first
- Statements, not marketing. "Fix what's real."
- Sentence case for everything human-readable. No all-caps for body or headings.
- Numbers are first-class - tabular, exact, unrounded as a credibility signal.
- No emoji, no hype, no decorative punctuation. Precise, consistent product terms.
The Evidence mark
The full wordmark and the standalone graphic mark, on light and dark surfaces.
Local preview · brand guidelines · selections persist and encode in the URL for sharing.
Web
rootevidence.com. To be built from the marketing copy you provide - we'll apply the brand (and any active recipe) to real page sections here.
App
app.rootevidence.com. To be built from real product screens - dashboards, asset tables, FIRE detail - with the active recipe applied.
Presentations
Slide templates. To be built from real deck content, with the active recipe applied.