Monad System
Design Tokens

Monad
System

Generated from colors.json. Includes CSS, JS, Unity C#, Python, SwiftUI, VS Code, Ghostty, Xcode, and C++/Arduino outputs.

Dashboard Sample Components Sample GitHub ↗
Strata
--strata-*
Token layer. CSS custom properties for color, spacing, type, and motion.
Monad
.monad-*
Layout layer. Shell, grid, header, rail, and page structure.
Atomos
.atomos-*
Component layer. Buttons, cards, tags, forms, tables, and progress.
Threshold
.threshold-*
Navigation and state changes. Menu toggle, rail drawer, and transitions.
bg
layer-01
layer-02
layer-03
interactive
success
warning
error
move-start
move-hand
move-foot
move-finish
Movement tokens
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/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
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.