Theming

One file drives everything. Mizu's look lives in CSS custom properties, mapped to Tailwind v4 utilities. Recolor the system by changing a handful of tokens.

The token block

Add this to src/app.css after @import 'tailwindcss';. Semantic tokens (--background, --primary, …) are mapped with @theme inline so utilities like bg-primary react to light and dark automatically.

:root {
	--background: #ffffff;
	--foreground: #1c2b33;
	--card: #ffffff;
	--muted: #f2f4f7;
	--muted-foreground: #70767d;
	--primary: #00b2ff; /* the one accent */
	--primary-foreground: #ffffff;
	--border: #eceef1; /* semantic strokes only */
	--ring: var(--primary);

	/* Soft ambient elevation, never bevels */
	--elevation-sm: 0 0 10px rgba(28, 43, 51, 0.06);
	--elevation-lg: 0 8px 24px rgba(28, 43, 51, 0.1);

	/* Pastel auras for AI moments */
	--orb-pink: radial-gradient(circle, rgba(253, 221, 222, 0.85) 0%, transparent 70%);
	--aurora: linear-gradient(135deg, #f4e7ff 0%, #fdddde 100%);
}

.dark {
	--background: #000000; /* pure black */
	--foreground: #f6f8f9;
	--card: #0c1116; /* slate lifted from the ink */
	--primary: #00b2ff;
	/* …each token gets a dark variant… */
}

The brand ramp

mizu-50 through mizu-950. The accent is mizu-500. Swap these to re-tint the whole system.

50100200300400500600700800900950

Material utilities

Beyond colors, Mizu adds a small set of surface utilities you can use anywhere.

glass / glass-subtle Flat frosted translucency + backdrop blur, for floating panels.

orb-pink / -blue / -purple / -peach Soft radial pastel auras. Pair with blur for glow.

aurora / -cool / -iris / -mint Pastel linear washes for surfaces and art.

shadow-xs … shadow-xl / shadow-glow Soft ambient elevation, plus a blue glow.

Dark mode

Mizu uses a class strategy: add dark to <html>. The page goes pure black and surfaces lift to slate. The included theme store handles persistence and a no-flash inline script. Toggle it with the sun/moon button in the header.

The surface ladder

Depth never comes from strokes. In light mode, shadows carry the layers; in dark mode, each surface is one tonal rung above the one beneath it.

Light: shadow carries depth

Card

Floating panel

Hover

Dark: tone carries depth

Card

Floating panel

Hover