GitHub - DutchDiederik/AmberConsole: A UI design system inspired by the 1970s

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. ORION-70 console · D-STAR server dashboard · SEASCAN radar · TELEMARK terminal · 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. A <link> tag is the entire install. <link rel="stylesheet" href="amber-console.css"> Download dist/amber-console.css and the fonts/ directory, keeping them as siblings — the @font-face rules use ../fonts/. Or: Coming from 1.x? Every custom property is now --ac-* prefixed and the old bare names are gone rather than aliased, so an override like --ink: lime is silently ignored. That is the only breaking change; the 1.x attributes and JS calls all still work. Full migration table in DEPRECATIONS.md. import "amber-console"; // dist/amber-console.css import "amber-console/layer"; // wrapped in @layer amber-console Default. Readable, sourcemapped, custom properties intact. dist/amber-console.min.css Production. 54kb, 9.4kb gzipped, same behavior. dist/amber-console.layer.css Dropping into an existing app — @layer makes the framework lose specificity fights against your own rules. Use instead of, never alongside. dist/amber-console.layer.min.css The same, minified. Production embedding. Optional behavior, ES module. For bundlers. dist/amber-console.global.js Optional behavior, classic script. Needed for file:// pages, where type="module" is blocked. dist/amber-console.effects.js Optional persistence, ES module. Ghosting, scroll smear, framebuffer decay. dist/amber-console.effects.global.js The same, classic script. The CSS is the framework. Both JS modules are optional, and they are optional separately. Neither imports the other; either works alone; the stylesheet works with neither. Every component, all 11 palettes Decay-out — things that disappear drain…