Theme Presets
Same HTML, completely different look. Themes only override design tokens -- no extra classes needed.
Default Theme
Active
Success
Warning
Danger
The default theme uses balanced colors and medium border radii.
Sharp Theme
Editorial
Success
Warning
Danger
Sharp: Zero border radius, hard shadows, high contrast, editorial feel.
Soft Theme
Friendly
Success
Warning
Danger
Soft: Large border radii, warm colors, gentle shadows, approachable.
Brutalist Theme
Experimental
Success
Warning
Danger
Brutalist: Zero radius, hard offset shadows, monospace headings, bold colors.
Neon Theme
VibrantSuccessWarningDanger
Neon: Glowing colors, dark backgrounds, cyberpunk aesthetic.
Earth Theme
NaturalSuccessWarningDanger
Earth: Warm browns, greens, terracotta. Organic, natural feel.
Ocean Theme
CalmSuccessWarningDanger
Ocean: Deep blues, teals, aquatic gradients. Serene and professional.
Sunset Theme
WarmSuccessWarningDanger
Sunset: Golden oranges, warm pinks, amber gradients.
Nordic Theme
MinimalSuccessWarningDanger
Nordic: Muted cool tones, clean lines, Scandinavian minimalism.
Retro Theme
NostalgicSuccessWarningDanger
Retro: Vintage palette, warm yellows, olive greens, nostalgic 70s/80s feel.
Corporate Theme
ProfessionalSuccessWarningDanger
Corporate: Navy, slate, conservative palette. Enterprise-ready.
Pastel Theme
SoftSuccessWarningDanger
Pastel: Light, desaturated colors. Gentle, friendly, approachable.
Midnight Theme
DarkSuccessWarningDanger
Midnight: Deep dark base, purple accents, starry-night vibe.
Forest Theme
NaturalSuccessWarningDanger
Forest: Deep greens, wood browns, moss tones. Nature-inspired.
How to Use
<!-- Load a theme CSS file --> <link rel="stylesheet" href="velinstyle/dist/themes/brutalist.min.css"> <!-- Or scope to a section --> <div data-velin-theme="soft"> <button class="velin-btn velin-btn--primary">Soft Button</button> </div> <!-- Dark mode --> <html data-velin-theme="dark">