Open Source · Design System
Case File
SentinelDS.
An open-source, enterprise-grade design system purpose-built for security operations. Tokens, components, and patterns tuned for SOC analysts working high-stakes, data-dense interfaces.
Severity Scale — 5 Levels
Live Components
Severity Scale — 5 Levels
Live Components
Security UI is still a mess.
Most SOC dashboards look like they were assembled by whichever engineer was free that sprint. Inconsistent severity colors. Unreadable typography under fluorescent lights. Modals that don't dismiss on Escape because nobody had time.
Analysts are working at 3am with stakes attached to every click. They deserve interfaces designed for that reality — not generic Material clones.
- —No shared visual language across security tools
- —Severity colors invented per-team, often contradictory
- —Accessibility treated as an afterthought
- —Components rebuilt from scratch every project
A drop-in React system.
Sentinel ships as a single self-contained React file (~1,000 LOC) with CSS-variable theming. Drop it into any project, get a full security UI vocabulary on day one.
Built from the analyst's perspective — every token, every interaction, every component decision answers the question: does this help me triage faster?
5-Level Severity Scale
Critical / High / Medium / Low / Info — color, weight, and motion all carry meaning. Tested for color-blindness as part of the AA pass.
Dual Themes
Dark by default (SOC reality). Light variant for client-facing reports. Both share the same token system — no parallel design files.
15+ Components
Buttons, alerts, severity indicators, data tables, KPI cards, sidebars, modals, progress bars. All keyboard-navigable, all ARIA-correct.
Accessibility built in
AA contrast everywhere. Focus indicators that survive at-glance. ESC closes overlays. Screen-reader announcements for live alerts.
The system, live.
Severity Scale — 5 Levels
Live Components
— Severity scale, KPI cards, alert pattern, action buttons. Real tokens, rendered live.
What shipped.
“Most design systems try to be everything to everyone. Sentinel picks one job — security UI — and does it ruthlessly well.”
— Up next
Binns Media Group
Need something like this for your product?
Want a private design system tuned to your product's reality — tokens, components, documentation, the works? Let's build it.