Hushed Sentinel

About Hushed Sentinel

Overview

Hushed Sentinel is for people who watch security dashboards for hours: SOC analysts, platform engineers and incident responders. Most security tools put neon green or alarm red on black, and the result is that every alert looks urgent. This system is dark-first: a green-black canvas (neutral.950), a lichen-gold primary (brand.400 in dark, brand.700 in light), and quiet surfaces. Only destructive, warning and success carry strong color, so real threats are the only things that stand out.

Color

Lichen is a yellow-olive gold (OKLCH hue about 95 to 100). It carries every primary action, focus ring and selected state. Neutrals are slates tinted slightly green so they sit next to lichen without going grey. Pure black and pure grey are never used. Destructive is a crimson-magenta at about OKLCH hue 5. It sits roughly 90 degrees from lichen, with ΔE00 above 40 in both modes, so a blocked host or a deleted rule is never mistaken for a routine action. Warning is shifted toward orange (hue about 65) so warning.400 does not compete with brand.400. Success is a leaf green with softened 50 to 200 tints so it stays in the same warm, organic family. In dark mode the card (#1a1e19) sits one small step above the background (neutral.950), and popovers use neutral.900. In both modes, every foreground pair measures at least 5:1 against its surface, and muted-foreground measures at least 6:1 on muted.

Typography

Archivo is the only family for display and interface text. Its sturdy, slightly condensed shapes work for incident titles and for dense tables. The scale uses a 1.25 ratio from a 16px body: 20, 25, 31, 39, 48. Smaller steps are 14 and 12. Display styles use weights 600 and 700, with letterSpacing tightened from -0.01 at 20px to -0.03 at 48px. Body text uses a line height of 1.5 to 1.6. Space Mono is used only for IP addresses, hashes, rule IDs and log lines, at 400 or 700, the only weights it ships.

Layout

Comfortable density on a 4px base grid. Content columns are at most 1280px wide. Table rows are 44px tall, so log lines stay readable without wrapping. Panels are separated by space.8 (32px) or space.10 (40px). Card padding is space.6 (24px).

Elevation

Depth comes mainly from tonal surface steps (background, then card, then popover) rather than from shadows. Cards use a 1px border token and at most shadow.sm. Shadow.md and shadow.lg are only for popovers, menus and modal dialogs, so overlays clearly float above the monitoring surface.

Shapes

Rounding is soft and slightly organic. Controls use radius.md (8px), cards use radius.lg (12px), and radius.full is only for status badges. Interactive elements never use radius.none, which keeps the tone approachable rather than militaristic.

Do

• Use the primary button (lichen) for exactly one main action per view. Use secondary or ghost variants for every other action.
• Set IP addresses, hashes and rule IDs in Space Mono at typography.code (14px) and keep them left-aligned in table cells.
• Pair every severity color (destructive, warning, success) with an icon and a text label in badges and table cells.
• Build and review every new component in dark mode first, on background (neutral.950), card (#1a1e19) and popover (neutral.900).
• Keep table rows at least 44px tall and separate them with a 1px border token, not shadows.
• Show focus with a 2px ring token outline offset by 2px on buttons, inputs and table rows.

Don’t

• Don't use primary or accent for errors, blocked hosts or critical threats. Use destructive for those.
• Don't use #000000 or untinted grey for any surface, text or border. Pick from the neutral ramp.
• Don't set display-font styles below heading-md (25px), and don't use weights other than 600 and 700 for display text.
• Don't apply shadow.md or shadow.lg to cards or table rows. Use them only for popovers, menus and dialogs.
• Don't use Space Mono for prose, labels or button text, or at any weight other than 400 or 700.
• Don't put warning (warning.400) next to the primary button as a second call to action. Keep warning to status badges and banners.