🎨 aurora-ui

The shared design system of the Aurora Evidence Suite. Instrument-grade, dark/light, zero dependencies, no framework.

Used by ClaimTape, Traceboard, Evolution Ledger and Skill Distillery. Put the four side by side and they should read as one product family.

<link rel="stylesheet" href="aurora-ui.css">     <!-- v1: tokens + components -->
<link rel="stylesheet" href="aurora-ui.v2.css">  <!-- v2: plugin-grade layer -->

import { initAuroraUI, toast, readout } from '@aurora-suite/aurora-ui';

initAuroraUI({
  commands: [
    { id: 'export', label: 'Export report', hint: '⌘E', group: 'File', run: () => doExport() },
    { id: 'theme',  label: 'Toggle theme',                 run: () => applyTheme('light') },
  ],
});

aurora-ui.v2.css is purely additive — it never redefines a v1 selector, so you can adopt it file by file.

1. Instrument, not ornament. Every card shows a reading: value, unit, state, timestamp. A card with nothing to read should not be a card.
2. One focus per screen. .aurora-ring may appear exactly once. Everything else stays under 150 ms and only animates opacity / transform. assertSingleRing() warns you in dev when this drifts.
3. Density layers. The browse layer (.bento grids, dense) and the focus layer (drawers and detail views, airy) never mix on one surface.
4. OKLCH colour discipline. New colours are defined in OKLCH so perceptual lightness holds across both themes. Status colours come only from the four state tokens.
5. Texture triad, one each. Grain on the page background, glow on lamps and the ring, scanlines in terminals. Never two on the same element.

v1 (aurora-ui.css) — .card · .aurora-ring · .chip--ok/warn/danger/info · .btn · .input/.textarea · .dial (score gauge) · .timeline · .lane/.event-block (swimlanes) · .drawer/.scrim · .table · .dropzone · .toast · .notice · .empty · .progress

v2 (aurora-ui.v2.css) — .bento · .plug-card (status / readout / body / actions) · .readout · .lamp (+--live breathing) · .term (scanline terminal) · .spark (CSS-only sparkline) · .palette (⌘K)

JS (aurora-ui.js) — initAuroraUI · initTheme/applyTheme (dark → light → auto, persisted) · CommandPalette · attachTilt (≤3°, pointer devices only) · toast · readout · formatDuration · assertSingleRing

• Every interactive element has a visible :focus-visible ring. This is a floor, not a style choice.
• The command palette is fully keyboard operable: ⌘K/Ctrl-K, ↑ ↓, Enter, Esc, with role="listbox" and aria-activedescendant.
• prefers-reduced-motion: reduce disables all animation, including the aurora ring, card tilt and scroll-driven entrances.
• prefers-color-scheme is honoured in auto theme mode.
• A print stylesheet strips chrome so reports export cleanly.

Target: Lighthouse accessibility ≥ 95 on every consuming site.

aurora-ui 是 Aurora Evidence Suite 的统一设计系统，让四个前端看起来是同一家人。

五条美学法则：仪器感优先于装饰（每张卡都要有可读的数值）· 一屏一焦点（.aurora-ring 全屏只许出现一次）· 密度分层（浏览层密、聚焦层松，不混排）· OKLCH 色彩纪律（保证明暗双主题感知亮度一致）· 质感三件套各用一处（噪点只在页面背景、辉光只在状态灯和光环、扫描线只在终端组件，绝不叠加）。

无依赖、无框架，aurora-ui.v2.css 是纯叠加层，可以逐个文件迁移。

MIT © Zijian Ni