■ Spark UI — Component Preview
spark-reach accent
☀ Light mode
Colour tokens
--spark-bg
#1a1a1a / #f5f5f5
--spark-surface
#242424 / #ffffff
--spark-card
#2e2e2e / #ffffff
--spark-border
#3a3a3a / #e0e0e0
--spark-success
#4ade80 / #16a34a
--spark-warning
#fbbf24 / #d97706
--spark-danger
#f87171 / #dc2626
--spark-info
#60a5fa / #2563eb
--tool-accent
per-tool override
Badges
success
warning
danger
info
accent
Status pills
UP
DOWN
HIGH
MEDIUM
LOW
ONLINE
OFFLINE
Buttons
Default
Accent
Danger
Disabled
Cards & Surfaces
spark-card
Border-radius 10px, padding 1.25rem. Default card container for content blocks.
active
last updated 10s ago
spark-surface
Border-radius 8px, padding 1rem. Lighter than card — for panels inside cards.
Table
Service
Status
Response
Last checked
ovrsight
UP
14ms
12:04:01
spark-reach
UP
89ms
12:04:01
ollama
DOWN
—
12:04:01
Inputs
Text input
Select
df -h
free -h
uptime
Tool accent reference
Tool
Accent
Preview
spark (dashboard)
#e8e8e8
spark-reach
#3b82f6
spark-security
#ef4444
spark-devices
#14b8a6
spark-xero-rec
#22c55e
ovrsight
#f59e0b
pocket-spark
#a855f7
spark-historian
#f97316