sentinel-health / src/styles/tokens.css

Atoms to Application

Components of the Sentinel Health Design System - every value below is the real token running in production.

268 semantic tokens
React 18 · Tailwind · CSS custom properties

Anatomy - real classes

text-sm font-medium · Inter 14/500 px-3 rounded · 4px py-1.5 · 6px 12px bg-primary-blue · #2374E1

focus: ring-2 · ring-offset-0 · outline-none · ring color per variant

Button components · src/components/Button.tsx

Variant
Default
Hover
Disabled
Primaryapprove · save
bg-primary-blue/90
Secondaryconnect · alt action
bg-accent-cyan/20
Outlinecancel · reset
bg-secondary
Dangerdelete · destructive
bg-status-critical/90
Ghostinline · subtle
bg-secondary/50 · text-white
SIZES px-2 py-1 · text-xs 12px px-3 py-1.5 · text-sm 14px px-4 py-2 · text-base 16px

Inputs · src/components/Input.tsx

default · border-secondary #4B5563

focus · border-accent-cyan + outline-2

Invalid API key format - variant="error" · role="alert"

Status badges · src/components/ui/Badge.tsx

Healthy Warning Critical Info Offline Default

text-body-3-semibold 11/600 · px-3 py-xs · rounded-full · border-[0.5px] · role="status" · animate-pulse on warning/critical/offline

Card · .card - components.css

CPU Temperature Critical
87°C
ZimaBoard2 · critical since 14:32 - auto-remediation running

bg-secondary #1C2634 · --radius-md 10px · p = --spacing-lg 16px · title 16/500 · value 32/700 · desc 12 muted