26Authored palette entries

16Roles taken verbatim

10Roles derived

9Type steps

13Spacing steps

11Shape tokens

Ecosystem anatomy

Generated from projects/aetheris/tokens/tokens.json — aetheris/Aetheris · docs/design-system.md · src/design/tokens.rs · dist/assets/css/styleguide.css

Token documentprojects/aetheris/tokens/tokens.json

Compiled themedist/assets/css/theme-aetheris.css

Consumed as--ax-* custom properties

Variants1

Color tokens

Authored swatches first, then the derived ramp the CSS actually consumes.

brand

Core Accent

#FF6901

Primary brand action color, active states, glowing highlights

A 2.89 B 6.75

Accent Hover

#E05A00

Button hover, link hover

A 3.73 B 5.22

direction

Accent 2 (Engineering)

#6366F1

web-idea/brand/direction-engineering.css --accent-2

A 4.47 B 4.36

Direction Cyan

#06B6D4

web-idea/brand/direction-engineering.css --accent

A 2.43 B 8.02

Direction Rose

#FF2D55

web-idea/brand/direction-games.css --accent

A 3.65 B 5.34

Direction Amber

#FFB703

web-idea/brand/direction-games.css --accent-2

A 1.75 B 11.16

Obsidian

#06070C

web-idea/brand/brand-core.css --obsidian

A 20.13 B 1.03

Titanium

#8F96A3

web-idea/brand/brand-core.css --titanium

A 2.97 B 6.55

surface

Background Base

#0B0D0E

Global canvas background

A 19.48 B 1.00

Background Subtle

#0F1214

Section wash, sticky rails

A 18.80 B 1.04

Surface Low

#14171A

Card background, panel background

A 17.99 B 1.08

Surface Mid

#1B2024

Hovered surface, active tabs, inputs

A 16.42 B 1.19

Surface High

#242B30

Elevated popovers, dropdowns, modals

A 14.35 B 1.36

Surface Elevated

#2A3238

Highest z-layer chrome

A 13.03 B 1.49

border

Border Subdued

#1E2429

Dividers, secondary cards

A 15.68 B 1.24

Border Base

#2A333C

Primary card borders, input borders

A 12.83 B 1.52

Border Strong

#404D59

Hover borders, active rings

A 8.66 B 2.25

Border Hover

#5A6977

Focus-visible outlines

A 5.64 B 3.45

text

Text Primary

#F4F5F6

Headings, primary labels

A 1.09 B 17.84

Text Muted

#8E98A3

Secondary descriptions, captions, placeholders

A 2.93 B 6.65

Text Dim

#58636E

Metadata, shortcuts, disabled labels

A 6.13 B 3.18

Text Inverse

#0B0D0E

Text on accent fills

A 19.48 B 1.00

status

Success

#10B981

Operational status, verified tags

A 2.54 B 7.68

Warning

#F59E0B

High load status, alerts, notices

A 2.15 B 9.07

Danger

#EF4444

Error states, destructive actions

A 3.76 B 5.18

Info / Sky

#0EA5E9

Feature highlights, links, badges

A 2.77 B 7.03

derived-ramp DERIVED

Accent Glow

rgba(255, 105, 1, 0.25)

derived · --ax-accent-glow

A 1.31 B 1.42

Accent Subtle

rgba(255, 105, 1, 0.12)

derived · --ax-accent-subtle

A 1.14 B 1.14

Bg Subtle

#121415

derived · --ax-bg-subtle

A 18.48 B 1.05

Border Subdued

#222425

derived · --ax-border-subdued

A 15.59 B 1.25

Border Strong

#4c4e4f

derived · --ax-border-strong

A 8.37 B 2.33

Border Hover

#5f6162

derived · --ax-border-hover

A 6.23 B 3.13

Success Glow

rgba(16, 185, 129, 0.2)

derived · --ax-success-glow

A 1.21 B 1.34

Warning Glow

rgba(245, 158, 11, 0.2)

derived · --ax-warning-glow

A 1.16 B 1.41

Danger Glow

rgba(239, 68, 68, 0.2)

derived · --ax-danger-glow

A 1.30 B 1.22

Info Glow

rgba(14, 165, 233, 0.2)

derived · --ax-info-glow

A 1.22 B 1.32

Semantic roles → CSS custom properties

Semantic role	Custom property	Value	Source	Contrast vs surface
accent	`--ax-accent`	`#FF6901`	authored	6.23:1 AA
accentHover	`--ax-accent-hover`	`#E05A00`	authored	4.83:1 AA
accentGlow	`--ax-accent-glow`	`rgba(255, 105, 1, 0.25)`	derived	1.46:1 fail
accentSubtle	`--ax-accent-subtle`	`rgba(255, 105, 1, 0.12)`	derived	1.16:1 fail
bg	`--ax-bg`	`#0B0D0E`	authored	1.08:1 fail
bgSubtle	`--ax-bg-subtle`	`#121415`	derived	1.03:1 fail
surface1	`--ax-surface-1`	`#14171A`	authored	1.00:1 fail
surface2	`--ax-surface-2`	`#1B2024`	authored	1.10:1 fail
surface3	`--ax-surface-3`	`#242B30`	authored	1.25:1 fail
surfaceElevated	`--ax-surface-elevated`	`#2A3238`	authored	1.38:1 fail
borderSubdued	`--ax-border-subdued`	`#222425`	derived	1.15:1 fail
border	`--ax-border`	`#2A333C`	authored	1.40:1 fail
borderStrong	`--ax-border-strong`	`#4c4e4f`	derived	2.15:1 fail
borderHover	`--ax-border-hover`	`#5f6162`	derived	2.89:1 fail
text1	`--ax-text-1`	`#F4F5F6`	authored	16.48:1 AA
text2	`--ax-text-2`	`#8E98A3`	authored	6.14:1 AA
text3	`--ax-text-3`	`#58636E`	authored	2.93:1 fail
textInverse	`--ax-text-inverse`	`#0B0D0E`	authored	1.08:1 fail
success	`--ax-success`	`#10B981`	authored	7.09:1 AA
successGlow	`--ax-success-glow`	`rgba(16, 185, 129, 0.2)`	derived	1.38:1 fail
warning	`--ax-warning`	`#F59E0B`	authored	8.38:1 AA
warningGlow	`--ax-warning-glow`	`rgba(245, 158, 11, 0.2)`	derived	1.45:1 fail
danger	`--ax-danger`	`#EF4444`	authored	4.78:1 AA
dangerGlow	`--ax-danger-glow`	`rgba(239, 68, 68, 0.2)`	derived	1.24:1 fail
info	`--ax-info`	`#0EA5E9`	authored	6.49:1 AA
infoGlow	`--ax-info-glow`	`rgba(14, 165, 233, 0.2)`	derived	1.36:1 fail

Typography

Families: heading → darkerGrotesque · sans → archivo · mono → berkeleyMono · numerals → berkeleyMonoNumerals

Display Hero 56px · 700 · 1.05 heading

Frontier AI Inference

Heading 1 40px · 700 · 1.1 heading

High-trust, Zero-data-retention

Heading 2 32px · 700 · 1.15 heading

Every Frontier Model on One API

Heading 3 24px · 700 · 1.2 heading

Architecture & Token Routing

Body Large 18px · 500 · 1.5 sans

Deploy unified model pipelines across multi-cloud clusters.

Body Base 15px · 500 · 1.5 sans

Aetheris routes inference calls to optimal regional clusters.

Body Small / Caption 13px · 500 · 1.4 sans

Latency target: < 120ms to first token

Code / Mono Display 20px · 700 · 1.2 numerals

3,842,910 TOKENS/SEC

Code Base 14px · 400 · 1.6 mono

curl -X POST https://api.aetheris.dev/v1/chat/completions

Spacing

Base grid 4px

0.5x--space-0-5x

2px

1x--space-1x

4px

2x--space-2x

8px

3x--space-3x

12px

4x--space-4x

16px

5x--space-5x

20px

6x--space-6x

24px

8x--space-8x

32px

10x--space-10x

40px

12x--space-12x

48px

16x--space-16x

64px

20x--space-20x

80px

24x--space-24x

96px

Radii & shadows

--radius-xs 4px

--radius-sm 6px

--radius-md 8px

--radius-lg 12px

--radius-xl 16px

--radius-full 9999px

--shadow-sm 0 1px 2px rgba(0, 0, 0, 0.4)

--shadow-md 0 4px 12px rgba(0, 0, 0, 0.5)

--shadow-lg 0 12px 32px rgba(0, 0, 0, 0.6)

--shadow-glow 0 0 24px var(--ax-accent-glow)

--shadow-glowLg 0 0 48px rgba(255, 105, 1, 0.35)

Motion

Hover the tracks to compare easing curves.

--transition-fast 0.15s cubic-bezier(0.2, 0, 0, 1)

--transition-normal 0.25s cubic-bezier(0.22, 1, 0.36, 1)

--transition-slow 0.4s cubic-bezier(0.22, 1, 0.36, 1)

Atoms

Indivisible interface elements compiled from the theme above.

Button variants 5 variants

html

<button class="ax-btn ax-btn-primary">Primary</button>
<button class="ax-btn ax-btn-secondary">Secondary</button>
<button class="ax-btn ax-btn-outline">Outline</button>
<button class="ax-btn ax-btn-ghost">Ghost</button>
<button class="ax-btn ax-btn-danger">Danger</button>

Button sizes sm · md · lg

html

<button class="ax-btn ax-btn-primary ax-btn-sm">Small</button>
<button class="ax-btn ax-btn-primary">Medium</button>
<button class="ax-btn ax-btn-primary ax-btn-lg">Large</button>

Button states default · hover · focus · disabled

Text input & search

html

<input class="ax-input" placeholder="Search tokens...">

Checkbox, radio, switch

Enable token sync Emit light scaffold Live reload

html

<label class="ax-checkbox"><input type="checkbox" checked> Enable token sync</label>

Badges & status

Neutral Accent Operational Degraded Offline Pill

html

<span class="ax-badge ax-badge-accent">Accent</span>
<span class="ax-badge ax-badge-success"><span class="ax-status-dot active"></span> Operational</span>

Links, keys & inline code

Anchor link with accent underline

Shortcuts ⌘K ESC --ax-accent

Icons

games reborn

merlin

aetheris

Inlined from assets/vectors/ — vector masters, no rasterisation.

Molecules

Atoms bound into reusable units.

Search field molecule

⌘K

html

<div class="ds-search-molecule">…</div>

Stat card molecule

98/100

Accessibility

Tokens

Variants

Feature card molecule

◆

Token pipeline

One normalized document feeds CSS, docs and the asset index.

◇

Derived ramp

Missing roles are computed from accent, ink and paper — and badged as derived.

Callouts & notes

Note

Derived values are marked so authored intent stays distinguishable.

Tip

Click any swatch to copy its value.

Warning

Contrast below 4.5:1 fails AA for body copy.

Tabs & chips molecule

Dark Reborn 3D Rose / Amber MU3

Table molecule

Token	Value	Status
`--ax-accent`	brand accent	authored
`--ax-surface-2`	derived ramp	derived

Toast molecule

✓ Copied #FF6901 to clipboard

Organisms

Molecules composed into page-scale regions.

Header organism brand mark · nav · ecosystem switcher · command palette

DAetheris

Overview Style Guide Assets Docs

⌘K

Hero organism

Living style guide

Aetheris

High-trust inference engine · cyber-heraldic interface system

Open style guide Asset library

Terminal organism

build

$npm run build

▸ registry 4 ecosystems

▸ tokens 3 token documents

▸ assets 148 files

✓ dist generated in 0.4s

Matrix organism

Surface	Token set	Typography	Assets
Web	full	display + mono	svg + png
Desktop	full	display + mono	icns + png
CLI	mono only	mono	—

Role	bg	surface1	surface2	surface3
`text1`	17.84	16.48	15.05	13.15
`text2`	6.65	6.14	5.61	4.90
`text3`	3.18	2.93	2.68	2.34

Ratios computed at build time from the compiled theme — switch the palette variant in the header and this table is regenerated for that variant on the next build.