Retro Amber-terminal CSS Framework - Amber Console

AuthorDutchDiederik

Last UpdateAugust 11, 2026

LicenseMIT

Features:

11 display palettes based on plasma gases and CRT phosphors.
Industrial control-panel layouts and component styling.
Buttons, tabs, navigation, toggles, fields, selects, and keypads.
Panels, status bars, readouts, meters, tables, lists, banners, dialogs, and setup boards.
Plasma bloom, CRT scanlines, retrace, afterglow, blink, cursor, and static scanline effects.
Pure CSS PPI radar sweep with a decaying wake.
Page-to-page persistence through the View Transitions API.
Classic cut-corner controls with an optional rounded style.
CSS custom properties for colors, typography, spacing, persistence, glow, layout, and component values.
ARIA attributes and native form states for selected, pressed, current, invalid, checked, and disabled states.
Separate optional modules for interface behavior and persistence effects.
Display presets that combine a display profile with matching simulations.
Cascade layer builds for embedding the framework in existing applications.
Reduced-motion, forced-colors, print, focus, zoom, and narrow-viewport rules.

How To Use It:

Installation

Keep the dist and fonts directories at the same level. The compiled stylesheet loads the bundled fonts through relative paths.

project/
├── index.html
├── dist/
│   └── amber-console.css
└── fonts/
    └── *.woff2

Load the default stylesheet in the head section of the page.

<link rel="stylesheet" href="dist/amber-console.css">

For NPM projects, install the package and import the stylesheet directly.

npm install amber-console

import "amber-console";

Amber Console also ships a cascade layer build for applications that already have their own design system. Load either the standard stylesheet or the layer build on a page.

import "amber-console/layer";

Available browser and module builds:

Build	Recommended use
`dist/amber-console.css`	Readable default stylesheet with source maps and unresolved custom properties.
`dist/amber-console.min.css`	Minified production stylesheet, 54kb or about 9.4kb gzipped.
`dist/amber-console.layer.css`	Framework styles wrapped in `@layer amber-console`.
`dist/amber-console.layer.min.css`	Minified cascade layer build.
`dist/amber-console.js`	Optional ES module for interface behavior.
`dist/amber-console.global.js`	Optional classic script for interface behavior and local `file://` pages.
`dist/amber-console.effects.js`	Optional ES module for persistence effects.
`dist/amber-console.effects.global.js`	Classic script build of the persistence module.

Basic Usage

A minimal neon plasma console uses .ac-bloom on the outer screen and an .ac-mesh child for the plasma simulation. The example below adds a sticky navigation bar, status strip, readout, and operator button. Keep the navigation inside .ac-screen when it belongs to the simulated display.

<!doctype html>
<html lang="en" data-ac-tech="plasma" data-ac-emitter="neon">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="dist/amber-console.css">
  <title>Telemetry Console</title>
</head>
<body>
  <div class="ac-screen ac-bloom">
    <span class="ac-mesh" aria-hidden="true"></span>
    <nav class="ac-nav ac-nav--sticky" aria-label="Console sections">
      <span class="ac-nav__mark">NODE-14</span>
      <div class="ac-nav__links">
        <a
          class="ac-nav__link ac-nav__link--active"
          aria-current="page"
          href="#status"
        >
          Status
        </a>
        <a class="ac-nav__link" href="#logs">Logs</a>
      </div>
      <span class="ac-nav__meta">LINK:ACTIVE</span>
    </nav>
    <main class="ac-screen__body">
      <section class="ac-panel" id="status">
        <span class="ac-panel__title">System Status</span>
        <div class="ac-stack">
          <div class="ac-statusbar" role="status">
            <span>STATUS:NOMINAL</span>
          </div>
          <div class="ac-readout ac-readout--lg">
            <div class="ac-readout__label">Core Temp</div>
            <div class="ac-readout__value">
              72<span class="ac-readout__unit">°C</span>
            </div>
          </div>
          <button class="ac-btn ac-btn--filled" aria-pressed="true">
            Run Cycle
          </button>
        </div>
      </section>
    </main>
  </div>
</body>
</html>

Choose a Display Profile

Amber Console separates display technology from the light-producing material inside it. Set data-ac-tech and data-ac-emitter on the root element. The default profile uses a neon plasma display.

<html data-ac-tech="plasma" data-ac-emitter="neon">

Use the P3 phosphor profile for the familiar amber CRT appearance.

<html data-ac-tech="crt" data-ac-emitter="p3">

The framework includes four plasma gases and seven CRT phosphors.

Profile	Appearance
`plasma / neon`	Orange-red plasma display and the default profile.
`plasma / helium`	Pale pink discharge.
`plasma / argon`	Dim violet-lavender discharge.
`plasma / krypton`	Pale violet-white discharge.
`crt / p3`	Classic amber CRT phosphor.
`crt / p1`	Willemite green phosphor with medium persistence.
`crt / p4`	White television phosphor blend.
`crt / p7`	Blue flash with a long yellow-green persistence trail.
`crt / p11`	Fast-decay blue phosphor.
`crt / p31`	Bright green CRT phosphor.
`crt / p39`	Long-persistence yellow-green phosphor.

Use Plasma and CRT Screen Effects

Plasma and CRT use separate screen simulations. A plasma frame uses .ac-bloom with an .ac-mesh child.

<div class="ac-screen ac-bloom">
  <span class="ac-mesh" aria-hidden="true"></span>
  <main class="ac-screen__body">
    ...
  </main>
</div>

A CRT frame uses .ac-crt. Add .ac-afterglow for phosphor persistence. The retrace band needs an .ac-retrace child, and persistence needs an .ac-persist child. Omit .ac-retrace when the moving retrace band is unnecessary. The behavior module exposes data-ac-style-retrace for runtime control of the band. prefers-reduced-motion suppresses this motion.

<div class="ac-screen ac-crt ac-afterglow">
  <span class="ac-retrace" aria-hidden="true"></span>
  <span class="ac-persist" aria-hidden="true"></span>
  <main class="ac-screen__body">
    ...
  </main>
</div>

Add the Optional JavaScript Modules

Load amber-console.js for interface behavior and amber-console.effects.js for persistence that depends on JavaScript. Either module works on its own.

Module	What it adds
`amber-console.js`	Keyboard tabs, ARIA-pressed toggles, display switches, dialogs, display presets, and style controls.
`amber-console.effects.js`	Rewritten-text ghosts, scroll smear, and framebuffer decay for persistent CRT displays.

Classic script pages load either or both global builds.

<script src="dist/amber-console.global.js"></script>
<script src="dist/amber-console.effects.global.js"></script>

ES module projects import the same functionality from the package.

import "amber-console/js";
import "amber-console/effects";

Drive State with ARIA Attributes

Amber Console reads semantic state from ARIA attributes and native form properties. React, Vue, Svelte, Astro, HTMX, and server-rendered applications drive the same states through their normal rendering flow. Checkboxes, radio buttons, disabled controls, and CSS-only toggles use native :checked and :disabled states.

<button class="ac-btn" aria-pressed="true">Run</button>
<button
  class="ac-tab"
  role="tab"
  aria-selected="true"
  aria-controls="diagnostics-panel"
>
  Diagnostics
</button>
<a class="ac-nav__link" aria-current="page" href="#overview">
  Overview
</a>
<input class="ac-input" type="text" aria-invalid="true">

Add Keyboard-Enabled Tabs

The behavior module applies the tablist keyboard model to elements marked with data-ac="tabs". Arrow keys move between tabs. Home and End jump to the first and last tab. Pair each tab with a matching role="tabpanel" region through aria-controls.

<div class="ac-tabs" role="tablist" aria-label="Console views" data-ac="tabs">
  <button
    id="telemetry-tab"
    class="ac-tab"
    role="tab"
    aria-selected="true"
    aria-controls="telemetry-panel"
  >
    Telemetry
  </button>
  <button
    id="alarms-tab"
    class="ac-tab"
    role="tab"
    aria-selected="false"
    aria-controls="alarms-panel"
  >
    Alarms
  </button>
</div>
<section
  id="telemetry-panel"
  role="tabpanel"
  aria-labelledby="telemetry-tab"
>
  ...
</section>
<section
  id="alarms-panel"
  role="tabpanel"
  aria-labelledby="alarms-tab"
  hidden
>
  ...
</section>

Create Display Presets

A display preset combines a technology and emitter with the simulation that matches that hardware. The behavior module reads data-ac-display, data-ac-tech, data-ac-emitter, and data-ac-sims from the radio input. Selecting the preset below applies the P3 palette and CRT simulation. Projects define their own catalog rows with the same HTML hooks.

<label class="ac-radio">
  <input
    type="radio"
    name="ac-display"
    data-ac-display
    data-ac-tech="crt"
    data-ac-emitter="p3"
    data-ac-sims="crt"
  >
  <span>Amber CRT</span>
</label>

Use Classic or Rounded Controls

Amber Console uses cut corners and a hard offset edge as its default control style. Apply .ac-rounded to a region that needs the smoother rounded treatment. Apply .ac-classic inside a rounded region to restore the default style for that subtree. The behavior module controls the page-wide variant through data-ac-style-classic.

<section class="ac-rounded">
  <button class="ac-btn">Rounded Key</button>
  <div class="ac-classic">
    <button class="ac-btn">Classic Key</button>
  </div>
</section>

Create a PPI Radar Sweep

The .ac-sweep component draws a rotating radar beam and a decaying wake in CSS. Add an .ac-sweep__beam child inside the radar face. Public controls include --ac-sweep-period, --ac-sweep-arc, and --ac-sweep-line.

<div class="ac-sweep">
  <span class="ac-sweep__beam" aria-hidden="true"></span>
</div>

Enable Page-to-Page Persistence

Cross-document persistence uses the browser View Transitions API to keep the previous screen visible while its phosphor image decays. Add the document-level opt-in to your own stylesheet for navigation that carries this effect between pages.

@view-transition {
  navigation: auto;
}

JavaScript API

Both optional modules initialize automatically. These methods handle dynamically inserted controls, explicit ghosts before element removal, and framebuffer decay around discrete view changes.

// Initialize behavior hooks inside newly rendered markup.
AmberConsole.init(newPanel);
// Start or re-run persistence monitoring.
AmberConsoleEffects.init();
// Leave a ghost before removing an element.
AmberConsoleEffects.afterglow(logRow);
logRow.remove();
// Preserve the old framebuffer during a discrete view change.
AmberConsoleEffects.transition(() => {
  panel.replaceChildren(nextView);
});

Implementation Tips

Keep dist and fonts as sibling directories when using the downloaded stylesheet.
Use .ac-bloom for plasma screens or .ac-crt for CRT screens.
Place .ac-nav inside .ac-screen when navigation belongs to the simulated display.
Leave disabled simulations out of the initial markup to prevent an effect from appearing before stored state is restored.
Call AmberConsole.init(scope) after rendering new elements that use data-ac behavior hooks.

Core Layout Classes

Layout components use --ac-gap and --ac-cols for local spacing and grid configuration.

Class	Purpose
`.ac-screen`	Full-height console frame and simulation host.
`.ac-screen__body`	Padded content region inside the screen.
`.ac-stack`	Vertical flex layout controlled through `--ac-gap`.
`.ac-row`	Horizontal flex layout with wrap, alignment, distribution, and end modifiers.
`.ac-grid`	Grid layout controlled through `--ac-cols`.
`.ac-grid--console`	Console grid with an operating region and instrument region.
`.ac-col-2`, `.ac-col-3`, `.ac-col-4`, `.ac-col-6`	Grid column spans.
`.ac-spacer`, `.ac-grow`, `.ac-push`	Flexible spacing and alignment helpers.
`.ac-sr-only`	Visually hidden text for assistive technologies.

Control Classes

Button modifiers include --filled, --dim, --lg, --sm, --pad, and --block. Form controls support block, invalid, and disabled states through classes or native attributes.

Class	Purpose
`.ac-btn`	Operator soft key for buttons, links, and submit inputs.
`.ac-tabs`, `.ac-tab`	Soft-key tablist and individual tabs.
`.ac-nav`	Screen-level navigation bar.
`.ac-setup`	Permanently open control board for display and simulation settings.
`.ac-check`	Checkbox rendered as a filled hardware status bit.
`.ac-radio`	Exclusive mode selector.
`.ac-toggle`	Two-position switch with visible ON and OFF text.
`.ac-field`, `.ac-input`	Labeled field and recessed input well.
`.ac-select`	Styled select wrapper with a terminal arrow glyph.
`.ac-keypad`	Three-column numeric entry pad.

Display Classes

These classes handle framed regions, machine status, instrument values, data grids, alerts, meters, and native dialogs.

Class	Purpose
`.ac-panel`	Framed content region with legend or inverse-bar title styles.
`.ac-statusbar`	Inverse machine-status strip or line-style data row.
`.ac-readout`	Instrument value with label, value, and unit elements.
`.ac-badge`	Small terminal label for short state text.
`.ac-banner`	Highest-priority alert treatment for one message per screen.
`.ac-table`	Data grid with zebra, dense, numeric, and active-row styles.
`.ac-list`	Definition-list display with keyed values and leader dots.
`.ac-meter`	Stepped bar graph controlled through `--ac-meter-value`.
`.ac-dialog`	Native dialog styled as a flat console window.
`.ac-spinner`	Character-based loading indicator.
`.ac-hr`	Two-pixel divider with an optional bright modifier.

Effect and Style Classes

Apply screen simulations to the outermost frame. Keep the plasma and CRT simulations separate.

Class	Purpose
`.ac-blink`	Hard on-off blink cycle.
`.ac-cursor`	Trailing block cursor.
`.ac-bloom`	Plasma glow, cell mesh, light bleed, and subtle electrical motion.
`.ac-crt`	CRT scanlines, vignette, drift, flicker, and optional retrace.
`.ac-afterglow`	Persistence, residual patches, decay, and optional JavaScript ghosts.
`.ac-sweep`	PPI radar beam with a decaying wake.
`.ac-scanlines`	Static line texture for thumbnails and motion-free treatments.
`.ac-classic`	Explicitly applies the default cut-corner hardware style.
`.ac-rounded`	Restores smooth rounded corners inside a selected scope.

CSS Variables and Component Hooks

All public Amber Console custom properties use the --ac-* prefix. Override global values after the framework stylesheet, or set component-level values directly on a container.

Variable group	Key properties
Surfaces	`--ac-screen`, `--ac-screen-raised`, `--ac-screen-well`, `--ac-on-fill`.
Emitter ramp	`--ac-emit-100`, `--ac-emit-90`, `--ac-emit-70`, `--ac-emit-50`, `--ac-emit-30`.
Semantic colors	`--ac-ink`, `--ac-ink-bright`, `--ac-ink-dim`, `--ac-ink-faint`, `--ac-ink-trace`, `--ac-fill`, `--ac-fill-bright`, `--ac-stroke`, `--ac-stroke-dim`.
Typography	`--ac-font-terminal`, `--ac-font-micro`, `--ac-type-display`, `--ac-type-title`, `--ac-type-body`, `--ac-type-small`, `--ac-type-micro`, `--ac-leading`.
Spacing and shape	`--ac-space-1` through `--ac-space-12`, `--ac-border-w`, `--ac-radius`, `--ac-radius-sm`.
Glow and persistence	`--ac-glow-text`, `--ac-glow-box`, `--ac-persist`, `--ac-decay`, `--ac-decay-fast`, `--ac-persist-tail`, `--ac-decay-ease`.
Screen effects	`--ac-mesh-pitch`, `--ac-mesh-wire`, `--ac-sweep-period`, `--ac-sweep-arc`, `--ac-sweep-line`.
Component hooks	`--ac-gap`, `--ac-cols`, `--ac-screen-pad`, `--ac-panel-title-bg`, `--ac-meter-value`, `--ac-backdrop`.

Set component-level values directly on a panel when it needs different grid spacing, screen padding, or meter data from the page defaults.

<div class="ac-screen" style="--ac-screen-pad: 32px">
  <div
    class="ac-grid"
    style="--ac-cols: 12; --ac-gap: var(--ac-space-6)"
  >
    <section class="ac-panel ac-col-6">
      <span class="ac-panel__title">Power Output</span>
      <div class="ac-meter">
        <div
          class="ac-meter__track"
          style="--ac-meter-value: 72%"
          role="progressbar"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow="72"
        >
          <span class="ac-meter__bar"></span>
        </div>
      </div>
    </section>
  </div>
</div>

Alternatives:

Changelog:

v2 (08/11/2026)

Update

Retro Amber-terminal CSS Framework – Amber Console