.png)
Open Source · Design System
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.
What they came with.
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
What I shipped.
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 work.
Sentinel DS — severity scale & SOC alert pattern
What shipped.
“Most design systems try to be everything to everyone. Sentinel picks one job — security UI — and does it ruthlessly well.”
