Theme

Brand playground

Onda components read their colors and fonts from CSS variables. Set your brand below and every component re-skins — your palette, your type, Onda's motion. The default values are Onda's own, so unset slots always fall back gracefully.

Palette

Background

#08080A

Surface

#0E0E12

Surface 2

#121217

Border

#1C1C22

Border lit

#26262E

Text

#F2F2F4

Dim

#8E8E98

Faint

#56565F

Accent

#D96B82

Accent soft

#E89AAB

Type

The quick brown fox

Body copy renders in your body font and dim text color. The accent is earned — one word, one underline, one call to action.

Feature

Quality by construction

A raised surface with your border and text colors.

Open source

Free · MIT

✓Unlimited renders
✓Your brand, your fonts
✓Onda motion

One focal move. Earned accent.

Export your theme

Paste the CSS into your project (a wrapper or :root), or use the JSON with brandToCssVars() / <ThemeProvider>. Theming guide →

CSS

:root {
  --onda-bg: #08080A;
  --onda-surface: #0E0E12;
  --onda-surface-2: #121217;
  --onda-border: #1C1C22;
  --onda-border-lit: #26262E;
  --onda-text: #F2F2F4;
  --onda-dim: #8E8E98;
  --onda-faint: #56565F;
  --onda-accent: #D96B82;
  --onda-accent-soft: #E89AAB;
  --onda-font-display: "Clash Display", sans-serif;
  --onda-font-body: "Space Grotesk", sans-serif;
}