ÆTHER Monochrome
Dark · pure monochrome · no accent — structure only
var(--color-primary)
dark
97 CSS variables read live from the document. 5 seed-algorithmic themes. φ motion on Fibonacci durations. Every component on every page inherits from this system — this page just shows you what it actually is.
Reading document tokens…
Import order in layout.tsx is the algorithm. Five layers, last wins. This is why one seed rebrands everything.
| # | Layer | Role | Tokens |
|---|---|---|---|
| 1 | blackswan-tokens.css | ÆTHER seed engine | --seed-* · --color-neutral-* |
| 2 | aether-monochrome.css | --a-* bridge → seed + materials/silk | --a-bg/fg/border · glass · shadows |
| 3 | midnight-terminal.css | Public-fork midnight chassis (gold-seeded) | signature-triangle · scrollbar |
| 4 | baz-brand.css | Signature gold · canonical (seed-owned) | --baz-gold-* · --baz-depth · --baz-signal |
| 5 | themes.ts (runtime) | 6 seed-algorithmic themes | --theme-brand · --bg/--surface triplets |
5 seed-algorithmic themes. Brand color is derived from --seed-hue per theme — 37° = BAZ gold. Switch via the app theme picker.
Change the hue — watch the world recompose. Drag the slider: the whole page recomposes in real time from one value. This is the moat.
Brand hue · 37 = BAZ gold, 0 = monochrome
--seed-hue—--seed-sat—--seed-lum—--seed-sat-dark—| Token | Value | Description |
|---|---|---|
--a-bg | — | L0 · The Void — page background |
--a-surface | — | L1 · The Silk — recessed panels |
--a-card | — | L2 · The Shadow — cards |
| Token | Value | Description |
|---|---|---|
--a-fg | — | Primary · L*97, AAA on void |
--a-muted | — | Secondary / muted |
--a-faint | — | Tertiary / faint |
| Token | Value | Description |
|---|---|---|
--a-border | — | Default hairline |
--a-line | — | Stronger line |
The one accent. Owned by the seed (--seed-hue:37 → #C29B5B) — always on, never gated. Indigo #8C6A30 is the depth pair; cyan is functional “live” status only.
| Token | Value | Description |
|---|---|---|
--baz-gold-hi | — | Gold highlight · #F7E3A8 |
--baz-gold-mid | — | THE signature gold · #C29B5B |
--baz-gold-lo | — | Gold low · #8C6A30 |
--baz-depth | — | Deep-gold depth · #8C6A30 |
--baz-signal | — | Gold signal (live status) · #C29B5B |
| Token | Value | Description |
|---|---|---|
--aether-ease-natural | — | φ natural · cubic-bezier(0.618,0,0.618,1) |
--aether-ease-glide | — | φ glide · (0.236,0.618,0.236,1) |
--aether-ease-snap | — | φ snap · (0.382,0,0.236,1) |
--aether-ease-float | — | float |
| Token | Value | Description |
|---|---|---|
--aether-duration-instant | — | 89ms · F(11) |
--aether-duration-swift | — | 144ms · F(12) |
--aether-duration-fast | — | 233ms · F(13) |
--aether-duration-normal | — | 377ms · F(14) |
--aether-duration-smooth | — | 610ms · F(15) |
--aether-duration-deliberate | — | 987ms · F(16) |
micro—tiny—xs—sm—base—lg—xl—xxl—| Token | Value | Description |
|---|---|---|
--a-glass-bg | — | Glass background |
--a-glass-blur | — | Blur radius |
--a-glass-border | — | Glass hairline |
--a-glass-highlight | — | Top inset highlight |
--a-glass-saturate | — | Saturation boost |
| Token | Value | Description |
|---|---|---|
--a-shadow-1 | — | Fibonacci · 0 1px 2px |
--a-shadow-2 | — | Fibonacci · 0 3px 5px |
--a-shadow-3 | — | Fibonacci · 0 5px 13px |
--a-shadow-glow | — | Glow composite |
Never chrome. --aether-functional-colors: 0 collapses them to neutral for pure monochrome.
| Token | Value | Description |
|---|---|---|
--aether-neutral | — | Neutral |
--aether-primary | — | Primary |
--aether-danger | — | Danger |
--aether-info | — | Info |
--aether-accent | — | Accent |
This is what users see when there's no data.
animate-fade-in-upanimate-scale-inanimate-slide-in-rightanimate-floatanimate-glowanimate-gradientOne seed (--seed-hue/sat/lum) recomposes the entire palette. 37° = BAZ gold, 0° = pure monochrome.
ÆTHER monochrome base + signature gold (canonical) + functional data colors only. Never chrome.
Easings on the golden ratio (0.618/0.382/0.236). Durations 89–987ms. Motion ≤200ms for UI, fade-in-up only.
Spacing 1–987px, type 8–144px, radius, blur, leading — every value is F(n).
Primary text L*97 → — on the void. WCAG 2.1 computed.
prefers-reduced-motion, prefers-reduced-transparency, prefers-contrast — all honored.
No framer-motion in server components. CSS animations on critical paths.
Five-layer cascade. This page reads it live — it cannot go stale.