Themes handle your brand's core colors and fonts. Styles, however, offer a broader design application, allowing you to choose from over 25 well-known web design aesthetics such as minimalist, modern, material, flat, brutal, glass, retro, neon, cyberpunk, luxury, playful, modular, system-ui, aurora, swiss, editorial, pastel, monochrome, and futuristic.
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 brutal-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) —
.brutal-style
Brutalism: Use for bold, disruptive designs that reject traditional aesthetics.
Art studios, personal brands, underground music, radical startups.
- Brutalism Lite —
.brutal-lite-style
A softer take on Brutalism: same monospace, bold-bordered look, lower visual weight.
Portfolios, indie tools, and brands that want brutalist character without the full intensity.
- Glass morphism —
.glass-style
Glass morphism: Best for modern, elegant UIs with frosted-glass visuals.
Fintech, health tech, luxury apps, personal productivity tools.
- Retro & Vintage —
.retro-style
Retro/Vintage: Ideal for nostalgic, playful, or thematic branding.
Coffee shops, vintage clothing, lifestyle blogs, creative agencies.
- Retro Lite —
.retro-lite-style
A cleaner, lighter vintage look with softer tones and less heavy detailing.
Cafés, small-batch brands, and lifestyle sites wanting a gentle nostalgic touch.
- Minimalist —
.minimalist-style
Minimalist: Perfect for clean, distraction-free content or portfolios.
Tech startups, SaaS platforms, portfolios, architects, wellness brands.
- Neon —
.neon-style
Neon: Use in high-energy or futuristic entertainment/tech projects.
Nightclubs, gaming platforms, youth fashion, media streaming.
- Cyberpunk —
.cyberpunk-style
Cyberpunk: Great for edgy, tech-heavy or sci-fi-inspired UIs.
Blockchain/crypto apps, game dev studios, hacker culture brands.
- High Contrast —
.high-contrast-style
High Contrast: Essential for accessibility or information-heavy UIs.
Government sites, accessibility-first platforms, education.
- Luxury —
.luxury-style
Luxury: Use for high-end brands needing elegance and sophistication.
Luxury goods, high-end services, fashion, jewellery.
- Neumorphism (Soft UI) —
.neumorphism-style
Neumorphism: Use for soft, tactile interfaces—best in moderation.
IoT dashboards, smart home apps, lifestyle tools (in moderation).
- Modern / Flat UI —
.modern-style
Flat 2.0: Use for clean, intuitive UIs with subtle depth cues.
Fintech apps, e-commerce admin, task managers.
- Playful / Bubblegum —
.playful-bubblegum-style
Bold, rounded, high-energy playful style with thick black outlines and hard drop shadows.
Kids' products, party/event services, ice cream & candy shops, board game studios, camps.
- Playful / Confetti —
.playful-confetti-style
Soft, rounded, friendly playful style with pastel-leaning colors and gentle shadows.
Beauty & self-care, wellness apps, boutique e-commerce, weddings, cafés, parenting brands.
- Material Design —
.material-style
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 —
.modular-style
Dashboard/Modular: Ideal for admin panels with widget/card layouts.
CRMs, HR systems, ERP tools, SaaS dashboards.
- Flat 2.0 —
.flat-style
Data-Driven: Best for analytics-heavy or chart-rich dashboards.
Fintech apps, e-commerce admin, task managers.
- Data-Driven / Analytical —
.data-style
Data-Driven: Best for analytics-heavy or chart-rich dashboards.
Analytics platforms, BI tools, performance monitoring.
- Enterprise / Functional —
.enterprise-style
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-style
System UI: Mimics desktop apps; great for dev tools or OS-like apps.
Developer tools, code platforms, internal IT tools.
- Colorful Dashboard —
.colorful-dashboard-style
Colorful Dashboard: Use to bring energy to user dashboards and KPIs.
Health tech, education, fitness tracking apps.
- Aurora —
.aurora-style
Futuristic, vibrant, premium look with soft glowing colors inspired by the northern lights.
AI products, SaaS, creative tools, dashboards, modern startups.
- Swiss / International Typographic —
.swiss-style
Strict grid feel, single red accent, sharp corners, no shadow, tight heading letter-spacing.
SaaS, documentation, business websites, dashboards, enterprise applications.
- Editorial —
.editorial-style
Elegant, reading-focused, print-inspired serif typography.
Blogs, magazines, news sites, portfolios, long-form reading experiences.
- Pastel —
.pastel-style
Soft tints via color-mix, generous rounding, gentle diffuse shadows.
Wellness, education, healthcare, lifestyle brands, family-friendly apps.
- Monochrome —
.monochrome-style
Single-hue, near-grayscale palette; typography carries the design.
Portfolios, photography, fashion, luxury products, minimalist websites.
- Futuristic —
.futuristic-style
Dark tech surface, cyan/violet duo, monospace-leaning headings, glow shadows.
AI, technology, cybersecurity, developer tools, crypto, startup landing pages.