Zi UI is a token-driven CSS design system with a calm, editorial
aesthetic. Two-layer tokens (primitive → semantic), three orthogonal
theming axes (brand × light/dark × contrast). Neutral palette, low
chroma, 500 max font-weight, Geist typeface.
Activate this skill when the user asks to build, style, mock up, or prototype
UI in the Zi UI visual language — dashboards, internal tools, documentation
sites, admin panels, SaaS interfaces. Also activate when the user references
"Zi UI" by name, or asks to apply its tokens / components to an existing
page. In React / Next.js / Vite projects, generate thin wrapper components
on demand (3+ uses) instead of writing raw class strings everywhere.
Do NOT activate for marketing landing pages, games, heavily branded consumer
apps, or anything needing gradients, glows, or playful motion.
2026-04-18