Monad System

          HTML
          drop-in
        
<!-- 1. Link the system -->
<link rel="stylesheet" href="build/monad.css">
<script src="build/monad.js"></script>

<!-- 2. Shell -->
<header class="monad-header">
  <span class="monad-header__name">App</span>
  <button class="strata-toggle" data-mn-theme-toggle>◑</button>
</header>

<!-- 3. Components -->
<button class="atomos-btn atomos-btn--primary">Action</button>

<div class="atomos-card">
  <div class="atomos-card__header">
    <span class="atomos-card__title">Title</span>
  </div>
  <div class="atomos-card__body">Content.</div>
</div>

<!-- Custom styles: only use --strata-* tokens -->
<style>
  .my-component {
    background: var(--strata-layer-01);
    border: 1px solid var(--strata-border);
    color: var(--strata-text-primary);
    transition: background var(--threshold-fast);
  }
</style>

Python
from build.seaborn_palette import (
    PALETTE_DARK, CATEGORICAL,
    apply_dark_theme
)

apply_dark_theme()
sns.barplot(palette=CATEGORICAL)

Unity C#
// Dark Strata
Color bg = ColorPalette.Background;
Color sig = ColorPalette.Information2;

// Light Strata
Color bgL = ColorPaletteLight.Background;

C++ / Arduino
// TFT (Adafruit GFX, TFT_eSPI, LVGL)
#include <Monad.h>
using namespace monad;

tft.fillScreen(rgb565(theme::BACKGROUND));
tft.setTextColor(rgb565(theme::TEXT_PRIMARY));

// Mono e-ink / OLED — one token, one line
bool ink = !mono(theme::TEXT_PRIMARY);

Build Outputs — python src/compile_color.py --json_path colors.json --output_path build/

build/monad.css CSS system bundle. CSS · dual

build/monad.js Theme toggle, nav, and motion tokens on window.MN. JS

build/ColorPalette.css CSS tokens only. CSS · dark

build/ColorPalette.cs Unity C# color class for dark mode. C#

build/ColorPaletteLight.cs Unity C# color class for light mode. C# · light

build/TexturePatterns.cs Unity Texture2D pattern generators. C# · textures

build/MotionTokens.cs Unity motion constants and easing curves. C# · motion

build/seaborn_palette.py matplotlib and seaborn palette, textures, and motion helpers. Python · dual

build/themes/swiftui/ SwiftUI adaptive Color, textures, and motion tokens. SwiftUI · dual

build/themes/vscode/ VS Code / Cursor theme extension — make install-vscode. VS Code · dual

build/themes/ghostty/ Ghostty terminal themes — make install-ghostty. Ghostty · dual

build/themes/xcode/ Xcode font and color themes — make install-xcode. Xcode · dual

build/cpp/Monad/ Header-only Arduino library — RGB888 source, constexpr RGB565 / gray8 / mono for TFT, OLED, and e-ink. C++ · Arduino · dual

Rules

01 — SHAPE

No border radius.

02 — DEPTH

No gradients. Use borders and layer steps for depth.

03 — MOTION

Use 80ms linear transitions.

04 — COLOR

Components never hardcode color. Every visual property reads from --strata-*.

05 — TYPE

Use mono for numeric values, IDs, labels, and timestamps.

06 — SCOPE

Keep decorative styling out of the system.

MonadSystem

Monad
System