为什么值得关注

它严格遵循基于六条硬件派生法则（无色相、无层级、无图标）的设计系统，并包含真实的 CRT/等离子效果，同时保持了可访问性和对比度比率。

适合谁使用

构建复古风格仪表盘或终端界面的开发者
寻找针对控制面板的特定风格框架的设计师
创建老式计算机或工业界面模拟的爱好者
需要轻量、非侵入式且无需构建步骤的 CSS 框架的团队

典型使用场景

状态板与监控仪表盘
终端模拟器或控制台风格应用
具有复古工业美学的游戏界面
硬件模拟器的控制面板界面

项目优势

零运行时依赖；所有组件仅需一个 CSS 链接标签即可工作
使用纯 CSS 和可选 JavaScript 实现详细的 CRT 和等离子效果（辉光、余晖、扫描线）
可访问性优先，提供计算后的对比度比率、支持 prefers-reduced-motion 和强制颜色模式
两个调色板气体（霓虹和琥珀），每个都经过完整的对比度验证

使用前须知

不适用于现代、品牌灵活的用户界面；严格限定于特定风格，不支持多色方案
由于位图字体的限制，小文本（18px 以下）只能通过 Silkscreen 字体使用
需要显式的标记结构来实现效果（例如 mesh、retrace 子元素），且静态标记必须与默认状态匹配以避免闪烁

README 快速开始

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

File	Use it when
`dist/amber-console.css`	Default. Readable, sourcemapped, custom properties intact.
`dist/amber-console.min.css`	Production. 35kb, 6.6kb gzipped, same behaviour.
`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.
`dist/amber-console.js`	Optional behaviour, ES module. For bundlers.
`dist/amber-console.global.js`	Optional behaviour, classic script. Needed for `file://` pages, where `type="module"` is blocked.

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

项目描述

A UI design system inspired by the 1970s

AmberConsole