Style
A whole look-and-feel, independent of color: corners, elevation, borders, surface treatment, density and motion — as one coherent personality.
Color theme answers light or dark, which brand color. Style answers what personality does this product have — from enterprise instrument panel to liquid glass to neo-brutalism — and the two compose freely. Six color themes × ten styles is sixty distinct looks from one stylesheet, with zero extra CSS to write. Lock one in during setup, or let people choose.
Try every style live
Each panel below is the same markup scoped to a different data-style — real tokens, not screenshots. Click one to apply it to the whole site.
Soft
Balanced and quiet — the default
Crisp
Dense instrument panel
Sharp
Architectural precision
Flat
Hairlines and ink, no shadows
Depth
Cinematic layered elevation
Glass
Luminous liquid translucency
Round
Generous corners, plush glow
Puff
Soft-extruded from the page
Toy
Chunky, bouncy, 3D press
Brutal
Ink borders, hard offsets
The ten presets
Soft
DefaultThe shipped default. Balanced corners and standard shadows — nothing to opt into; upgrading consumers see no change.
Crisp
EnterpriseInstrument-panel density: 2px corners, conservative shadows, compact spacing, keyboard-first focus treatment.
Sharp
ArchitecturalTight corners and hairline-ring elevation instead of blur. Reads as precise and dashboard-dense.
Flat
MinimalHairlines and ink — shadows almost abolished, hover feedback is a wash, never a lift.
Depth
CinematicThree-layer stacked shadows; cards drop their border and let elevation carry the edge.
Glass
LiquidTranslucent, blurred, saturated surfaces with a specular top edge and capsule controls. Falls back to opaque where backdrop-filter is unsupported.
Round
PlushGenerous corners, diffuse glow shadows, and a gentle overshoot on motion.
Puff
ExtrudedSoft-extruded controls pressed out of the page itself — both shadow poles derive from the theme background, so it survives every theme.
Toy
PlayfulChunky pills with a physical 3D bottom edge that collapses when pressed. Springy, bouncy motion.
Brutal
Neo-brutalistZero radius, 2px ink borders, hard offset shadows, and a press that slams into its own shadow.
Setup
Drop StyleSwitcher in anywhere — it persists to its own cookie, independent of the color-theme cookie, and reads it back with getServerStyle for flicker-free SSR, exactly like the color theme system:
// app/layout.tsx
import { cookies } from 'next/headers'
import { getServerStyle, styleInitScript } from '@creo-team/buzz-ui/server'
import { StyleSwitcher } from '@creo-team/buzz-ui/client'
export default async function RootLayout({ children }) {
const style = getServerStyle(await cookies(), 'soft')
return (
<html data-style={style}>
<head>
<script dangerouslySetInnerHTML={{ __html: styleInitScript(style) }} />
</head>
<body>
<StyleSwitcher initialStyle={style} />
{children}
</body>
</html>
)
}Lock a style in — no JS at all
The switcher is a convenience. If your product should always feel a certain way, set data-style once and ship no switcher — or scope a style to a single section by putting the attribute on any container:
<!-- Whole app -->
<html data-style="glass">
<!-- Just one section (every trait is an inherited custom property) -->
<div data-style="brutal">
<Card>…renders neo-brutalist while the rest of the page doesn't…</Card>
</div>
/* Or write your own eleventh preset */
[data-style='blueprint'] {
--radius-sm: 0; --radius-md: 0; --radius-lg: 0;
--bz-border-w: 1px;
--bz-border-c: var(--c-info);
--shadow-md: 0 0 0 0 transparent;
--bz-duration: 100ms;
}One caveat: portaled overlays (menus, modals, toasts) render under <body>, so they escape a container-scoped style. Setting data-style on <html> is the supported way to style overlays.