Terminal / CLI Portfolio Emulation

/* Synthesized from Trova family: Terminal / CLI Portfolio Emulation (terminal-cli-portfolio) */
/* Evidence base: 4 curated reference(s) · Primary contrast 18.3:1 */
:root {
  /* Surface & Polarity (Daylight-paper dominant) */
  --surface-ground: #f8f8f2;
  --surface-elevated: #121b16;
  --text-primary: #090d0b;
  --accent-primary: #15131d;
  --border-hairline: color-mix(in srgb, #090d0b 16%, transparent);

  /* Typography (Loadable open-source stack mapped from observed specimens) */
  --font-display: "JetBrains Mono", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Structural Geometry */
  --radius-surface: 0px;
  --measure-body: 62ch;
}

# Terminal / CLI Portfolio Emulation — style sheet

> Bash shell command prompt inside browser window, help command listing project pages, and colored ANSI text output.

Derived from 4 curated reference(s) in the `terminal-cli-portfolio` family. Counts are how many references use a value, so a value used once is a lead, not a rule. Paste this into DESIGN.md as a starting system, then verify against the images.

## Type

- JetBrains Mono — 3/4
- Inter — 2/4
- Courier — 1/4
- IBM Plex Mono — 1/4
- Space Mono — 1/4

## Color

- `#090d0b` dark neutral — 3/4
- `#15131d` dark neutral — 2/4
- `#121b16` dark neutral — 2/4
- `#f8f8f2` light neutral — 2/4
- `#211e2f` dark neutral — 1/4
- `#ff5faf` chromatic — 1/4
- `#60a5fa` chromatic — 1/4
- `#10b981` chromatic — 1/4
- `#f59e0b` chromatic — 1/4
- `#34d399` chromatic — 1/4

Readable pairs from these swatches, most-used first (WCAG AA body text needs 4.5:1):
- `#090d0b` / `#f8f8f2` — 18.3:1
- `#15131d` / `#f8f8f2` — 17.2:1
- `#121b16` / `#f8f8f2` — 16.5:1
- `#090d0b` / `#34d399` — 10.2:1

## Moves

### component pattern

- Every executed shell command and its stdout stream is encapsulated into a discrete DOM block with its own sticky header (working directory, exit code badge, elapsed time, and one-click permalink). — 137-warp-terminal-block-scoped-command-output-architecture
- Code snippets render inside real Unicode box-drawing frames (`╭───╮`) with inline keyboard hint footers (`↑/k up • ↓/j down • q quit`) that mirror the actual TUI library output. — 138-charm-sh-lipgloss-bubbletea-tui-design-system
- Navigation links sit inline inside the character grid as bracketed tokens (`[PROJECTS]`, `[NOTES]`, `[INDEX]`) that invert foreground and background cell colors on hover. — 140-ertdfgcvb-playcore-ascii-character-cell-shader-studio

### typography

- Strict character-cell alignment: all borders, padding, and status columns use integer `ch` and `lh` units so ASCII tables and box-drawing characters (`┌─┐`) never suffer subpixel drift. — 137-warp-terminal-block-scoped-command-output-architecture

### color

- High-saturation 256-color ANSI palette (hot magenta `#ff5faf` and mint `#00ffaf`) paired against deep aubergine `#15131d`, proving terminal interfaces can feel playful rather than drab green-on-black. — 138-charm-sh-lipgloss-bubbletea-tui-design-system

### motion/interaction

- Hero banner renders an interactive character-grid canvas where cursor movement perturbs ASCII glyphs into a glowing wave before settling back into the Ghostty silhouette. — 139-ghostty-native-gpu-accelerated-terminal-specimen

### grid/layout

- Documentation and feature callouts use a single 80ch monospace column with `--` comment dividers and zero decorative icons, honoring classic man-page legibility. — 139-ghostty-native-gpu-accelerated-terminal-specimen

### texture/material

- The entire viewport is a single `<pre>` character buffer updated at 60fps; density ramps (` .:-=+*#%@`) create smooth 3D lighting and volumetric shadows using zero raster pixels. — 140-ertdfgcvb-playcore-ascii-character-cell-shader-studio

## References

- 137-warp-terminal-block-scoped-command-output-architecture — Warp Terminal — Block-Scoped Command & Output Architecture (exemplar)
- 138-charm-sh-lipgloss-bubbletea-tui-design-system — Charm.sh — Lipgloss & BubbleTea TUI Design System
- 139-ghostty-native-gpu-accelerated-terminal-specimen — Ghostty — Native GPU-Accelerated Terminal Specimen
- 140-ertdfgcvb-playcore-ascii-character-cell-shader-studio — ertdfgcvb — Playcore ASCII & Character-Cell Shader Studio