retro-terminal-css

v1.0.0

Published

15 days ago

A reusable CSS design system inspired by CRT terminal and retro sci-fi UI aesthetics.

0High
0Medium
0Low

tman15bp

css design-system retro terminal crt monospace dashboard dark-theme themes colour-schemes

retro-terminal-css

A reusable CSS design system inspired by CRT terminal and retro sci-fi UI aesthetics — amber-orange on pure black, VT323 bitmap font, CSS-only scanlines, sharp 1px borders everywhere.

Demo

Visual Style

Pure black backgrounds with cooled amber-orange accents
VT323 bitmap font throughout (Google Fonts, no JS)
1px borders only — zero border-radius on everything
CSS-only CRT scanline overlay
Flat hard pixel colours — no gradients, no shadows, no blur

File Structure

retro-terminal-css/
├── tokens.css              # All CSS custom properties
├── base.css                # Reset, scrollbar, scanline overlay
├── typography.css          # Headings, labels, values, code blocks
├── components/
│   ├── panel.css           # Bordered rectangular panels
│   ├── meter.css           # Horizontal bar meters
│   ├── bar-chart.css       # Vertical bar charts (pure CSS)
│   ├── readout.css         # Label + value data rows
│   ├── button.css          # Rectangular buttons
│   ├── badge.css           # Inline status badges
│   ├── grid.css            # Layout grid utilities
│   ├── nav.css             # Top nav, sidebar nav, tab bar
│   ├── form.css            # Inputs, selects, checkboxes, radios
│   ├── table.css           # Data tables with sortable headers
│   ├── alert.css           # Alert banners and toast notifications
│   └── modal.css           # Modal / dialog overlay
├── layouts/
│   ├── dashboard.css       # Full-screen dashboard (sidebar + main + right)
│   └── hud.css             # Heads-up overlay with corner panels
├── themes/
│   ├── amber.css           # Default amber-orange (mirrors tokens.css)
│   ├── phosphor.css        # Classic P1 green CRT
│   ├── cyan.css            # Aqua-teal sci-fi
│   ├── cobalt.css          # Deep IBM blue
│   ├── crimson.css         # Dark red / Loki TVA
│   ├── ghost.css           # Monochrome white
│   └── violet.css          # Deep purple cyberpunk
└── demo/
    ├── index.html          # Full component demo page
    ├── palettes.html       # Side-by-side palette comparison
    └── demo.css            # Imports all library files

Usage

CDN (jsDelivr)

Import the files you need directly. Start with tokens and base, then add components:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">

<!-- Core -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/TylerWardUOM/retro-terminal-css@1/tokens.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/TylerWardUOM/retro-terminal-css@1/base.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/TylerWardUOM/retro-terminal-css@1/typography.css">

<!-- Pick the components you need -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/TylerWardUOM/retro-terminal-css@1/components/panel.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/TylerWardUOM/retro-terminal-css@1/components/button.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/TylerWardUOM/retro-terminal-css@1/components/meter.css">

npm

npm install retro-terminal-css

Then import in your CSS or bundler:

@import 'retro-terminal-css/tokens.css';
@import 'retro-terminal-css/base.css';
@import 'retro-terminal-css/typography.css';
@import 'retro-terminal-css/components/panel.css';

Quick Start

Add .rt-scanlines to <body> for the CSS scanline overlay:

<body class="rt-scanlines">

Panel

<div class="rt-panel">
  <div class="rt-panel__title">System Status</div>
  <div class="rt-panel__body">Content here.</div>
  <div class="rt-panel__footer">Last updated 00:01:42</div>
</div>

Variants: rt-panel--accent (orange border) · rt-panel--danger (red border) · rt-panel--inset

Buttons

<button class="rt-btn">Default</button>
<button class="rt-btn rt-btn--danger">Danger</button>
<button class="rt-btn rt-btn--ghost">Ghost</button>
<button class="rt-btn rt-btn--filled">Filled</button>
<button class="rt-btn rt-btn--sm">Small</button>
<button class="rt-btn rt-btn--lg">Large</button>

Meter

<div class="rt-meter">
  <div class="rt-meter__header">
    <span class="rt-meter__header-label">Buffer</span>
    <span class="rt-meter__header-value">92%</span>
  </div>
  <div class="rt-meter__track">
    <div class="rt-meter__fill" style="--meter-value: 92%"></div>
  </div>
</div>

Fill variants: rt-meter__fill--peak (gold) · rt-meter__fill--danger (red) · rt-meter__fill--primary (orange)
Track variants: rt-meter--sm · rt-meter--lg · rt-meter--xl · rt-meter--segmented

Bar Chart

<div class="rt-bar-chart-wrap" style="--chart-height: 200px;">
  <div class="rt-bar-chart rt-bar-chart--gridlines">
    <div class="rt-bar-chart__col">
      <div class="rt-bar-chart__bar" style="--bar-height: 78%"></div>
      <span class="rt-bar-chart__label">50 Hz</span>
    </div>
    <!-- more columns... -->
  </div>
</div>

Readout Row

<div class="rt-readout">
  <span class="rt-readout__label">Peak Latency</span>
  <span class="rt-readout__value">64 µs</span>
</div>

Badge

<span class="rt-badge rt-badge--active rt-badge--dot">Online</span>
<span class="rt-badge rt-badge--warn">Warning</span>
<span class="rt-badge rt-badge--danger">Error</span>

Form

<div class="rt-form-group">
  <label class="rt-form-label">User ID</label>
  <input class="rt-input" type="text" placeholder="OPERATOR_001">
</div>

<div class="rt-form-group">
  <label class="rt-form-label">Mode</label>
  <select class="rt-select">
    <option>Automatic</option>
    <option>Manual</option>
  </select>
</div>

<label class="rt-check">
  <input type="checkbox" checked> Enable Audit Log
</label>

Table

<div class="rt-table-wrap">
  <table class="rt-table rt-table--striped">
    <thead>
      <tr>
        <th class="rt-sortable rt-sort-asc">Channel</th>
        <th>Frequency</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="rt-td--primary">CH 1</td>
        <td>50 Hz</td>
        <td><span class="rt-badge rt-badge--active rt-badge--dot">Active</span></td>
      </tr>
    </tbody>
  </table>
</div>

Dashboard Layout

<div class="rt-dashboard rt-scanlines">
  <div class="rt-topbar">
    <span class="rt-topbar__title">My App</span>
    <div class="rt-topbar__spacer"></div>
    <span class="rt-topbar__status">▶ Live</span>
  </div>

  <div class="rt-dashboard__body">
    <aside class="rt-sidebar"><!-- sidebar content --></aside>
    <main class="rt-main"><!-- main content --></main>
    <aside class="rt-right-panel"><!-- right panel --></aside>
  </div>

  <div class="rt-bottombar">
    <span class="rt-bottombar__label">Status</span>
  </div>
</div>

Design Tokens

All values are CSS custom properties defined in tokens.css. Override any token on :root to retheme the entire system:

:root {
  --color-accent-primary:   #D96800;
  --color-text-primary:     #D98000;
  --color-panel-border:     #8B3A00;
  --font-mono: 'VT323', 'Courier New', monospace;
}

Key tokens:

| Token | Value | Usage | |---|---|---| | --color-bg | #000000 | Page background | | --color-panel-border | #8B3A00 | All borders | | --color-accent-primary | #D96800 | Buttons, active states | | --color-accent-secondary | #992200 | Danger, warnings | | --color-accent-highlight | #FFD700 | Peak indicators only | | --color-text-primary | #D98000 | Main text, values | | --color-text-dim | #4a2800 | Labels, metadata | | --color-bar-fill | #C43A00 | Meter and chart fills | | --font-mono | VT323 | All typography | | --border | 1px solid #8B3A00 | Shorthand border | | --radius | 0px | Never rounded |

Colour Themes

Seven palettes are included in themes/. Each is a scoped CSS class that overrides only the colour tokens — font, spacing, and borders are unchanged.

| Class | Description | |---|---| | rt-theme-amber | Default amber-orange on black | | rt-theme-phosphor | Classic P1 green CRT (Apple II, VT100) | | rt-theme-cyan | Aqua-teal sci-fi (Aliens, sonar) | | rt-theme-cobalt | Deep blue IBM terminal / starship bridge | | rt-theme-crimson | Dark red + orange data (Loki TVA) | | rt-theme-ghost | Monochrome white on black (VT100) | | rt-theme-violet | Deep purple cyberpunk neon |

Apply to any element — body-level for a full retheme, or scoped to a section:

<!-- Full page retheme -->
<body class="rt-theme-phosphor rt-scanlines">

<!-- Section-scoped -->
<div class="rt-theme-cobalt">
  <div class="rt-panel">...</div>
</div>

CDN usage (load theme after base styles):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/TylerWardUOM/retro-terminal-css@1/themes/phosphor.css">

npm usage:

@import 'retro-terminal-css/themes/phosphor.css';

License

MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

retro-terminal-css

Visual Style

File Structure

Usage

CDN (jsDelivr)

npm

Quick Start

Panel

Buttons

Meter

Bar Chart

Readout Row

Badge

Form

Table

Dashboard Layout

Design Tokens

Colour Themes

License