Design System
Miozu Base16
Write once. Theme everywhere.
A semantic color system where each of 16 colors has a clear responsibility. Learn it once, apply it everywhere - from VS Code to web apps to native mobile.
Quick Access
Semantic Color System
Each Base16 color has a fixed semantic role. base08 always means destructive, base0B always means success. This consistency lets developers pick colors instantly.
| Token | Alias | Role | Usage |
|---|---|---|---|
base08 | --color-error | Destructive | Delete, error, danger |
base09 | --color-warning | Warning | Caution, pending, review |
base0A | --color-highlight | Highlight | Search, featured, new |
base0B | --color-success | Success | Confirm, complete, active |
base0C | --color-info | Info | Secondary, neutral, tooltip |
base0D | --color-primary | Primary | Main action, links, brand |
base0E | --color-special | Special | Premium, AI, unique |
base0F | --color-alternative | Alternative | Deprecated, legacy |
Core Principles
Semantic Intent
Use --color-error not --base08. Semantic aliases make code self-documenting.
Theme Agnostic
Same CSS variables work in dark mode, light mode, or any custom theme. No duplicate stylesheets.
AI-First
Machine-readable tokens and llms.txt for AI assistants. Built for the future of development.
Framework Agnostic
Works with Svelte, React, Vue, vanilla CSS. Design tokens export to any platform.