I’ve spent months to built a Figma design system with full token architecture and components
Been designing products for years. Got tired of rebuilding the same foundations every time, so I built Osnova UI — a professional design system I now ship to clients and decided to release publicly.
What makes it different from a typical UI kit:
Most kits give you flat screens you have to reverse-engineer. This is a living system — everything is wired together.
Foundations:
• Full color token system: primary, semantic, neutral
• Typography scale: Display · H1–H6 · Body · 5 weights (Regular → ExtraBold)
• Responsive grid: lg 1920 · md 1440 · sm 768 · xs 393
• Spacing, radius, layout primitives — all as Figma Variables
Components:
• Boolean toggles, instance swaps, dropdown variants
• Every component ships with: Type · State · Size · Color · Adornment · Nested instances
• No manual layer hunting — everything is surfaced through properties
Handoff:
Developers get one file with a clear, consistent structure. No drift between what the designer hands off and what gets built.
Free preview available in Figma with limited components — no purchase needed.
Happy to answer questions about token architecture, how variables are structured, or other questions.