🎨 CSS Variables Generator

Соберите свою дизайн-систему за пару минут

👁️ Live Preview

Sample Card Component

This component uses your design system variables. Change the controls to see how it adapts.

💻 Generated Code
🎨 Design Tokens
☀️ Light Mode Colors
Primary
Background
Surface
Text
Border
🌙 Dark Mode Colors
Primary
Background
Surface
Text
Border
📏 Spacing (Base: 8px)
8px
Border Radius (Base: 4px)
4px
🔤 Typography