Dark Tech Terminal

# Typography System

## Display / Headline Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Geometric sans — structural, engineered, mission-control |
| **Examples** | Aeonik, Archivo, Space Grotesk |
| **Weight** | 500-700 (bold enough to command the dark ground, not shout) |
| **Tracking** | 0.01em-0.03em (slightly tight, technical) |
| **Size** | `clamp(2rem, 4vw, 3.5rem)` — loud but contained |
| **Transform** | UPPERCASE for section labels, sentence case for narrative headlines |

**Why geometric sans:** The terminal is monospace; the headlines need to be the *opposite* — engineered, geometric, modular. Aeonik/Archivo reads like a systems diagram label, not a decorative font. Headlines are the machine's nameplates; the mono type is its readout.

---

## Data / Terminal Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Monospace — this IS the terminal voice |
| **Examples** | JetBrains Mono, IBM Plex Mono, Fragment Mono, Azeret Mono |
| **Weight** | 400 regular, 500 for data emphasis |
| **Tracking** | 0em (monospace must stay monospaced — never letter-space it) |
| **Size** | `clamp(0.875rem, 1vw, 1rem)` — 14-16px, standard terminal size |
| **Line Height** | 1.5-1.6 (compact, dense — like real terminal output) |

**Why monospace:** All data, metrics, logs, code, coordinates, and technical annotations are monospace. The alignment is the design — numbers stack in columns, log lines form a rhythm, cursor positions align. Mono is not a texture; it is the information architecture made visible.

---

## Micro / System Label Type

| Property | Specification |
|----------|--------------|
| **Register** | Same monospace family, lighter or dimmer weight |
| **Examples** | JetBrains Mono Light, IBM Plex Mono Light |
| **Weight** | 300-400 |
| **Tracking** | 0.08em-0.12em (only for uppercase UI labels, never data) |
| **Size** | 10-11px |
| **Transform** | UPPERCASE with leading `//` or `::` prefix |

**Usage:** Section labels, timestamps, system status, coordinates. These read as machine metadata — "// STATUS: ONLINE", ":: SECTOR 07", "LOG 02:14:33". The prefix marks the label as system output, not content.

---

## Type Scale

```
Display:  clamp(2rem, 4vw, 3.5rem)    — geometric sans, uppercase sections
Data:     clamp(0.875rem, 1vw, 1rem)  — monospace, 14-16px
Micro:    10-11px                      — mono uppercase system labels
```

The scale is compact — 10px to 56px. Density is the point: the page is data-dense, so the type hierarchy must do the organizing. Display type for structure, mono for content, micro for system noise. Nothing in between — no 24px semibold paragraphs.

---

## Font Pairing Logic

**Two-family system:** Geometric sans (Aeonik/Archivo) for structure + monospace (JetBrains Mono/IBM Plex Mono) for data. The contrast between engineered sans and technical mono is the pairing — it mirrors a mission-control console where the labels are designed and the readouts are raw.

**Never:** Serif typefaces (editorial, not technical — the index bans them outright), handwritten or organic fonts (breaks the machine aesthetic), script, or playful novelty fonts. Decorative fonts destroy the terminal illusion — every glyph must look like it could have been rendered by a terminal.

# Color Architecture

## Ground

The ground is a near-black terminal well — never pure #000000. It carries a faint teal/green tint so it reads as a powered-on CRT or dark console, not a digital void.

```css
--color-ground-dark: #0A0F0F;     /* Near-black with green phosphor tint */
--color-ground-raised: #11191A;   /* Raised panel — terminal chrome, slightly lighter */
--color-ground-light: #12120F;    /* Amber-leaning variant when amber is the accent */
```

**Why tinted black:** Pure #000000 feels like a void. A tinted near-black (#0A0F0F) carries a whisper of the phosphor accent, so the whole page feels lit from within — like light bleeding into a dark room from a monitor.

---

## Terminal Accent Base

```css
--accent-phosphor-green: #33FF66;  /* Primary phosphor green — terminal truth */
--accent-cyan: #00D4FF;            /* Signal cyan — interactive, navigation */
--accent-amber: #FFB000;           /* Amber — warnings, blocked states, emphasis */
```

**These are the only saturated colors.** The palette is strictly-limited neon on near-black ground. One accent governs the page; the others are reserved for specific signal states — cyan for interactive elements, amber for warnings or blocked operations. Using all three arbitrarily turns a terminal into a neon sign.

**Rule:** Pick ONE primary accent (default: phosphor green). The others appear only where their meaning demands them. If every element is neon, nothing is signal.

---

## Data / Text

```css
--color-text-primary: #E6F7E9;      /* Near-white with cool tint — primary readout */
--color-text-dim: rgba(230, 247, 233, 0.6);   /* Secondary data, faded lines */
--color-text-muted: rgba(230, 247, 233, 0.35); /* System log, labels, help text */
```

**Why translucent dim levels:** Terminal output layers — fresh input is bright, older logs fade. Muted text (35% opacity) reads as background noise or stale output. This creates the visual hierarchy of a scrolling session: the cursor line is always the brightest.

---

## Warning / Distress

```css
--color-alert: #FF3333;            /* Error red — only for actual errors */
--color-blocked: rgba(255, 176, 0, 0.85); /* Amber overlay — blocked/warning states */
```

**Usage:** Red is a scarce signal reserved for errors, not decoration. Amber is the default "stop/block" state. These never appear as page accents — they interrupt the calm monochrome the way a real terminal alarms.

---

## Terminal Surfaces

```css
--surface-panel: rgba(17, 25, 26, 0.85);        /* Translucent terminal chrome */
--surface-panel-border: rgba(51, 255, 102, 0.25); /* Hairline phosphor border */
--surface-focus-glow: rgba(51, 255, 20, 0.12);  /* Glow behind focused element */
```

**Usage:** Panels, buttons, and headers. The border is a hairline (0.25 opacity) phosphor line — enough to define the panel against near-black, not enough to feel like a neon sign. Focus glow is a soft halo that makes active controls feel lit from within.

---

## Color Don'ts

| Don't | Do Instead |
|-------|------------|
| Pure #000000 background | Tinted near-black #0A0F0F |
| Pure #FFFFFF white text | Cool translucent white #E6F7E9 at reduced opacity |
| Multi-accent palettes | One phosphor accent + scarce secondary signal colors |
| Warm colors (orange 500, brown, pastel) | Cool teal/green terminal hues |
| High-saturation everywhere | Saturation reserved for accent + signal only |
| RGB rainbow gradients | Single-neon color grading with dark glow |

# Motion Principles

## Philosophy

Motion in Dark Tech Terminal is **machine-precise and stateful**. Nothing drifts organically and nothing bounces. Elements appear as if typed, revealed as if a command completed, and pulse only to signal life. The motion language borrows from the terminal itself: typed text, blinking cursors, blocky glitch corrections, and glow that breathes when a process is alive. Every animation must feel like a computer responding to input — deterministic, fast, and purposeful.

---

## Typed-Text Effects

| Element | Animation | Duration | Easing |
|---------|-----------|----------|--------|
| Hero line | Character-by-character typewriter reveal | 30-45ms per char, ~2s total | `steps(1)` |
| Terminal output blocks | Line-by-line reveal, left-aligned | 40-60ms per line | `steps(1)` |
| Data readouts | Charset scramble → settle on real value | 500-800ms | `steps(8)` |

**The typewriter is the signature move.** Text appears one character at a time with a visible caret. Line reveals batch by line, like a script executing. Scramble effects briefly flash random characters before settling — the machine "searching" for the value.

---

## Blinking Cursor

```css
@keyframes caret-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.caret {
  width: 0.6em;
  height: 1.1em;
  background: var(--accent-phosphor-green);
  animation: caret-blink 1s steps(1) infinite;
}
```

**Purpose:** The caret is the terminal's heartbeat — a blocky phosphor cursor blinking at exactly 1s. It anchors focus: the user always knows where "input" would land. Use it beside typed hero lines, inside fake input prompts, and in live status readouts.

---

## Glow Pulse

```css
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(51, 255, 102, 0.25); }
  50% { box-shadow: 0 0 12px rgba(51, 255, 102, 0.55); }
}

.glowing {
  animation: glow-pulse 2.4s ease-in-out infinite;
}
```

**Purpose:** Subtle glow pulses on live status indicators — the "REC" dot, the `●` online marker, the running-process bar. The pulse says *this is alive right now*. Slow (2.4s), low amplitude, never strobing. Static elements do NOT glow; glow is reserved for liveness.

---

## Terminal-Style Reveals

| Element | Animation | Duration | Easing |
|---------|-----------|----------|--------|
| Panel enter | Clip/width sweep like a terminal window opening | 300-400ms | `ease-out` |
| Command echo | Text reveals after a simulated `> run` prompt | 150ms delay | `steps(1)` |
| Section transitions | Horizontal wipe, left-to-right, block edge | 400ms | `steps(6)` |

**The wipe is blocky, not smooth.** Terminal reveals are binary — content appears in hard-edged blocks, like a screen refresh or a page redraw. Avoid soft fades; use clip-path wipes and step easing to keep the machine feel.

---

## Blocky Glitch Motion

```css
@keyframes glitch-shift {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-2px, 1px); }
  40% { transform: translate(2px, -1px); }
  60% { transform: translate(-1px, -1px); }
  80% { transform: translate(1px, 1px); }
}

.glitch {
  animation: glitch-shift 0.25s steps(2) 2;
}
```

**Purpose:** Rare, short, hard-edged displacement — the terminal momentarily corrupting. Glitch is an error signal, used on: error states, "breach" moments, corrupted data blocks, system transitions. It fires in a burst (2-4 iterations) and stops. Persistent glitch is noise; burst glitch is alarm.

---

## Interaction States

| Element | Hover State | Active State |
|---------|------------|-------------|
| Buttons | Border brightens 0.25 → 0.6 opacity + cursor becomes `>` | Panel dims 10%, accent glow 0.15 → 0.3 (100ms) |
| Links | Text brightens + `_` underscore caret appears | — |
| Status indicators | Tooltip line reveals like typed output (200ms) | — |
| Terminal rows | Background highlight rgba(51,255,102,0.06) (80ms) | — |

**All hover transitions are fast (80-150ms).** A terminal responds instantly — there is no 500ms dream fade. Speed IS the aesthetic; the machine is fast, precise, and never hesitant.

---

## Subtle System Beeps

| Event | Sound |
|-------|-------|
| Successful command | Short high blip (880Hz, 60ms) |
| Error / blocked | Low buzz (220Hz, 200ms) |
| Data received | Soft tick (1320Hz, 30ms) |

**Usage:** Sounds are optional and muted by default — a toggle marked `AUDIO: OFF` in the corner. When on, beeps are short square-wave blips at low volume. Never loop sounds. If audio is not implemented, replicate the rhythm visually (a flash on the status bar acts as the "beep").

---

## Reduced Motion

When `prefers-reduced-motion: reduce`:
- Typed-text effects: reveal instantly (no per-char animation)
- Blinking cursor: static solid caret (blink removed)
- Glow pulses: static, no animation
- Glitch bursts: disabled entirely (replace with color shift)
- Wipe reveals: instant appearance

```css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
```

---

## What NOT to Animate

| Never | Why |
|-------|-----|
| Bounce or spring physics | Terminals don't bounce — machine motion is linear or stepped |
| Organic drift / floating | Organic motion belongs to a different style; this is a machine |
| Soft long fades (500ms+) | Terminal responses are instant; fades feel dreamlike |
| Continuous background motion | Autoplaying scanlines/glitches distract from the data |
| Marquees / scrolling banners | Uncontrollable motion violates the operator's command |
| Playful micro-interactions | No wiggle, no wobble — the machine is serious |

# Layout Grammar

## Grid System

**Strict grid, terminal-framed.** The layout behaves like a mission-control interface — everything is locked to a visible technical grid, left-aligned with deliberate margins. Internally:

- Page container: near-black ground `#0A0F0F`, max-width `clamp(64rem, 92vw, 96rem)`
- Grid columns: `repeat(12, minmax(0, 1fr))` with `gap: 1.5rem` (mono-aligned)
- Text containers: left-aligned, `max-width: 68ch` (measured in mono character units)
- Terminal frames: consistent chrome — a 1px border, a title-bar strip (`bg-[#111618]`), a 3-dot accent at top-left
- Baseline rhythm: all vertical spacing knocks to `--mono-line` (1.7 × font-size), keeping text grid-registered

---

## Hero Section

| Property | Specification |
|----------|--------------|
| Height | `min-h-[100dvh]` — full viewport |
| Background | Near-black `#0A0F0F`, subtle grid or noise, faint scan-line overlay |
| Text position | Left-aligned, top-left — like a fresh prompt, not a centered billboard |
| Headline size | `clamp(1.75rem, 4vw, 4rem)` — bold, mono or sharp geometric sans |
| Accent | One neon (cyan `#00D4FF` default), used on the prompt symbol and interactive labels |
| Caret | Real blinking caret (`caret-blink 1s steps(1)`) at the end of the last typed line |

```
┌─────────────────────────────────────────┐
│  ~ $ mkproject dark-tech-terminal       │
│  █ loading design protocol... ok        │
│                                         │
│  SYSTEM ONLINE                          │
│  Near-black mission-control interface   │
│  monospace data · neon signal           │
│                                         │
│  > npx init --brand [ENTER]  █          │
└─────────────────────────────────────────┘
```

**The hero is a terminal session.** The window frame, the prompt, the caret, and the boot/load lines do the staging — the product statement types in under them. If the frame is removed, the near-black ground and mono type must still read as terminal on their own.

---

## Section Spacing

```css
--section-padding-y: clamp(3rem, 8vh, 7rem);
--content-max-width: 68rem;      /* mono-aligned grid lock */
--text-max-width: 30ch;          /* inline data, mono */
--edge-margin: clamp(1.5rem, 4vw, 4rem);
--terminal-border: 1px solid #1E2829;
--space-x: 0.25rem;              /* mono half-space */
```

**Spacing is dense but governed.** Sections breathe on dark ground, but the rhythm is mechanical — even padding, grid-registered, no free-floating whitespace. A mission-console dashboard compresses information into a confident, ordered surface; empty space is used to isolate data, not to relax.

---

## Layout Patterns

### Pattern 1: Terminal Window + Data Panel

```
┌─────────────────────────────────────────┐
│  $ tail -f deploy.log                   │
│  2026-08-05 09:41:01 build   ✔ ok       │
│  2026-08-05 09:41:02 deploy  ✔ ok       │
│  2026-08-05 09:41:03 probe   ✔ ok       │
│             ...                         │
└─────────────────────────────────────────┘
```

### Pattern 2: Split — Metrics Table + Glows Callout

```
┌──────────────────┬──────────────────────┐
│  LATENCY         │  STATUS              │
│  p99 42ms        │  ● all systems       │
│  p50 18ms   ▬▬   │    operational       │
│  p10 3ms         │  neon cyan on black  │
└──────────────────┴──────────────────────┘
```

### Pattern 3: ASCII Signal / Architecture Map

```
┌─────────────────────────────────────────┐
│  ┌───────┐   ┌───────┐   ┌───────┐     │
│  │ edge  │──▶│ core  │──▶│ data  │     │
│  │ nodes │   │ cache │   │ store │     │
│  └───────┘   └───────┘   └───────┘     │
└─────────────────────────────────────────┘
```

Use box-drawing diagrams only when they encode real relationships — routes, states, data flow. An ASCII diagram with no logic is decoration, not terminal.

---

## Responsive Behavior

| Breakpoint | Layout Change |
|------------|--------------|
| **Desktop (1200px+)** | Full dashboard grid, terminal frames in-line, type renders at comfortable mono sizes (≥14px) |
| **Tablet (768px)** | Grid drops to 6 columns, windows stack, scan effects simplified, data tables scroll horizontally |
| **Mobile (392px)** | 1-2 columns, mono body on NOTE nested at 16px minimum to preserve legibility on near-black, caret hidden, accent carries weight |

**On mobile:** legibility is the deal-breaker first. Dedicated backgrounds flatten, box corners simplify, and the mono set. CRTs -- small-cap. Choose visible-cap fine typefaces (Azeret Mono survives aliasing) — never shrink below 12.75px on near-black.

---

## Layout Don'ts

| Don't | Do Instead |
|------|------------|
| Centered, bounce-locked hero | Left-aligned prompt with a blinking caret |
| Decorative-only scanline overlays | Scan lines that real CRT artifact (moving raster, subtle roll) |
| Bento/card soup with inconsistent gaps | Strict 12-col data grid, terminal-bearing borders |
| Purple-blue "hacker movie" gradients | Near-black + one neon accent (green #33-F2F2 / cyan #00D4FF / amber #F59E0B-amber) |
| Fake window chrome everywhere | Terminal frames only on surfaces that hold real output (logs, stats, prompt) |
| Text knocked to base layer | Legible white/k-zinc cascades on near-black ground |
| Ornamental glyphs and icons | ASCII box-drawing, `>` prompts, tooling glyphs only where they mean something |
| Warm grays, serif headers, organic shapes | Banned palette shapes — see Vocabulary in index.mdx |

# Texture & Surface

## Primary Texture: The Code-Editor / CRT Surface

The texture IS the terminal hardware. The page should feel like a powered machine — scanlines, hairline grids, phosphor glow, subtle grain. No material should look printed or painted; every surface looks *emitted by a monitor*.

| Quality | Description |
|---------|-------------|
| **Scan-line effect** | 1px horizontal lines across panels — the CRT refresh |
| **Hairline grid** | Technical grid background — blueprint/coordinate feel |
| **Phosphor glow** | Soft radial glow behind accents, like light bleed on glass |
| **Code-editor chrome** | Panel headers with `● ● ●` dots, status bars, line numbers |
| **Subtle noise/grain** | Low-opacity grain to kill digital flatness |

**The goal:** Every surface should read as a monitor output or a machine panel — never a flat web page. The texture is the "screen," and the content is what the screen displays.

---

## Scan-Lines

```css
.scanlines {
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.18) 2px,
    rgba(0, 0, 0, 0.18) 3px
  );
  pointer-events: none;
}
```

**Purpose:** The CRT refresh pattern — subtle horizontal darkening at 1px intervals. Applied as an overlay (pointer-events: none) above the main surface, never to text areas where it would hurt readability. Opacity stays low (0.18) — it should be felt more than seen.

---

## Technical Grid

```css
.grid-background {
  background-image:
    linear-gradient(rgba(51, 255, 102, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51, 255, 102, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
}
```

**Purpose:** A barely-visible coordinate grid anchoring the layout — mission-control blueprint. The grid is the layout's skeleton made visible: 32px cells that match the spacing system. It stays under 6% opacity — the grid structures, it does not decorate.

---

## Phosphor Glow Surfaces

```css
.glow-surface {
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(51, 255, 102, 0.10) 0%,
    rgba(51, 255, 102, 0.0) 55%
  );
}
```

**Purpose:** Light bleed — a soft pool of accent light at the top of panels, as if the phosphor is shining up through the screen. Used on hero sections, panel headers, and around the cursor line. The glow is always the accent color and always faint (≤10% at its brightest).

---

## ASCII Art

```
  ▄▄▄▄▄▄  ▄▄▄▄▄▄  ▄▄▄▄▄▄
  ██      ██      ██
  ██ ▄▄▄▄  ██▄▄▄▄  ██▄▄▄
  ██▄▄▄▄██ ██▄▄▄▄█ ██▄▄▄▄
```

**Usage:** ASCII art is the terminal's illustration language — used for section dividers, empty states, boot sequences, and decorative headers. It must be rendered in the monospace font at the exact same size as surrounding text (no scaling, no blur — ASCII art must stay pixel-crisp). Every ASCII figure is built from a strict block/line character set, matching the grid.

---

## Image Processing

| Processing | Effect | Parameters |
|-----------|--------|------------|
| **Scanline overlay** | CRT refresh | 3px repeating gradient at 0.18 opacity |
| **Phosphor grade** | Accent-tinted shadows | Teal/green tint in darks, accent in highlights |
| **Chromatic edge** | Subtle RGB split on glitch states only | 0.5-1px red/blue channel shift |
| **Contrast** | High — the near-black ground makes accents pop | Contrast +15-20 |
| **Grain** | Analog noise to kill banding | Opacity 0.03-0.05, overlay |

**The goal:** Imagery looks displayed, not printed — like a frame from a terminal or a mission-control render. High contrast, cool shadows, and a whisper of scanline/grain over everything.

---

## Surface Rules

| Surface | Treatment |
|---------|-----------|
| Background | Near-black ground + 32px technical grid at ≤6% opacity |
| Panels | Translucent raised surface, hairline phosphor border, header chrome |
| Text | Direct on ground — no cards, no padding boxes for body text |
| Data readouts | Code-editor treatment: line numbers, dim separators, mono glyphs |
| Buttons | Border-only (no filled background) with `>` prompt cursor |
| Active elements | Soft phosphor glow (≤12%) behind the element |
| Dividers | `-` repeated characters (like `------------------`) or ASCII rule lines |

**No decorative cards.** Panels only exist where a real terminal would have a window — data blocks, log viewers, input lines. Everything else sits directly on the near-black ground.

---

## Texture Don'ts

| Don't | Do Instead |
|-------|------------|
| Blurred/depth-of-field textures | Crisp scanlines, hard-edged grids, sharp glyphs |
| Organic gradients and blobs | Technical grids, radial phosphor bleed, linear hairlines |
| Glassmorphism / frosted panels | Opaque terminal chrome with hairline borders |
| Busy animated backgrounds | Static textures; motion reserved for data and status |
| Rounded soft corners everywhere | Small radii (2-4px) or square — machine precision |
| Photographic backgrounds | Near-black ground with grid, scanline, and glow layers |
| Decorative fonts as texture | ASCII art and monospace glyph blocks |

# Vocabulary Bank

## Primary Terms

| Term | Why It Matters |
|------|---------------|
| `terminal aesthetic` | The entire page borrows from code editors and command lines |
| `monospace data` | Fixed-width type for data, code, labels — the backbone of the style |
| `neon accent` | Single electric color (cyan/green/amber) on near-black ground — nocturnal signal |
| `scan-line` | Horizontal CRT lines over content — the screen is a physical object |
| `mission control` | Data-dense dashboard crossed with hacker's workstation |

---

## Secondary Terms

| Term | Effect |
|------|--------|
| `phosphor glow` | Text-shadow bloom on accent elements — cathode-ray afterglow |
| `blinking caret` | The cursor that waits for input — every page is a live terminal |
| `typed-text effect` | Characters appearing one at a time — output being generated |
| `ASCII art` | Character-built graphics as decoration or logo — pure data imagery |
| `terminal window framing` | Title bar with traffic dots + command path — content inside a running process |
| `CRT glow` | Soft halation around bright elements — phosphor burn |
| `code-editor aesthetic` | Gutter lines, line numbers, bracket pairing — the UI reads as source |
| `grid-locked layout` | Strict technical grid, left-aligned, dashboard-influenced |
| `status readouts` | Uptime, latency, log entries as decorative data — the page reports on itself |
| `electric green` | Classic phosphor P1 green — the default terminal accent |

---

## Context Terms

| Term | Mood |
|------|------|
| `hacker` | Nocturnal, precise, slightly subversive |
| `cyberpunk` | Neon on dark, tech-drenched future |
| `nocturnal` | Night-time, electric light on black |
| `mission control` | Operational, data-dense, focused |
| `console` | Raw, unfiltered, machine voice |
| `dashboard` | Gridded readouts, dense but organized |
| `boot sequence` | Terminal-style reveals — systems coming online |

---

## Banned Terms

| Term | Why It Breaks the Style |
|------|------------------------|
| `warm colors` | The palette is near-black + one neon accent — warmth breaks the nocturnal ground |
| `serif fonts` | Data is monospace, headlines geometric sans — serif reads print, not terminal |
| `organic shapes` | Everything is grid-locked, angular, technical |
| `playful motion` | Motion is mechanical: typing, caret blinks, glow pulses |
| `rounded everything` | Soft pill UI contradicts the angular console frame |
| `gradient meshes` | Flat near-black ground with glow accents — not colorful gradients |
| `white page background` | The ground is near-black (#0A0F0F); light backgrounds destroy the aesthetic |
| `photographic texture` | Noise/grain and scan-lines — not photo realism |
| `casual sans-serif` | Body copy stays monospace — it IS the interface voice |
| `bright full palette` | One neon accent at a time — never a rainbow of neon |

---

## Prompt-Ready Phrases

```
"near-black ground (#0A0F0F) with single neon accent (cyan #00D4FF / electric green / amber)"
"monospace for all data, code, labels, and body copy (JetBrains Mono / Fragment Mono / Azeret Mono)"
"geometric sans for headlines (Aeonik / Archivo)"
"scan-line overlay — subtle horizontal CRT lines across the page"
"phosphor glow on accent elements — text-shadow bloom, no blurry borders"
"typed-text effect — characters appear sequentially, 30-50ms per character"
"blinking caret after typed lines — 1s square block blink"
"terminal window framing — title bar with traffic dots and command path (user@host:~/style)"
"ASCII art logo or section dividers — pure character graphics"
"grid-locked layout — left-aligned, technical margins, dashboard density"
"status readouts — uptime, latency, log lines as decorative data"
"terminal-style reveals — content prints in, sections boot sequentially"
"subtle noise/grain overlay for CRT texture"
"no warm colors, no serif fonts, no organic shapes, no playful motion"
```

# When to Use

## Perfect For

| Context | Why This Style Works |
|---------|---------------------|
| **Cybersecurity products** | The terminal aesthetic literally IS the product — threat feeds, alerts, and logs are native monospace data |
| **Developer tools / IDEs** | Code editors and CLIs share the same visual DNA — mono type, near-black ground, grid discipline |
| **Crypto/blockchain** | Mission-control dashboards, node status, and transaction feeds read naturally as terminal data |
| **Infrastructure/DevOps SaaS** | Deploys, pipelines, and uptime are data streams — this style makes ops feel like command of a machine |
| **Technical documentation** | Monospace, grid-locked layouts carry code samples and specs without visual friction |
| **Gaming interfaces** | Hacker/mission-control framing suits sci-fi, cyberpunk, and competitive-tech titles |
| **Data-intensive dashboards** | High density organized through strict grid + mono typography stays readable, never cluttered |

## Brand Personality Match

This style reinforces brands that are:
- **Technical** — engineering-first, precise, comfortable with raw data
- **Nocturnal** — dark, late-night, mission-control energy
- **Precise** — every element on grid, every value in mono
- **Controlled** — dense but disciplined, no visual noise
- **Forward-leaning** — the future is built on terminals, not spreadsheets

## Avoid When

| Context | Why It Fails |
|---------|-------------|
| **Consumer retail/e-commerce** | The cold, technical mood works against product warmth and impulse buying |
| **Lifestyle/food/culture** | Warm, tactile categories clash with neon-on-black signal logic |
| **Healthcare (patient-facing)** | The hacker aesthetic reads cold and alarming, the opposite of reassuring |
| **Editorial/long-form reading** | Dense mono text at scale fatigues readers; serif-led editorial flow is absent |
| **Brands needing warmth/approachability** | Terminal UI signals engineering, not friendliness — see Ethereal Dreamscape or soft minimal styles |
| **Conservative enterprise** | The cyberpunk edge can read as too "internet" for traditional procurement audiences |

## How to Decide

Ask: **"Does my brand want to feel like a mission-control console — technical, nocturnal, neon-signaled, and unapologetically engineered?"**

If yes → Dark Tech Terminal.
If no → Consider Data Visualization Aesthetic (if you want data density without the neon hacker edge), Swiss Mono Precision (if you want grid-locked mono typography in light, editorial form), or Dark Cinematic Studio (if you want dark and atmospheric without the terminal framing).

# Reference Gallery

## Live Sites

### Vercel's Terminal Aesthetic (vercel.com + vercel.sh)
- **What works:** Near-black ground (#0A0F0F-family zinc-950), monospace data in code blocks, cyan/blue neon accents as signal, precise grid-locked layout
- **URL:** vercel.com — study the command-line hero framing and how mono type carries technical credibility

### Linear (linear.app)
- **What works:** Dark, ultra-precise interface; neon accent used sparingly on interactive elements only; dense but controlled data — the modern mission-control dashboard
- **URL:** linear.app — study accent-as-signal restraint and high-density grid discipline

### Railway (railway.app)
- **What works:** Deployment/terminal product with genuine terminal-window framing, near-black ground, amber/green status accents, blinking caret cues
- **URL:** railway.app — study real terminal chrome (window dots, typed-text effects) applied to a web product

### GitBash / Windows Terminal (microsoft.com/terminal)
- **What works:** The canonical CLI itself — phosphor-style text on near-black, scan-line-adjacent rendering, prompt cursors, ASCII-framed banners
- **URL:** aka.ms/terminal — study the reference implementation of terminal-window framing and mono rendering

### HackerOne (hackerone.com)
- **What works:** Security-branded dark UI with mono data, neon signals, and mission-control energy in a trustworthy enterprise context
- **URL:** hackerone.com — study how the hacker aesthetic is made credible for B2B

### Awwwards Terminal/Retro-Futurism Winners
- **What works:** Brutalist terminal art, ASCII compositions, CRT scan-line overlays, blinking carets pushed to art direction
- **URL:** awwwards.com (search "terminal" or "CRT" trends) — study the art side of the style

## Key Visual References

### Terminal Chroming
- **Window framing** — title bars with three dots, toolbar borders, 1px rules around viewports
- **Prompt patterns** — `$`, `>` cursors, typed-text effects with blinking caret (roughly 1s blink, 530ms on/off)
- **ASCII art** — logos and dividers rendered in block characters, especially in 404/error states
- **CRT effects** — scan-lines, subtle horizontal banding, slight phosphor glow, vignette on large screens

### Color References
- **Near-black ground** — #0A0F0F (base), zinc-950 #09090B as the neutral alternative
- **Neon accent** — cyan #00D4FF (primary, per index), electric green #00FF9C / phosphor #33FF66, amber #FFB000 — pick ONE, not all three
- **White text** — #F5F7F7 at full opacity for primary, reduced opacity (60-70%) for secondary data

### Typography References
- **JetBrains Mono** — primary monospace for data, code, and labels (index-approved)
- **Fragment Mono / Azeret Mono** — alternative mono voices for more character
- **Aeonik / Archivo** — geometric sans for headlines only, paired against mono body
- **Caps + tracking on labels** — 0.08-0.15em uppercase for UI chrome, mirroring the index's technical labels

### Motion References
- **Typing effects** — 30-60ms per character, caret blinking ~1s
- **Terminal reveals** — content appears line-by-line or as `print` statements on scroll
- **Glow pulses** — 2-4s ease-in-out, 10-20% intensity on accent elements only
- **No playful motion** — everything reads mechanical and precise

## Screenshot Notes

> When capturing references for this style, look for:
> - The ground (must be near-black #0A0F0F-family — no dark blue, no purple)
> - The accent (must be a single neon — cyan/green/amber, never multiple)
> - The typography (must be monospace-led for data; geometric sans only for display)
> - The layout (must be grid-locked, dashboard-disciplined, technical margins)
> - The texture (scan-lines or subtle grain — applied with restraint)
> - The motion (typed-text reveals and glow pulses — nothing playful)
> - The overall mood (must feel like a mission-control console: technical, nocturnal, neon-signaled)