Find your material.

Tune a palette on a working interface. Check the contrast as you go, then take the CSS into your own project.

Make it yours

Starting palette

Surface#0f0e0c

Text#f4f0e8

Signal#ff4d1c

Action fill#d23e0e

Color scheme

Sets browser controls and status colors.

Typeface

Corners2px

WorkspaceIllustrative project · October 21

A place for good work.

A quiet surface for the details that matter. Every control here uses the theme you are making.

Set the visual directionFinish every keyboard pathRelease when it is ready

Review complete67%

Check the contrast

Body text: 14.67:1 Pass
Secondary text: 7.36:1 Pass
Signal text: 5.02:1 Pass
Action label: 4.56:1 Pass
Status text: 7.40:1 Pass

All five checks meet 4.5:1 for normal text. Text checks use the lowest ratio across the three generated surfaces. These are color checks, not a full accessibility audit.

Your theme, ready to take

Download CSS

mizu-theme.css

/* Mizu theme — import after mizu-ui/styles.css.
   Applies to all theme ancestors. Keep light/dark variants in separate selectors. */
:root,
[data-theme] {
  --mizu-color-scheme: dark;
  --mizu-ink: #0f0e0c;
  --mizu-ink-2: #171614;
  --mizu-ink-3: #1f1e1b;
  --mizu-paper: #f4f0e8;
  --mizu-muted: #b6b3ad;
  --mizu-faint: #afaca6;
  --mizu-line: #34322f;
  --mizu-line-bright: #484743;
  --mizu-accent: #ff4d1c;
  --mizu-accent-fill: #d23e0e;
  --mizu-success: #70bc96;
  --mizu-warning: #dbb66a;
  --mizu-danger: #ef9b8e;
  --mizu-font-display: var(--font-archivo, "Archivo Variable"), ui-sans-serif, system-ui, sans-serif;
  --mizu-radius: 2px;
}

Import this after Mizu’s stylesheet. It applies one palette to all theme ancestors; use a specific [data-theme="light"] or [data-theme="dark"] selector to keep separate variants. Fonts use Mizu’s optional font stylesheet or your existing font variables.