Themes handle your brand's core colors and fonts. Styles, however, offer a broader design application, allowing you to choose from over 20 well-known web design aesthetics such as minimalist, modern, material, flat, brutal, glass, retro, neon, cyberpunk, luxury, playful, modular, and system-ui.
How to use styles
To apply a style, simply add the style class code to your body element. For example, to apply the brutalism style, add the class brutalism-style to your element.
Copy the class code from the styles file CSSvars styles file and add it to your CSS file, or your HTML code if you use CDN, you can also link to the file if you want to use multiple styles.
- Brutalism (Anti-Design)
Brutalism: Use for bold, disruptive designs that reject traditional aesthetics.
Art studios, personal brands, underground music, radical startups.
- Glass morphism
Glass morphism: Best for modern, elegant UIs with frosted-glass visuals.
Fintech, health tech, luxury apps, personal productivity tools.
- Retro & Vintage
Retro/Vintage: Ideal for nostalgic, playful, or thematic branding.
Coffee shops, vintage clothing, lifestyle blogs, creative agencies.
- Minimalist
Minimalist: Perfect for clean, distraction-free content or portfolios.
Tech startups, SaaS platforms, portfolios, architects, wellness brands.
- Neon
Neon: Use in high-energy or futuristic entertainment/tech projects.
Nightclubs, gaming platforms, youth fashion, media streaming.
- Cyberpunk
Cyberpunk: Great for edgy, tech-heavy or sci-fi-inspired UIs.
Blockchain/crypto apps, game dev studios, hacker culture brands.
- High Contrast
High Contrast: Essential for accessibility or information-heavy UIs.
Government sites, accessibility-first platforms, education.
- Luxury
Luxury: Use for high-end brands needing elegance and sophistication.
Luxury goods, high-end services, fashion, jewellery.
- Neumorphism (Soft UI)
Neumorphism: Use for soft, tactile interfaces—best in moderation.
IoT dashboards, smart home apps, lifestyle tools (in moderation).
- Modern / Flat UI
Flat 2.0: Use for clean, intuitive UIs with subtle depth cues.
Fintech apps, e-commerce admin, task managers.
- Playful / Creative
Best for fun, friendly, and energetic interfaces with expressive visuals and lively colours.
Kids’ apps, creative studios, learning platforms, lifestyle blogs, and quirky e-commerce brands.
- Material Design
Ideal for clean, structured, and responsive interfaces based on Google’s design principles.
SaaS platforms, productivity tools, fintech apps, government portals, and educational platforms.
- Modular / Card-Based UI
Dashboard/Modular: Ideal for admin panels with widget/card layouts.
CRMs, HR systems, ERP tools, SaaS dashboards.
- Flat 2.0
Data-Driven: Best for analytics-heavy or chart-rich dashboards.
Fintech apps, e-commerce admin, task managers.
- Data-Driven / Analytical
Data-Driven: Best for analytics-heavy or chart-rich dashboards.
Analytics platforms, BI tools, performance monitoring.
- Enterprise / Functional
Enterprise: Built for dense data tables and power-user workflows.
B2B SaaS, legal/accounting tools, logistics & finance software.
- System UI (OS-Like UI)
System UI: Mimics desktop apps; great for dev tools or OS-like apps.
Developer tools, code platforms, internal IT tools.
- Colorful Dashboard
Colorful Dashboard: Use to bring energy to user dashboards and KPIs.
Health tech, education, fitness tracking apps.
