Most frameworks ship you a design system. Zeus generates yours: semantic OKLCH color, fluid scale, spacing and components, all derived from a handful of tokens — and readable by your AI agent.
npm i zeus-cssv1.0 · MIT · Pure SCSS · Modern browsers only.zeus.tokens.jsonEvery token exported in the industry-standard DTCG format — the same language Figma variables and design tools speak.
llms.txtPlace it in your repo and every AI tool knows your design system from the first prompt — no guessing colors or spacing.
cheatsheet.mdThe human + machine reference is generated straight from the compiled CSS — structurally impossible to fall out of sync.
zeus-mcpOn the roadmapLet the agent query the design system live instead of guessing — built on zeus.tokens.json.
For maximum velocity. Thousands of utility classes generated from your design tokens give you instant styling power right in your HTML. Typography, spacing, colors, and more — zero extra CSS required.
<h1 class="text-h1 padding-lg border-radius-md shadow-md">Hello Zeus</h1>For modular component architecture. Build robust, maintainable SCSS components by pulling tokens directly via powerful, pre-configured mixins. Keep your markup clean.
.button {
@include text("h2");
@include padding("md");
@include border-radius("sm");
}For dynamic and flexible theming. Every token maps to a native CSS variable, empowering you to build responsive layouts, complex themes, and handle real-time state changes seamlessly.
.card {
font: var(--text-body);
border-radius: var(--border-radius-md);
box-shadow: var(--shadow-md);
}1<div class="padding-lg border-radius-md shadow-card"2 style="background: var(--color-surface);3 border: 1px solid var(--color-border-strong);">45 <p class="text-overline color-secondary margin-bottom-xs">6 Featured7 </p>89 <h3 class="text-h4 margin-bottom-sm">10 Design Tokens11 </h3>1213 <p class="text-body color-secondary margin-bottom-lg">14 Centralized system with colors, typography,15 spacing and more.16 </p>1718 <button class="btn-primary btn-sm">19 Learn More →20 </button>2122</div>Featured
Centralized system with colors, typography, spacing and more.
Defines global framework rules, feature flags, breakpoints, and fluid engine bounds.
Toggle prefixes, fluid typography, feature flags, and responsive breakpoints — all before the compiler runs. Zero side-effects: pure configuration.
The single place to override all design tokens — colors, typography, spacing — for your brand.
Change the entire color palette, border radiuses, font stacks, and spacing scale without touching core framework code. One file, full brand control.
Base semantic primitives: colors, typography scale, spacing, borders, shadows, grid — as Sass maps.
15 token files covering every visual dimension. Zeus stores OKLCH colors and fluid (floor, ceil) ranges in Sass maps — the semantic bedrock for all utilities. Feeds the $zeus-design-system master dictionary.
13 mixin & function files that transform token maps into CSS-ready logic.
Pure Sass: fluid clamp() math, color mixing, responsive helpers, theme builder, animation scaffolding. No CSS output — only callable tools for the layers above.
The public interface that exposes a curated subset of Engine utilities to component authors.
Clean commands like @include text(h1) or @include screen-above(md) that abstract engine complexity. Re-exports helpers, color-api, typography-calc, and sizing.
The only layer that emits CSS: Render globals + 20 utility modules, Components (card, modal), Patterns (hero, sidebar).
Outputs @property Houdini registrations, :root CSS variables, reset, typography base, and a complete utility system. Components and Patterns add pre-built BEM blocks on top.
A clean, semantic token foundation that front-end teams write with clarity and AI coding assistants inspect without ambiguity.
Define your colors once; Zeus generates everything that follows from them.
One stylesheet, three depths — use as much of it as you need.
The same system, in the language each reader already speaks.
Not someone else's decisions to override — your tokens, derived.
Tokens and components expose JSON-schema metadata, letting AI code assistants inspect, extend, and generate UI safely.
_fluid-core.scss) powers ALL fluid scaling — typography, spacing, borders, icon sizes. No manual breakpoints.This is the exact linear CSS expression generated by the Sass compiler.
(min, max) values. Change one number → CSS variables, @property, utility classes, and components all update.color-mix(in oklch, var(--color-primary), transparent 50%)@include text("h1") → full font shorthand + text-wrap: balance@include padding("lg", "x") → padding-inline: var(--space-lg)@include elevation(3) · shadow("lg")@include screen-above("lg") { } — mobile-first min-width query@include border-radius("md") → border-radius: var(--border-radius-md)Tailwind is utility-first — your design system ends up scattered across HTML classes, and fluid sizing needs manual config. Open Props gives you tokens, but not an engine: no derivation, no fluid math, no components. Rolling your own SCSS means rebuilding tokens and OKLCH color logic from scratch on every project. Zeus CSS sits in between: define a handful of tokens, and the engine derives semantic colors, fluid typography and spacing, and a full utility system — consumable as classes, CSS variables, or SCSS mixins, whichever fits your workflow.
Every token is exported automatically from the compiled CSS into zeus.tokens.json (the W3C DTCG standard — the same format Figma variables use) and llms.txt, a plain-language manifest built for AI tools. Drop either into an AI coding agent's context and it reads your actual colors, spacing, and typography scale instead of guessing generic values. A Zeus MCP server that lets agents query the system live is on the roadmap. It's a build step, not a prompt trick.
Zeus CSS is authored in Sass because that's the right tool for a compile-time token engine — but the output is plain, modern native CSS: cascade layers, OKLCH, container-query units, @property. Using the SCSS entry point gets you the full engine: mixins, config-driven customization, the theme-builder API. The project also ships a precompiled stylesheet for teams that would rather skip the Sass pipeline entirely — same underlying CSS, no build step required.
Zeus CSS is the free, open-source engine — tokens, fluid scaling, utilities, and the AI-native manifest. Zeus UI is a separate, premium component library: production-ready, accessible blocks (navbars, dashboards, forms, marketing sections) in plain, framework-agnostic HTML, built on top of Zeus CSS. Think of Zeus CSS as the foundation everyone gets for free, and Zeus UI as pre-built rooms you can buy instead of framing them yourself.
Yes. OKLCH-based semantic tokens mean you set five base colors once, and their light, muted, surface and border variants derive automatically — in CSS, via relative color syntax, so they stay live even if a color changes at runtime. For multi-brand needs, zeus-theme() lets you define named themes (an "ocean" palette, for example) that swap in behind a [data-theme] attribute, using the exact same derivation math as the defaults. Focus-visible states and prefers-reduced-motion are respected throughout the render layer by default. Override anything in one place — zeus.customize.scss — and it cascades everywhere, no hunting through component code.