---
version: alpha
name: Hushed Sentinel
description: Dark-first security UI with lichen-gold actions, green-tinted slate surfaces and a calm type rhythm for long monitoring shifts.
colors:
  background: "#f4f5f1"
  foreground: "#121510"
  card: "#ffffff"
  card-foreground: "#121510"
  popover: "#ffffff"
  popover-foreground: "#121510"
  primary: "#776310"
  primary-foreground: "#ffffff"
  secondary: "#e6e8e2"
  secondary-foreground: "#1f241e"
  muted: "#e6e8e2"
  muted-foreground: "#454c43"
  accent: "#f5efc9"
  accent-foreground: "#413510"
  destructive: "#c02d56"
  destructive-foreground: "#ffffff"
  success: "#16683d"
  success-foreground: "#ffffff"
  warning: "#f6cc8f"
  warning-foreground: "#3e2700"
  border: "#cfd3cb"
  input: "#b1b7ad"
  ring: "#957f12"
  dark-background: "#121510"
  dark-foreground: "#f4f5f1"
  dark-card: "#1a1e19"
  dark-card-foreground: "#f4f5f1"
  dark-popover: "#1f241e"
  dark-popover-foreground: "#f4f5f1"
  dark-primary: "#c9b441"
  dark-primary-foreground: "#2a2108"
  dark-secondary: "#30362f"
  dark-secondary-foreground: "#e6e8e2"
  dark-muted: "#30362f"
  dark-muted-foreground: "#b1b7ad"
  dark-accent: "#413510"
  dark-accent-foreground: "#f5efc9"
  dark-destructive: "#f66e89"
  dark-destructive-foreground: "#390011"
  dark-success: "#65b683"
  dark-success-foreground: "#00220f"
  dark-warning: "#d09034"
  dark-warning-foreground: "#261700"
  dark-border: "#30362f"
  dark-input: "#454c43"
  dark-ring: "#c9b441"
typography:
  display-lg:
    fontFamily: Archivo
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.08
    letterSpacing: -0.03em
  display-md:
    fontFamily: Archivo
    fontSize: 39px
    fontWeight: 600
    lineHeight: 1.12
    letterSpacing: -0.024em
  heading-lg:
    fontFamily: Archivo
    fontSize: 31px
    fontWeight: 600
    lineHeight: 1.18
    letterSpacing: -0.018em
  heading-md:
    fontFamily: Archivo
    fontSize: 25px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.012em
  heading-sm:
    fontFamily: Archivo
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.35
    letterSpacing: -0.006em
  body-lg:
    fontFamily: Archivo
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
  body-md:
    fontFamily: Archivo
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
  body-sm:
    fontFamily: Archivo
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.002em
  label:
    fontFamily: Archivo
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0.005em
  caption:
    fontFamily: Archivo
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.012em
  code:
    fontFamily: Space Mono
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  button-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 12px
    height: 40px
  card:
    backgroundColor: "{colors.card}"
    textColor: "{colors.card-foreground}"
    rounded: "{rounded.lg}"
    padding: 24px
  popover:
    backgroundColor: "{colors.popover}"
    textColor: "{colors.popover-foreground}"
    rounded: "{rounded.lg}"
    padding: 12px
  helper-text:
    backgroundColor: "{colors.background}"
    textColor: "{colors.muted-foreground}"
    typography: "{typography.body-sm}"
  table-row-alt:
    backgroundColor: "{colors.muted}"
    textColor: "{colors.muted-foreground}"
    typography: "{typography.body-sm}"
    height: 44px
  badge:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.accent-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 22px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 22px
  badge-warning:
    backgroundColor: "{colors.warning}"
    textColor: "{colors.warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 22px
  badge-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 22px
  button-primary-dark:
    backgroundColor: "{colors.dark-primary}"
    textColor: "{colors.dark-primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  button-secondary-dark:
    backgroundColor: "{colors.dark-secondary}"
    textColor: "{colors.dark-secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  button-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  input-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 12px
    height: 40px
  card-dark:
    backgroundColor: "{colors.dark-card}"
    textColor: "{colors.dark-card-foreground}"
    rounded: "{rounded.lg}"
    padding: 24px
  popover-dark:
    backgroundColor: "{colors.dark-popover}"
    textColor: "{colors.dark-popover-foreground}"
    rounded: "{rounded.lg}"
    padding: 12px
  helper-text-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-muted-foreground}"
    typography: "{typography.body-sm}"
  table-row-alt-dark:
    backgroundColor: "{colors.dark-muted}"
    textColor: "{colors.dark-muted-foreground}"
    typography: "{typography.body-sm}"
    height: 44px
  badge-dark:
    backgroundColor: "{colors.dark-accent}"
    textColor: "{colors.dark-accent-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 22px
  badge-success-dark:
    backgroundColor: "{colors.dark-success}"
    textColor: "{colors.dark-success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 22px
  badge-warning-dark:
    backgroundColor: "{colors.dark-warning}"
    textColor: "{colors.dark-warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 22px
  badge-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 22px
---

# 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.

Moods: calm, organic, vigilant, grounded. Built for: cybersecurity, infrastructure, developer-tools. Density: comfortable.

Every color has a light value and a dark value. Tokens named `dark-*` are the dark-mode counterparts of the token with the same role name.

## Colors

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.

- **Primary** `#776310` / dark `#c9b441`: the single action color. Primary buttons, links, focus ring.
- **Background / Foreground** `#f4f5f1` / dark `#121510` on `#121510` / dark `#f4f5f1`: page surface and body text.
- **Card** `#ffffff` / dark `#1a1e19`: raised surfaces.
- **Secondary** `#e6e8e2` / dark `#30362f`: secondary buttons and quiet controls.
- **Muted** `#e6e8e2` / dark `#30362f` with **muted-foreground** `#454c43` / dark `#b1b7ad`: helper text, table stripes, disabled-looking surfaces.
- **Accent** `#f5efc9` / dark `#413510`: highlights, selected rows, badges.
- **Destructive** `#c02d56` / dark `#f66e89`, **Success** `#16683d` / dark `#65b683`, **Warning** `#f6cc8f` / dark `#d09034`: status only, always paired with an icon or label.
- **Border** `#cfd3cb` / dark `#30362f`, **Input** `#b1b7ad` / dark `#454c43`, **Ring** `#957f12` / dark `#c9b441`.

All text/background pairs above pass WCAG AA (4.5:1) in both modes; this is checked automatically at build time.

## 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.

- Display: **Archivo** (fallback system-ui, sans-serif)
- Interface: **Archivo** (fallback system-ui, sans-serif)
- Mono: **Space Mono** (fallback ui-monospace, monospace)

| Token | Font | Size | Line height | Weight |
|---|---|---|---|---|
| display-lg | Archivo | 48px | 1.08 | 700 |
| display-md | Archivo | 39px | 1.12 | 600 |
| heading-lg | Archivo | 31px | 1.18 | 600 |
| heading-md | Archivo | 25px | 1.25 | 600 |
| heading-sm | Archivo | 20px | 1.35 | 600 |
| body-lg | Archivo | 18px | 1.6 | 400 |
| body-md | Archivo | 16px | 1.55 | 400 |
| body-sm | Archivo | 14px | 1.5 | 400 |
| label | Archivo | 14px | 1.25 | 500 |
| caption | Archivo | 12px | 1.4 | 500 |
| code | Space Mono | 14px | 1.5 | 400 |

## 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).

Spacing uses a 4px base: xs = 4px, sm = 8px, md = 16px, lg = 24px, xl = 32px, 2xl = 48px, 3xl = 64px.

## Elevation & Depth

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.

- sm: `0 1px 2px rgba(8, 12, 7, 0.35)`
- md: `0 6px 16px -4px rgba(8, 12, 7, 0.50)`
- lg: `0 20px 44px -10px rgba(8, 12, 7, 0.60)`

## 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.

Radius scale: sm 4px, md 8px, lg 12px, xl 16px, full 9999px.

## Components

Components ending in `-dark` are the dark-mode versions. Button: 40px tall, 16px horizontal padding, label type. Input: 40px tall with a 1px input-colored border; focus shows a 2px ring in the ring color. Card: 24px padding, 1px border, sm shadow. Badge: pill, caption type.

## Do's and Don'ts

- **Do:** Use the primary button (lichen) for exactly one main action per view. Use secondary or ghost variants for every other action.
- **Do:** Set IP addresses, hashes and rule IDs in Space Mono at typography.code (14px) and keep them left-aligned in table cells.
- **Do:** Pair every severity color (destructive, warning, success) with an icon and a text label in badges and table cells.
- **Do:** Build and review every new component in dark mode first, on background (neutral.950), card (#1a1e19) and popover (neutral.900).
- **Do:** Keep table rows at least 44px tall and separate them with a 1px border token, not shadows.
- **Do:** 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:** Don't use #000000 or untinted grey for any surface, text or border. Pick from the neutral ramp.
- **Don't:** 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:** Don't apply shadow.md or shadow.lg to cards or table rows. Use them only for popovers, menus and dialogs.
- **Don't:** Don't use Space Mono for prose, labels or button text, or at any weight other than 400 or 700.
- **Don't:** Don't put warning (warning.400) next to the primary button as a second call to action. Keep warning to status badges and banners.