v0.1
Design once. Theme everything.
MinoCSS is a token-driven CSS framework that separates structure from design so you can build faster, customize instantly, and scale without rewriting styles.
Stop rewriting CSS.
Start controlling it.
MinoCSS lets you define design once using tokens — and apply it everywhere without touching your markup again.
Most CSS frameworks force you to choose between speed and control. Utility-first tools make your HTML messy. Traditional frameworks limit customization.
MinoCSS solves this by separating structure from design — using tokens as the single source of truth.
Build structure
Write clean, semantic HTML once — no utility classes, no styling noise.
Define tokens
Control colors, spacing, typography, and layout using a centralized token system.
Apply instantly
Change the entire design without touching your HTML.
Built for real-world development
Token-driven styling
Change your entire UI from a single source of truth.
Clean HTML
No utility clutter. Your markup stays readable and maintainable.
Instant theming
Switch between designs in seconds — no refactoring required.
Framework-agnostic
Works with plain HTML or inside React, Vue, or any stack.
Design vs Code sync
Use the same system in Figma and development.
Performance-first
Lightweight CSS with zero runtime overhead.
AI-friendly
Less code = better prompts, faster generation, fewer tokens wasted.
Design your UI
in real time
Adjust tokens and see your interface update instantly. No rebuilds. No guessing. Just direct control over your design system.
Open Design Manager
A real design system,
not just styles
MinoCSS gives you a complete design foundation powered by tokens — so every decision (spacing, typography, colors, layout) stays consistent, scalable, and easy to control. No overrides. No chaos. Just a system that works.
Sizing
A unified scale for spacing, typography, radius, and layout. Define proportions once and keep visual rhythm consistent across your entire UI.
Typography
Structured type system with predictable hierarchy and readable defaults. Easily control font sizes, weights, and spacing through tokens.
Colors
A flexible color system built for real interfaces. Manage backgrounds, surfaces, text, and accents with a minimal yet powerful palette.
Icons
Token-controlled icon styles with adjustable stroke and fill. Keep icons visually consistent and aligned with your design system.
Illustrations
Adapt SVG illustrations to your design system by controlling colors and stroke styles. Make visuals feel native to your UI without manual editing.
Animations
Subtle, pre-defined motion patterns designed to enhance usability — not distract from it. Consistent animations, controlled through tokens.
Token Collections
Has 462 tokens, allowing you to fully customize the website design. Minimal css usage in html DOM structure, but maximum flexibility out of the box.
Palette
Sizing
Theme
What’s coming next
We’re building tools to make UI development radically faster.
Visual page builder
AI assistant
AI-powered UI generation
Advanced theme editor
Token management system
Figma plugin
Form builder
Build better UI, faster
Get updates on new features, tools, and ideas behind MinoCSS.