name: infra-ops-design
version: alpha
description: >
  A full-screen SRE/NOC terminal dashboard rendered entirely in JetBrains Mono on
  a near-black onyx surface (#0C0E0F). The whole UI reads as a tmux session: a
  status bar up top, a three-pane body (live command terminal, a 200-row
  service-tier grid, an incident stream), and a high-voltage green footer ribbon
  carrying the on-call rotation. The only "voltage" is phosphor green (#7AE07A);
  amber (#F4B840) and red (#F25A5A) carry degraded/critical state, cream (#E4DFD3)
  is the primary readable text, and dim olive (#6a6a5e) is everything secondary.
  Everything is square — zero border radius — and depth comes from 1px hairlines
  (green and dim) rather than shadows. The signature moves: a blinking block
  cursor, inverted (cream-fill) hover/selected rows, and tabular-num alignment of
  latency/error columns.
colors:
  # Surface
  onyx: '#0C0E0F'          # page background (.bg-onyx); also inverted text on green/cream fills
  onyx-2: '#111314'        # secondary surface (.bg-onyx-2), defined for panels
  # Brand / Voltage
  green: '#7AE07A'         # phosphor green: prompts, OK status, active borders, footer fill, cursor
  green-dark: '#1d6b1d'    # green text when on a cream-inverted (hover/selected) row
  # Semantic state
  amber: '#F4B840'         # degraded (DEG), warnings, keyboard-shortcut badges
  amber-dark: '#8a6610'    # amber on inverted hover row
  red: '#F25A5A'           # critical (CRIT), errors, threshold breaches
  red-dark: '#a83333'      # red on inverted hover row
  # Text
  cream: '#E4DFD3'         # primary readable text; also the inverted hover/selected fill
  dim: '#6a6a5e'           # muted: paths, timestamps, metadata, secondary columns
  dim-inverted: '#3a3a32'  # dim text on cream-inverted rows
  # Hairlines
  border-green: '#7AE07A'  # active/structural pane dividers (.bd-green)
  border-dim: '#1f2426'    # quiet hairlines, column rules, scrollbar thumb (.bd-dim)
typography:
  mono:
    fontFamily: "'JetBrains Mono', ui-monospace, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 18px
  monoBold:
    fontFamily: "'JetBrains Mono', ui-monospace, monospace"
    fontSize: 10px
    fontWeight: 700
    lineHeight: 14px
    letterSpacing: 0.05em
    textTransform: uppercase
  prompt:
    fontFamily: "'JetBrains Mono', ui-monospace, monospace"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 22px
  label:
    fontFamily: "'JetBrains Mono', ui-monospace, monospace"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 14px
    letterSpacing: 0.05em
    textTransform: uppercase
  inter:
    fontFamily: "'Inter', sans-serif"
    fontSize: 11px
    fontWeight: 500
rounded:                    # nothing is rounded — brutalist/terminal
  none: 0px
spacing:                    # base unit 4px; Tailwind scale
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
components:
  statusBar:
    backgroundColor: '{colors.onyx}'
    textColor: '{colors.cream}'
    typography: '{typography.label}'
    borderBottom: '1px solid {colors.border-green}'
    padding: '4px 12px'
    rounded: '{rounded.none}'
  pane:
    backgroundColor: '{colors.onyx}'
    textColor: '{colors.cream}'
    typography: '{typography.mono}'
    border: '1px solid {colors.border-green}'   # outer dividers; inner header rules use border-dim
    rounded: '{rounded.none}'
  paneHeader:
    backgroundColor: '{colors.onyx}'
    textColor: '{colors.green}'
    typography: '{typography.label}'
    borderBottom: '1px solid {colors.border-dim}'
    padding: '4px 12px'
    rounded: '{rounded.none}'
  serviceRow:
    backgroundColor: '{colors.onyx}'
    textColor: '{colors.cream}'
    typography: '{typography.mono}'
    padding: '2px 12px'
    hoverBackground: '{colors.cream}'           # inverts: bg cream, text onyx
    hoverTextColor: '{colors.onyx}'
    rounded: '{rounded.none}'
  kbd:
    backgroundColor: 'transparent'
    textColor: '{colors.amber}'
    typography: '{typography.label}'
    border: '1px solid currentColor'
    padding: '0 4px'
    rounded: '{rounded.none}'
  tooltip:
    backgroundColor: '{colors.cream}'
    textColor: '{colors.onyx}'
    typography: '{typography.inter}'
    border: '1px solid {colors.green}'
    padding: '8px 12px'
    rounded: '{rounded.none}'
  footerRibbon:
    backgroundColor: '{colors.green}'
    textColor: '{colors.onyx}'
    typography: '{typography.monoBold}'
    height: '32px'
    padding: '0 12px'
    rounded: '{rounded.none}'
motion:
  blink: 'blinking block cursor — @keyframes blk { 50% { opacity:0 } } 1s steps(1) infinite'
  hoverInvert: 'instant (no transition authored) row inversion to cream fill on hover/select'
icons:
  library: Tabler icons webfont (ti)
  style: outline
  sizes: { sm: 14px, base: 16px }
  color: '{colors.dim}'

Infra Ops

infra-ops-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + class rules. Fictional/sample product; described factually.

Overview

Infra Ops is a fictional global SRE/NOC console that commits fully to the terminal aesthetic — the entire viewport is one full-bleed mono surface on near-black onyx #0C0E0F, laid out like a tmux session. A 10px uppercase status bar runs across the top (region, session TTL, tmux window list, and a live SVC / OK / DEG / CRIT tally). Below it a three-pane body fills the screen: a left command terminal with scrollback and a blinking active prompt, a center service-tier grid of 200 rows aligned in seven tabular columns, and a right incident stream tailing severity≥warn events. A solid phosphor-green ribbon at the bottom carries the on-call rotation in inverted onyx text. The palette is disciplined: one voltage, phosphor green #7AE07A, plus amber #F4B840 and red #F25A5A strictly for degraded/critical state, cream #E4DFD3 for primary text, and dim olive #6a6a5e for everything secondary. Geometry is brutally square (no radius anywhere); depth is built from 1px hairlines — green #7AE07A for active/structural pane dividers, dim #1f2426 for quiet rules. The signature moves are the blinking block cursor (▊), the cream-inverted hover/selected row, and the tabular-num alignment that keeps p95/error columns ruler-straight.

Colors

Surface. The whole app sits on onyx #0C0E0F (.bg-onyx), which doubles as the inverted text color whenever something fills with green or cream. A slightly lighter onyx-2 #111314 (.bg-onyx-2) is defined as a secondary panel surface.

Brand / Voltage. There is exactly one voltage: green #7AE07A (.text-green, .bg-green, .bd-green). It drives the shell prompt, OK status dots, the active pane borders, the blinking cursor, the live indicators, and the full footer fill. On an inverted (cream) hover/selected row, green text darkens to green-dark #1d6b1d so it stays legible.

Semantic state. amber #F4B840 (.text-amber) marks degraded services (DEG), warnings in the feed, and the ⌘n keyboard-shortcut badges; red #F25A5A (.text-red) marks critical services (CRIT), errors, and threshold breaches. Each has an inverted-row variant — amber-dark #8a6610, red-dark #a83333 — for when a row flips to the cream fill.

Text. cream #E4DFD3 (.text-cream) is the primary readable body color and, inverted, the hover/selected row fill. dim #6a6a5e (.text-dim) carries all secondary content: paths, timestamps, version/last-deploy columns, metadata. On inverted rows dim becomes dim-inverted #3a3a32.

Hairlines. Two border colors only: border-green #7AE07A (.bd-green) for the load-bearing pane dividers and status-bar underline, and border-dim #1f2426 (.bd-dim) for quiet header rules, column separators, and the scrollbar thumb/track.

Typography

The single family is JetBrains Mono (weights 400/500/700, loaded from Google Fonts), with ui-monospace, monospace fallback. It's applied globally via .mono with font-variant-numeric: tabular-nums and font-feature-settings: "tnum" so numeric columns align. A secondary Inter (weight 400/500) is loaded and used only inside the tab-completion tooltip via .inter. Sizes are fixed pixel ramps via utility classes: .t10 (10px/14px) for uppercase labels, .t13 (13px/18px) as the base body, .t18 (18px/22px) for the active prompt. Labels and the status/footer bars are uppercase with wide tracking (tracking-wider).

Token	Size	Weight	Line-height	Tracking	Usage
mono	13px	400	18px	0	base body text, terminal output, grid rows
label	10px	400	14px	wide	pane headers, status-bar text (uppercase)
monoBold	10px	700	14px	wide	footer ribbon on-call labels (uppercase)
prompt	18px	400	22px	0	the active command prompt line
inter	11px	500	—	0	tab-completion tooltip only

Layout

Base unit is 4px on Tailwind's scale; the dominant paddings are px-3 py-1 (12/4px) for bars and headers and py-[2px] for dense grid rows. The page is a fixed h-screen w-screen flex column with overflow-hidden: (1) top status bar, (2) a flex-1 three-pane row, (3) the bottom on-call ribbon (h-8, fixed). The three panes are sized w-[24%] min-w-[280px] (left terminal), flex-1 (center grid), and w-[24%] min-w-[300px] (right stream), divided by green hairlines. The center grid uses a seven-track CSS grid grid-cols-[1.4fr_60px_80px_70px_90px_100px_80px] with gap-3, a sticky green-on-onyx column header, and 200 generated rows. The left and right panes each have a fixed header, a scrollable body (custom 6px thin scrollbar), and a pinned footer; the right stream uses flex-col-reverse so newest events sit at the bottom edge. Whitespace is tight and information-dense by intent — this is a dashboard, not a marketing page.

Elevation & Depth

There are essentially no shadows; depth is hairline-driven. Panes and bars are separated by 1px borders — border-green for the major structural divisions (status-bar underline, the two outer pane dividers, the active-prompt rule) and border-dim for quieter internal header rules and column separators. The one real shadow in the file is shadow-lg on the tab-completion tooltip, which also sits on a cream fill with a green border so it reads as a lifted, inverted surface. Hover/selected rows create depth purely by inverting fill (cream) and text (onyx) — a flat, terminal-native treatment.

Shapes

Everything is square. There is no rounded-* anywhere; the only authored radius token is none: 0px. The kbd badges, the tooltip, the status/footer bars, and every grid row are hard rectangles. This brutalist geometry is core to the terminal identity — softening any corner would break it.

Components

• Status bar — onyx fill, green-bottom hairline, 10px uppercase tracked text; left cluster shows region/session/tmux, right cluster the SVC/OK/DEG/CRIT tally and UTC clock. Padding 4px 12px, square.
• Pane — onyx surface bounded by green hairlines; flex column of header / scroll body / footer. Headers are dim-bordered, green-uppercase (// pane 0 — command) with a dim shortcut hint on the right.
• Service row — grid row, px-3 py-[2px], cream text on onyx; status dot + word (● ok green / ● deg amber / ● crit red), right-aligned tabular p95_ms and err_% (color-coded by threshold), dim version/last_deploy, and an amber kbd runbook shortcut. Hover or .sel inverts the whole row to cream-on-onyx with darkened state colors.
• kbd badge — transparent fill, 1px currentColor border, 10px text, padding 0 4px, square; amber by default (e.g. ⌘1).
• Tooltip — cream fill, onyx text, Inter 11px, 1px green border, shadow-lg, ~78% width, anchored above the active prompt; lists deploy / depend-graph / deprecate completions with a ↹ tab glyph.
• Footer ribbon — solid green fill, onyx bold uppercase 10px text, h-8, centered on-call rotation separated by | glyphs at 60% opacity; ends with PRESS ? FOR BINDINGS and ESC TO CLEAR · ^C ABORT.
• Active prompt — t18 line, green sre@global-ops:~$ + cream input and a blinking block cursor.

Motion

Minimal and terminal-true. The only @keyframes is blk — the block cursor (.cursor::after { content:"▊" }) blinks via blk 1s steps(1) infinite (opacity 0 at 50%), in green. Hover/selection inversion is instantaneous (no transition authored on .row). The header copy implies a live stream (live · 412 evt/min, tail -f) but the feed is statically rendered — there is no JS ticker or animation driving it.

Iconography

Tabler icons via the webfont (ti ti-*), outline style, sized small (text-sm ≈14px or default ≈16px) and colored dim by default. Usage is sparse and functional: ti-search in the grid header, ti-corner-down-left in the tooltip, ti-keyboard in the footer. Status indicators are typographic glyphs, not icons: ● dots for service state, ▊ for the cursor, ▌ for the live marker, ↹/↹ and ⌘ in labels and badges.

Do's and Don'ts

• Do keep the whole UI in JetBrains Mono with tabular-nums so numeric columns stay ruler-aligned.
• Do reserve green as the single voltage (prompts, OK, active borders, footer) and use amber/red strictly for degraded/critical state.
• Do build separation from 1px hairlines — green for structural, dim for quiet — not shadows.
• Do invert to cream-on-onyx for hover/selected rows, darkening the state colors so they stay legible.
• Don't introduce border radius, gradients, or soft shadows — the system is flat and square.
• Don't add a second sans for body copy; Inter is scoped to the tooltip only.
• Don't let amber/red bleed into non-state decoration; they are semantic signals.

Known Gaps

• Spacing scale is inferred from the Tailwind utilities actually used (px-3, py-1, py-[2px], gap-3, mb-1); the template defines no custom spacing tokens.
• onyx-2 #111314 is defined as a class (.bg-onyx-2) but not referenced in the markup; recorded as the intended secondary surface.
• The status-bar SVC/OK/DEG/CRIT tally and feed are static strings; "412 evt/min" and tail -f are decorative, not live.
• The custom scrollbar is WebKit-only (::-webkit-scrollbar, 6px, dim thumb on onyx track); other engines fall back to default.