Fortely
Design System
v1.0
Monitoring Platform
A calm, legible system for high-signal data
Fortely surfaces uptime, Core Web Vitals, incidents and certificates without overwhelming the operator. Warm neutrals keep dashboards restful; a single amber accent and disciplined semantic colors carry every signal that matters.
01
Color
One brand hue, a warm neutral ramp, and four semantic colors. Semantic colors map directly to monitoring states — never decorative.
Brand · Amber
50
#e3fcf1
100
#c3f7e0
200
#8ff0c8
300
#5de8b0
400
#2fe29c
500
#00e28a
600
#00c278
700
#009d62
800
#0a7a4d
Warm neutrals
Canvas
#f8f7f3
Surface
#ffffff
Subtle
#f2f1ec
Border
#eae8e1
Strong
#dcd9cf
Muted
#97958c
Body
#6b6a63
Ink
#1c1b18
Semantic · Monitoring states
02
Typography
Plus Jakarta Sans for interface and prose; JetBrains Mono for every metric, timestamp and identifier — tabular figures keep dense tables aligned.
Interface / Prose
Plus Jakarta Sans
400 · 500 · 600 · 700 · 800
Data / Numerics
JetBrains Mono
99.98% · 284ms · 0.06
03
Radius, elevation & space
Soft corners and near-invisible shadows keep the surface quiet. Elevation is used sparingly — only overlays truly lift off the page.
Radius
8
10
14
pill
Elevation
card
raised
overlay
Space · 4px base
4
8
16
24
40
04
Components
The building blocks used across the admin app and every site dashboard.
Buttons
Status badges
Web Vitals rating
Threshold bar with p75 marker — green / amber / red follow Google's official cutoffs.
0
2.5s
4.0s+
Forms
Segmented control & tabs
Navigation item
Metric card & data row
KPI card with delta chip, and the list row used in incident and region tables.
Uptime
99.98%
vs 30d
Elevated INP on /checkout
p75 crossed the 200 ms threshold
2h ago
5xx error spike on /api/cart
Peaked at 4.2% error rate
Yesterday