# Terminal Core 인광빛 그린 액센트와 모노스페이스 타입으로 짜인 CLI/HUD 감성의 다크 네이티브 상태 콘솔 스타일 — 정보 밀도가 곧 미학이다. - taxonomy: terminal-core · cli, hud, monospace, phosphor, dark-native, status-console, dense, developer-dashboard · complexity=medium - page types: dashboard, docs, app - best for: 개발자 도구 대시보드/상태 콘솔, 인프라·옵저버빌리티 모니터링 UI, 보안·로그 뷰어와 CLI 문서 - avoid for: 감성적 소비자 브랜드 랜딩, 따뜻하고 여백 많은 라이프스타일 사이트, 일러스트·사진 중심 마케팅 페이지 - provenance: authored (Phosphor CRT terminal & modern developer HUD (편집 큐레이션)) — confidence: colors=manual, typography=manual, spacing=manual, motion=manual, layout=manual, effects=manual ## Design rules # Terminal Core ## Overview A dark-native CLI/HUD aesthetic: the modern developer status console. Near-black, faintly green-tinted background; one bright phosphor-green accent; monospace type from headline to body. Hierarchy is built from brightness, weight, and uppercase labels — never from a spread of colors. Depth comes from tonal steps and thin bright rules, not soft shadows. If a screen feels flat, add a rule or a label, not a drop shadow. Light mode exists as a derived "paper terminal," but the style is designed dark-first. ## Colors & Roles Dark is canonical. `background` is a near-black with a whisper of green (oklch ~0.16), `card` and `secondary` step brighter to create layers. `foreground` is a bright green-gray for comfortable long reading. The single chromatic signal is `primary` = `accent`, a phosphor green (oklch 0.82 / 0.20 / 150), reserved for status, focus, and live indicators — treat it as a signal, not a fill. `destructive` (red) and `chart-2` (amber) are warning/danger states only. Charts extend into cyan/magenta for multi-series data but stay saturated and CRT-like. Do not colorize body text; keep it in `foreground` and let the green mean something. ## Typography Rules One monospace family everywhere (JetBrains Mono → system mono fallback). Weights: 400 body, 500 labels, 600 sub-heads, 700 display. Because glyphs are fixed-width, tables, logs, and numeric columns align to the grid for free — lean into that. `label` is uppercase with wide 0.14em tracking and reads like a CLI prompt or status tag. Display is tight (line-height ~1.0, letter-spacing −0.02em). Modular scale ratio ≈ 1.25 keeps steps close and dense. ## Layout Principles Max width 1440px on a dense 12-column / 16px-gutter grid. Compose as panels: card grids, split views, and full-width monospaced tables and logs. Each panel opens with an uppercase label header and a 1px bottom rule. Vertical rhythm is tight (`clamp(2.5rem, 5vw, 4.5rem)` between sections). Density is a feature — fill the screen, then make it legible with rules and labels rather than whitespace. ## Depth & Elevation No soft drop shadows. Elevation is three tonal steps — `background` → `card` → `secondary` — plus 1px bright borders. The only "shadow" is an accent glow: a low-opacity `box-shadow: 0 0 12px` in phosphor green, used sparingly on focus and live states. Optional atmosphere: a subtle scanline and fine grain overlay (`effects.grain: true`, `noise: 0.04`) at very low opacity — never enough to hurt legibility. ## Shapes Radius is effectively zero. Boxes and buttons are square (0px); fields get a hair of softening (2px) at most. Corners are sharp by rule — this is a console, not a card app. ## Component Stylings - **Button**: radius 0, 1px `border`, transparent fill, uppercase tracked mono label; an optional `$`/`>` prompt glyph. Hover moves border and text to `primary` in 80ms. Focus = 1px `primary` border + accent glow ring (not a browser outline). Disabled = opacity 0.4. Primary variant fills `primary` — one main action per view. - **Card**: radius 0, `card` background one step above `background`, 1px `border`, uppercase label header + 1px bottom rule. No shadow. Live panels may add a 2px left `primary` accent bar or faint glow. - **Input**: radius 2px, `input` background, 1px `border`, mono text with a `>` or caret prompt. Focus moves border to `primary` with glow and a `steps()` blinking cursor. Placeholder in `muted-foreground`. - **Nav**: a top status bar. Left: logo and a path-style breadcrumb (`infra / cluster-01 / nodes`). Right: status indicators (`● online`, latency) and uppercase label links. 1px bottom rule, minimal icons. ## Motion Snappy and mechanical. Cursor blink (`steps(1,end)`), typewriter text reveals, stepped or linear easing. Durations are short: 80/160/320ms. State transitions are instant, not eased fades. No bounce, spring, or parallax — a terminal responds, it doesn't animate. ## Do's and Don'ts **Do:** design dark-first and derive the paper-terminal light mode; keep all type monospace; divide with 1px bright rules; reserve phosphor green for status/focus/live; keep the layout dense with aligned tables. **Don't:** use soft drop shadows or large radii; use gradients, glassmorphism, pastels, or rounded illustration icons; flood the screen with green (it kills the signal); use bouncy/parallax motion; trade information density for whitespace. ## Responsive Behavior The 12-column dashboard grid collapses to stacked panels on mobile; tables become horizontally scrollable rather than reflowing (preserve monospaced alignment). Display type scales via `clamp()`. The top status bar condenses to logo + primary status indicator, with secondary indicators moving into a collapsed row. ## Agent Prompt Guide > Build this in the 'Terminal Core' style: a dark-native CLI/HUD console with near-black phosphor-tinted background, a single bright phosphor-green accent (oklch 0.82 0.2 150) reserved for status/focus/live signals, monospace typography throughout (JetBrains Mono), zero border-radius, thin 1px bright rules instead of soft shadows, accent glow for emphasis, uppercase tracked labels as section headers, dense information layout with monospaced table/log alignment, and an optional subtle scanline/grain overlay with a steps() blinking cursor. ## Known Gaps / Confidence Authored seed style (not extracted from a live URL), so all tokens are `manual` confidence. JetBrains Mono is a real Google Font and the practical default for reproduction; any comparable monospace (IBM Plex Mono, SF Mono) works. The scanline/grain overlay is intentionally optional — implement it as a low-opacity CSS layer and disable it where it would reduce text contrast or trigger motion sensitivity. ## Tokens (theme.css — use these values verbatim, do not re-derive) ```css /* Terminal Core — theme.css (generated, do not edit) */ :root { --radius: 0px; --radius-selector: 0px; --radius-field: 2px; --font-sans: 'JetBrains Mono', 'SFMono-Regular', 'SF Mono', ui-monospace, 'Menlo', monospace; --font-serif: 'IBM Plex Serif', 'Iowan Old Style', serif; --font-mono: 'JetBrains Mono', 'SFMono-Regular', ui-monospace, 'Menlo', monospace; --font-display: 'JetBrains Mono', 'SFMono-Regular', ui-monospace, monospace; --spacing: 4px; --shadow: 0px 0px 12px 0px color-mix(in oklab, oklch(0.82 0.20 150) 28%, transparent); --ks-display-weight: 700; --ks-display-tracking: -0.02em; --background: oklch(0.975 0.008 150); --foreground: oklch(0.25 0.05 155); --card: oklch(0.995 0.004 150); --card-foreground: oklch(0.25 0.05 155); --popover: oklch(0.995 0.004 150); --popover-foreground: oklch(0.25 0.05 155); --primary: oklch(0.52 0.15 152); --primary-foreground: oklch(0.985 0.006 150); --secondary: oklch(0.94 0.012 150); --secondary-foreground: oklch(0.30 0.05 155); --muted: oklch(0.95 0.008 150); --muted-foreground: oklch(0.48 0.04 155); --accent: oklch(0.55 0.16 152); --accent-foreground: oklch(0.985 0.006 150); --destructive: oklch(0.55 0.20 28); --destructive-foreground: oklch(0.985 0.006 150); --border: oklch(0.86 0.015 152); --input: oklch(0.90 0.012 152); --ring: oklch(0.52 0.15 152); --chart-1: oklch(0.52 0.15 152); --chart-2: oklch(0.62 0.15 75); --chart-3: oklch(0.55 0.13 210); --chart-4: oklch(0.55 0.18 320); --chart-5: oklch(0.55 0.20 28); } .dark { --background: oklch(0.16 0.012 158); --foreground: oklch(0.92 0.03 152); --card: oklch(0.19 0.014 158); --card-foreground: oklch(0.92 0.03 152); --popover: oklch(0.19 0.014 158); --popover-foreground: oklch(0.92 0.03 152); --primary: oklch(0.82 0.20 150); --primary-foreground: oklch(0.16 0.03 158); --secondary: oklch(0.24 0.016 158); --secondary-foreground: oklch(0.88 0.03 152); --muted: oklch(0.22 0.014 158); --muted-foreground: oklch(0.62 0.04 154); --accent: oklch(0.82 0.20 150); --accent-foreground: oklch(0.16 0.03 158); --destructive: oklch(0.64 0.20 28); --destructive-foreground: oklch(0.16 0.02 28); --border: oklch(0.32 0.03 155); --input: oklch(0.30 0.025 155); --ring: oklch(0.82 0.20 150); --chart-1: oklch(0.82 0.20 150); --chart-2: oklch(0.80 0.16 78); --chart-3: oklch(0.72 0.14 210); --chart-4: oklch(0.70 0.20 320); --chart-5: oklch(0.64 0.20 28); } ``` ## Golden example (exemplar.html — match this structure and token usage) ```html
infra / cluster-01 / nodes online  ·  42ms

System Status

> all systems nominal_

Dense read-only console. Hierarchy is brightness, weight, and uppercase labels — not color. The phosphor green is a signal, spent only on status, focus, and live.

uptime

99.98%

128d 04h 12m

$ deploy > logs > metrics

nodes — 4 active

node-01 us-east-1a 0.42 ● ready
node-02 us-east-1b 0.61 ● ready
node-03 us-west-2a 0.88 ● degraded
``` ## Apply - shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/terminal-core.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only. - other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references. - single HTML/artifact: embed the theme.css block in a `