Monad System
Strata Layer Tier: State & Tokens

CSS custom properties (--strata-*) are the connective state layer. Every component reads from these. Theme switching rewrites Strata; components never hardcode color.

Ground — switches with theme

Ground--strata-bg
Layer 01--strata-layer-01
Layer 02--strata-layer-02
Layer 03--strata-layer-03
Text Primary--strata-text-primary
Border--strata-border

Signal — fixed across themes

Interactive--strata-interactive
Info--strata-info
Success--strata-success
Warning--strata-warning
Error--strata-error
Highlight--strata-highlight

Ground depth (Layering Model)

bg
layer-01
layer-02
layer-03
Typography Tier: Base

Inter (sans), JetBrains Mono (code), Lora (serif). Fluid scale via clamp(). No decorative weight — weight is structural.

54px — Display Light
42px — Hero Light
32px — Page Heading 600
28px — Section Heading 600
24px — Subheading 600
16px Body — The quick brown fox jumps over the lazy dog. Materially honest type.
14px Secondary — Helper text, captions, labels, secondary descriptions.
12px — OVERLINE MONO 700
Mono — const strata = {{ interactive: "#03A9F4" }};
Lora — editorial, longform, annotation contexts only.
Atomos — Buttons Tier: Atomos / Indivisible

Four intent variants. No radius. Transitions at 80ms linear — immediate, haptic. Hover states are high-contrast, not gentle fades.

<button class="atomos-btn atomos-btn--primary">Action</button>
Atomos — Tags & Badges Tier: Atomos / Indivisible

Monospaced labels for state communication. Badges are numeric counters only — never use as tags.

info success warning error neutral
3 12 ! numeric badges
Atomos — Notices Tier: Atomos / Indivisible

Left-border communicates severity. No background gradients — tinted flat fill only. Title + message mandatory.

i
System status
All services are operating within normal parameters.
✓
Build complete
All Monad artifacts compiled and written to build/.
!
Deprecation warning
This API will be removed in the next major version. Migrate before the cutoff date.
✕
Connection refused
Unable to reach remote. Verify network and try again.
Atomos — Cards & Tiles Tier: Atomos / Indivisible

No border-radius. Depth via 1px border, not shadow. Cards contain; tiles navigate. Stat variant for dashboard KPIs.

Standard active
Default card on strata-layer-01. Border is the only depth signal.
Flat
Subtle border. For dense data layouts where structure is implicit.
Interactive
Hover to see border shift to interactive color. Keyboard accessible.
Tile
hover → strata-layer-02 + signal border

Stat — for dashboards

Requests
2,847
↑ 12.4%
Uptime
99.2%
↑ 0.3%
Latency
148ms
↓ −8ms
Issues
14
↑ 3 today
Atomos — Forms Tier: Atomos / Indivisible

Focus state uses inset left-border (not glow ring). Labels are uppercase mono. No rounded inputs.

Max 500 characters
Must begin with https://
Atomos — Table Tier: Atomos / Indivisible

Column headers are uppercase mono. Zebra stripes are strata-layer-01 / strata-bg. Wrap in .atomos-table-wrap for overflow scroll.

Artifact Platform Theme Updated Status
monad.css HTML / CSS dual just now ready
monad.js HTML / JS — just now ready
ColorPalette.cs Unity C# dark just now ready
ColorPaletteLight.cs Unity C# light just now ready
seaborn_palette.py Python dual just now ready
Atomos — Progress Tier: Atomos / Indivisible

4px tall — functional, not decorative. Set --progress: N% on the fill. No radius.

signal
72%
success
100%
warning
45%
error
18%
Atomos — Domain Holds Tier: Atomos / Movement Domain

These colors are domain-specific and must not be repurposed for generic UI status. They map to physical movement classifications.

Start Hand Foot Finish
<span class="atomos-hold atomos-hold--start">Start</span>
Atomos — Textures Tier: Atomos / Pattern

Repeating SVG patterns defined as --strata-texture-* tokens. Functional — chart differentiation, state indication, accessibility. Never decorative.

Dot --strata-texture-dot
Vertical Hatch --strata-texture-hatch-v
Horizontal Hatch --strata-texture-hatch-h
Cross Hatch --strata-texture-hatch-x
Forward Diagonal --strata-texture-hatch-fwd
Backward Diagonal --strata-texture-hatch-bwd
<div class="atomos-texture atomos-texture--dot">...</div>
Monad — Shell Preview Tier: Monad / Structural

The structural skeleton. Header (48px fixed) + rail (240px) + content. See dashboard.html for a full working Monad shell.

Monad Overview Rail Strata
/ overview
/ analytics
/ deployments
/ settings
monad-content — strata-bg — full page content renders here