name: sentinel-design
version: alpha
description: >
  A pitch-black threat-intelligence command console (NYX//OPS) rendered as a
  single dense, full-bleed dashboard with zero scroll. The surface is near-black
  obsidian (`#060608`) overlaid with CRT scanlines and a radial vignette; every
  panel is divided by 1px hairlines (`#2a2c33`) in a strict 12-column grid. Four
  signal "voltages" — toxic green (`#39FF88`), hot magenta (`#FF2D9B`), cyan
  (`#34D1E8`), amber (`#FFB400`) — encode severity across a live seismograph,
  a stippled world map, a streaming event feed, analyst bulletins, ring gauges,
  and a marquee ticker. Type is a three-face system: Space Grotesk for tight
  display labels, JetBrains Mono for all data/telemetry, Inter for prose. Geometry
  is uncompromisingly sharp — radius 0 everywhere except tiny status dots.
colors:
  # Surface
  obsidian: '#060608'      # page background, terminal popover fill
  obsidian-2: '#0c0c10'    # raised rows / column-head bands / hover fill
  panel-bar: '#08080b'     # top bar, ticker, channel-label backdrop
  feed-hairline: '#15161b' # ultra-faint event-feed row divider
  grid-faint: '#1a1c22'    # faintest seismograph vertical grid lines
  # Brand / Voltages (severity signals)
  green: '#39FF88'         # primary brand/voltage: NYX//OPS mark, LINK ACTIVE, INFO, nominal
  magenta: '#FF2D9B'       # critical/threat: section indices, CRIT events, hot map markers
  cyan: '#34D1E8'          # info/telemetry: UTC clock, timestamps, analyst handles
  amber: '#FFB400'         # warning: WARN events, rising metrics, op countdowns
  # Text
  white: '#ffffff'         # headings, key values, emphasized data
  fog: '#8A8F99'           # body text, labels, muted metadata
  fog-2: '#2a2c33'         # hairline borders, dividers, gauge tracks

Sentinel

sentinel-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles, Tailwind arbitrary values, and :root custom properties. Fictional/sample product; described factually.

Overview

Sentinel ("NYX//OPS") is a fictional threat-intelligence command console built as one fixed-height, overflow-hidden page that fills the viewport with no scrolling (except the bulletins column). The surface is obsidian #060608 wrapped in a .scanlines layer — a repeating-linear-gradient of 1px white lines at 3% opacity plus a radial vignette darkening to rgba(0,0,0,0.6) at the edges — giving the whole screen a CRT/phosphor feel. Structure is rigid: a 36px top status bar, a section header, a full-width 8-channel SVG "seismograph", a 12-column middle grid (map+ops / event feed / bulletins), a row of four ring gauges, and a scrolling marquee ticker — all separated by 1px #2a2c33 hairlines and dotted with .dot-grid (14px radial-dot texture). The palette is four neon "voltages" against fog-grey text: green #39FF88 (primary mark, nominal/info), magenta #FF2D9B (critical/threat), cyan #34D1E8 (telemetry/timestamps), amber #FFB400 (warning). Typography is a disciplined three-face system — Space Grotesk for tight tracked display labels, JetBrains Mono for every number, hash, and stream row, and Inter for the small amount of bulletin prose. Everything is small (base text 11px) and corner brackets, pulsing dots, and a live event stream complete the ops-room theatre.

Colors

Surface. The page background is obsidian #060608. Raised bands — column heads, hovered rows, the ops-list header — use obsidian-2 #0c0c10. The top bar, ticker, and channel-label backdrop use panel-bar #08080b (the channel backdrop at 60% opacity). Two near-invisible greys appear only as dividers in dense areas: feed-hairline #15161b (event-feed row borders) and grid-faint #1a1c22 (seismograph vertical grid).

Voltages (brand + severity). Four neon signals carry all meaning. green #39FF88 is the primary brand — the NYX//OPS wordmark, shield icon, "LINK ACTIVE", INFO bulletins, nominal counts, "T+0" axis tick, and the green ring gauge. magenta #FF2D9B is critical/threat — section indices [01]–[04], CRIT severity, hot map markers, the THREAT=ELEVATED flag, and event-marker lines. cyan #34D1E8 is telemetry — the UTC clock, every event timestamp, and analyst handles (@febrifuge). amber #FFB400 is warning — WARN severity, rising metrics, and the op countdown timers.

Text. white #ffffff for headings and the values that matter. fog #8A8F99 is the workhorse muted color for body, labels, and metadata. fog-2 #2a2c33 doubles as both border/hairline color and the gauge ring track.

Typography

Three families, all loaded from Google Fonts. Space Grotesk (.font-display, weights 400–700, applied with letter-spacing: -0.02em) sets all titles and labels tight. JetBrains Mono (.font-mono, weights 300–600) renders every timestamp, hash, code, severity tag, gauge value, and feed row. Inter (.font-prose, weights 300–500) is the page default and carries only the small bulletin paragraph prose. Sizes run very small — the body default is 11px and most metadata is 8–10px.

Token	Size	Weight	Line-height	Tracking	Usage
display-lg	13px	600	tight	-0.02em	wordmark, seismograph H1, panel titles
display-sm	10–12px	600	tight/leading-tight	-0.02em	sub-panel titles, bulletin headlines, gauge labels
mono-md	10px	400–600	normal	—	clock, timestamps, op rows, feed rows, gauge values
mono-sm	8–9px	300–500	normal	wider on heads	column heads (uppercase), codes, captions, ticker
prose	10–11px	300–500	snug	—	bulletin body text

Layout

Base unit 4px (Tailwind scale); paddings cluster at px-3/px-4 and py-1–py-2. The page is a single column of full-bleed horizontal bands stacked top to bottom, each capped at the viewport via overflow-hidden: top bar (h-9), section header, seismograph (38vh, min 320px), middle grid (520px), gauges (110px), ticker (h-6). The middle grid is grid-cols-12 split 4 / 5 / 3 — map+ops, event feed, bulletins. Inner structures use CSS grid with fixed-px template columns ([150px_90px_70px_1fr_60px] for the feed, [1fr_auto_auto] for ops). The seismograph reserves a 140px channel-label gutter, then an absolutely-positioned SVG chart. Whitespace is deliberately scarce — this is a maximal, information-dense console where 1px hairlines, not gaps, do the separating.

Elevation & Depth

Almost entirely flat: depth comes from layered overlays and hairlines, not shadows. The .scanlines pseudo-elements add a fixed scanline grid (z-100) and a radial vignette (z-99) over everything. .dot-grid stipples panels with a 14px radial-dot pattern at 12% opacity. The only real shadow is on the hover terminal popover: a green glow box-shadow: 0 0 30px rgba(57,255,136,0.15) paired with a 1px green border, plus the corner-bracket frame on the seismograph (10px L-shaped green hairlines at each corner).

Shapes

Sharp by mandate — radius is 0 on every panel, popover, gauge cell, and feed row. The only rounding is rounded-full on tiny status/pulse dots (1–1.5px) and the map marker circles. Gauge arcs use stroke-linecap: square to stay angular. The vocabulary is rectangles, hairlines, corner brackets, and dotted lines.

Components

• Top status bar — panel-bar #08080b, border-b #2a2c33, h-9, px-4; shield SVG + green wordmark (display-lg), mono version, pulsing green link dot, and a right cluster of mono telemetry (UTC cyan, uptime white, threat magenta).
• Section header — border-b #2a2c33, px-4 py-2; magenta [NN] index + white display-lg title + fog mono caption; right-aligned legend dots.
• Seismograph — .dot-grid panel 38vh; 140px channel gutter on panel-bar/60, SVG polylines per channel colored by voltage, dashed magenta event markers, corner-bracket frame.
• Op / feed row — mono-md grid row, px-3 py-1.5, divided by #2a2c33 (feed by #15161b), hover:bg-[#0c0c10], no radius; feed rows animate in via slideIn.
• Terminal popover (.term-pop) — appears on feed-row hover; obsidian #060608 fill, 1px green border, p-2.5, green glow shadow, mono CLI text with blinking cursor block.
• Bulletin card — p-3, border-b #2a2c33; voltage-coded // CRITICAL / // WARNING / // INFO tag + mono id, white display-sm headline, fog prose body, cyan handle + fog timestamp footer.
• Ring gauge — 80px SVG, #2a2c33 track + voltage-colored arc (stroke-dasharray 301.6, stroke-linecap square, rotated -90°), centered mono value, with M0N code + display label + trend line beside it.
• Ticker — panel-bar #08080b, h-6, mono-sm fog text scrolling via marquee (60s linear), duplicated span for seamless loop.

Motion

GSAP (v3, CDN) plus CSS keyframes drive a live, restless room. blink (0.9s steps(2)) flashes the terminal cursor. pulseDot (1.6s ease-in-out) scales status dots to 1.8× and fades them. slideIn (0.4s ease-out) drops each new feed row in. marquee (60s linear infinite) scrolls the ticker. GSAP pulses the magenta .event-marker lines (opacity yoyo, power4) and expands the .map-pulse rings (r → 14, fade, staggered). A setInterval reticks the UTC clock every 53ms and prepends a new synthetic event to the feed every 900ms (capped at 22 rows).

Iconography

Tabler Icons via webfont (@tabler/icons-webfont), outline style, used sparingly: ti-crosshair and ti-activity as small (12px) green section glyphs. The brand shield is a hand-rolled inline SVG (1.5px green stroke). Decorative glyphs (●, ▣, ▸, ▼, ▲, █) are Unicode characters set in the mono face, not an icon library.

Do's and Don'ts

• Do keep the surface obsidian and let the four voltages carry all severity meaning — green nominal/brand, amber warn, magenta critical, cyan telemetry.
• Do keep radius at 0 and separate everything with 1px #2a2c33 hairlines.
• Do set every number, code, and stream row in JetBrains Mono and keep text tiny (8–11px) for maximum density.
• Do preserve the CRT scanlines, vignette, dot-grid, and corner brackets — they are the signature atmosphere.
• Don't introduce rounded corners, drop shadows (beyond the green popover glow), or large whitespace gaps.
• Don't add a fifth accent hue or recolor a voltage away from its severity role.
• Don't mix the type roles — display for labels, mono for data, Inter only for bulletin prose.

Known Gaps

• Line-heights for display faces are described qualitatively ("tight", "leading-tight") as the HTML uses Tailwind utilities rather than explicit values.
• The seismograph waveforms, event-feed contents, and gauge fills are generated at runtime by JS (random walks, setInterval); the spec captures the colors and geometry, not the per-frame values.
• Font weights listed are the full ranges imported; not every weight is exercised in the static markup.