Color Tokens

#

Semantic tokens that automatically swap between Paper light and Obsidian dark. Click any card to copy its CSS variable.

Canvas Primary

--aui-bg-primary

Canvas Secondary

--aui-bg-secondary

Canvas Tertiary

--aui-bg-tertiary

Signature Crimson

--aui-primary

Hairline Border

--aui-border-color

Strong Border

--aui-border-strong

Carbon Primary

--aui-text-primary

Carbon Secondary

--aui-text-secondary

Carbon Muted

--aui-text-muted

Operational Emerald

--aui-success

Warning Amber

--aui-warning

Outage Rose

--aui-danger

Code Block BG

--aui-pre-bg

Hover Surface

--aui-clickable-hover

Active Surface

--aui-clickable-active

Glass Blur Surface

--aui-bg-glass

Typography Scale & Typefaces

#

Engineered hierarchy: Assistant headings and body, Lora serif pull quotes, and IBM Plex Mono code.

Heading 1 · 32px (Assistant)

font-heading / bold / -0.015em tracking

Heading 2 · 24px: Component & Section Titles

font-heading / semi-bold / -0.01em tracking

Heading 3 · 18px: Card & Widget Headers

font-heading / semi-bold / -0.005em tracking

Body · 15px base (Assistant): Dense, readable, editorial body typography designed for high information density across data screens and engineering essays.

font-sans / regular / 15px

“Simplicity is a prerequisite for reliability. Complex systems always fail in complex ways.” (Lora Italic Serif)

font-serif / italic / reserved for engineering maxims

const cluster = new RaftCluster({ id: "cls_01HX98Z", quorum: 3 }); (IBM Plex Mono)

font-mono / tabular numbers / telemetry & code

Borders, Radius & Elevation

#

1px hairlines everywhere, flat card surfaces, and restrained shadows.

Corner Radius

sm · 4px

md · 8px

lg · 12px

Shadows (Subtle Restraint)

xs (Subtle)

Hover Lift

Modal / Large

shadcn Bridge & HSL Tokens

#

How Array UI bidirectional tokens interoperate with shadcn/ui.

Array UI integrates directly with shadcn/ui. CSS variables defined in shadcn.css automatically map to --primary, --secondary, --background, --border, etc.

shadcn.css

:root {
  --background: 43 25% 97%;   /* #faf9f5 Paper */
  --foreground: 247 7% 19%;   /* #2d2c33 Carbon */
  --primary: 356 100% 45%;    /* #e5000f Signature Crimson */
  --border: 41 24% 86%;       /* #e5e0d3 Hairline */
}
.dark {
  --background: 240 6% 7%;    /* #111113 Obsidian Carbon */
  --foreground: 240 5% 85%;   /* #d6d6dc Soft White */
  --primary: 355 100% 60%;    /* #ff3344 Crimson Dark */
  --border: 240 5% 16%;       /* #27272c Hairline */
}

Mathematical Spacing & Layout Rhythm

#

Predictable proportional spacing scale from 2xs (4px) to 4xl (128px) for Gutter spacers, Stack gaps, and Row flow.

Spacing Scale (Gutter & Gaps)

2xs 0.25rem · 4px

aui-gutter-2xs

xs 0.5rem · 8px

aui-gutter-xs

sm 0.75rem · 12px

aui-gutter-sm

md 1.5rem · 24px

aui-gutter-md

lg 2.25rem · 36px

aui-gutter-lg

xl 3rem · 48px

aui-gutter-xl

2xl 4.5rem · 72px

aui-gutter-2xl

3xl 6rem · 96px

aui-gutter-3xl

4xl 8rem · 128px

aui-gutter-4xl

Layout Flow Primitives & Rules

.aui-stack Gap: 1rem (16px)

Vertical flex column flow

.aui-stack-xs (0.25rem), .aui-stack-sm (0.5rem), .aui-stack-lg (1.5rem)

.aui-row Gap: 0.75rem (12px)

Horizontal flex row with vertical centering

.aui-row-xs (0.25rem), .aui-row-sm (0.5rem), .aui-row-lg (1.25rem)

.aui-gutter Gap: 1.5rem (24px default)

Whitespace blank spacer primitive

.aui-theatre-grid Gap: 1.5rem

Responsive 2-column player layout with sticky sidebar

minmax(0, 1fr) 340px, collapses on mobile (< 900px)

Stack Normalization Invariant: Inside .aui-stack and .aui-theatre-main, margins on nested headings, breadcrumbs (.aui-breadcrumbs), and tabs (.aui-tabs) are normalized to zero to prevent margin collapsing and preserve mathematically pure layout rhythm.

Base Reset & Architectural Invariants

#

Global browser resets and core invariants enforced by base.css and Array UI design rules.

Enforced [hidden] Dismissal base.css

[hidden] { display: none !important; }

Forces display: none with !important on any element with the hidden attribute, ensuring zero DOM footprint regardless of framework or specificity.

Universal Box-Sizing base.css

*, *::before, *::after { box-sizing: border-box; }

Predictable mathematical geometry across cards, inputs, and hairline borders without padding overflow.

Viewport Scroll Clearance base.css

html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }

Smooth anchor navigation with automatic offset clearance for fixed headers.

Strict Zero Custom CSS Invariant AGENTS.md

0% Custom CSS Invariant

Application pages must remain 100% free of ad-hoc .css files and <style> tags, driven entirely by native components and tokens.

Foundations & Design Tokens