Wensity

Themes, copy & paste.

Six hand-tuned starting points. Pick a vibe, copy the CSS into globals.css and the entire library re-skins. No theme provider, no JS context, no runtime cost. Override the brand ramp later if you want a fully bespoke look.

Theming guideBrowse the full ramp
Light
Aa
surface
Dark
Aa
surface
300#ff8a73
500#cd1c18
800#6a0d0e
Editorial · Dark-first · Default

Wensity Red

The shipping default. Wensity Red on near-black surfaces, which is what the studio site you're reading uses.

globals.css
@theme inline {
  --color-chili-300: #ff8a73;
  --color-chili-500: #cd1c18;
  --color-chili-800: #6a0d0e;
}


:root {
  --background:       #fafafa;
  --foreground:       #0a0a0a;
  --surface:          #ffffff;
  --surface-muted:    #f4f4f5;
  --border:           rgba(10,10,10,0.08);
}


.dark {
  --background:       #0a0a0b;
  --foreground:       #f5f5f6;
  --surface:          #111113;
  --surface-muted:    #18181b;
  --border:           rgba(255,255,255,0.08);
}
Light
Aa
surface
Dark
Aa
surface
300#7dd3fc
500#0284c7
800#0c4a6e
Clean · Trust · Fintech

Atlantic

Cool blue on neutral grays. Reads ‘serious enterprise’ without going into bank-website territory.

globals.css
@theme inline {
  --color-chili-300: #7dd3fc;
  --color-chili-500: #0284c7;
  --color-chili-800: #0c4a6e;
}


:root {
  --background:       #fafafa;
  --foreground:       #0a0a0a;
  --surface:          #ffffff;
  --surface-muted:    #f4f4f5;
  --border:           rgba(10,10,10,0.08);
}


.dark {
  --background:       #08111c;
  --foreground:       #f5f5f6;
  --surface:          #0e1a2a;
  --surface-muted:    #15243a;
  --border:           rgba(125,211,252,0.10);
}
Light
Aa
surface
Dark
Aa
surface
300#a78bfa
500#6d28d9
800#3b1390
Premium · AI · Saturated

Royal

Violet brand on slate. Pairs with motion-heavy components. Feels expensive without trying too hard.

globals.css
@theme inline {
  --color-chili-300: #a78bfa;
  --color-chili-500: #6d28d9;
  --color-chili-800: #3b1390;
}


:root {
  --background:       #fafafa;
  --foreground:       #0a0a0a;
  --surface:          #ffffff;
  --surface-muted:    #f4f4f5;
  --border:           rgba(10,10,10,0.08);
}


.dark {
  --background:       #0c0a14;
  --foreground:       #f5f5f6;
  --surface:          #15121e;
  --surface-muted:    #1c1828;
  --border:           rgba(167,139,250,0.10);
}
Light
Aa
surface
Dark
Aa
surface
300#86efac
500#16a34a
800#14532d
Calm · Sustainable · Health

Forest

Deep green with low-saturation neutrals. Built for products that need to feel balanced rather than urgent.

globals.css
@theme inline {
  --color-chili-300: #86efac;
  --color-chili-500: #16a34a;
  --color-chili-800: #14532d;
}


:root {
  --background:       #fafafa;
  --foreground:       #0a0a0a;
  --surface:          #ffffff;
  --surface-muted:    #f4f4f5;
  --border:           rgba(10,10,10,0.08);
}


.dark {
  --background:       #0a120e;
  --foreground:       #f5f5f6;
  --surface:          #11201a;
  --surface-muted:    #172d24;
  --border:           rgba(134,239,172,0.10);
}
Light
Aa
surface
Dark
Aa
surface
300#fdba74
500#ea580c
800#7c2d12
Warm · Creator · Friendly

Sunset

Burnt orange on warm grays. Perfect for creator tools, podcasts and anything that should read approachable.

globals.css
@theme inline {
  --color-chili-300: #fdba74;
  --color-chili-500: #ea580c;
  --color-chili-800: #7c2d12;
}


:root {
  --background:       #fafafa;
  --foreground:       #0a0a0a;
  --surface:          #ffffff;
  --surface-muted:    #f5f1ec;
  --border:           rgba(10,10,10,0.08);
}


.dark {
  --background:       #150e0a;
  --foreground:       #f5f5f6;
  --surface:          #221912;
  --surface-muted:    #2c1f17;
  --border:           rgba(253,186,116,0.10);
}
Light
Aa
surface
Dark
Aa
surface
300#d4d4d8
500#3f3f46
800#18181b
Editorial · Press · Brutalist

Mono

No accent at all. Use this when typography and motion need to do the talking. Black on white, white on black.

globals.css
@theme inline {
  --color-chili-300: #d4d4d8;
  --color-chili-500: #3f3f46;
  --color-chili-800: #18181b;
}


:root {
  --background:       #fafafa;
  --foreground:       #0a0a0a;
  --surface:          #ffffff;
  --surface-muted:    #f4f4f5;
  --border:           rgba(10,10,10,0.10);
}


.dark {
  --background:       #0a0a0b;
  --foreground:       #f5f5f6;
  --surface:          #111113;
  --surface-muted:    #18181b;
  --border:           rgba(255,255,255,0.12);
}

Need a custom theme?

The studio builds full brand systems on top of Wensity UI: color ramps tuned against accessibility, typography pairings, motion language, the works. Six weeks, fixed scope.

Talk to the studioOr roll your own