Amber Console

A project by Diederik, also on X.

A monochrome amber-terminal CSS framework — the look of a late-1980s industrial control panel, the kind of amber plasma display that drove heavy machinery. One stylesheet, no dependencies, no build step, no JavaScript required for any component's appearance.

Live demo — ORION-70 console · System guide

Every rule in this framework descends from a hardware limitation rather than a taste preference. The panel could only light amber pixels, so hierarchy comes from brightness, inverse video and blink — never hue. Text sat on a character grid, so spacing is measured in 4px half-cells. Regions were drawn with strokes, so borders do the layout work and elevation does not exist. That constraint set is the whole design; see the six laws.

Install

A `` tag is the entire install.

Download dist/amber-console.css and the fonts/ directory, keeping them as siblings — the @font-face rules use ../fonts/. Or:

npm install amber-console

import "amber-console";          // dist/amber-console.css
import "amber-console/layer";    // wrapped in @layer amber-console

Which build

Custom properties survive into dist/ unresolved — they are the public API, so you can override any of them at runtime without rebuilding.

Quickstart

  
  
  
  …   
  
    
      Show Information
      STATUS:AUTO MODE