Design tokens.

Name: Wensity UI
Author: Wensity

A small palette is a feature. The library reads from a single three-step brand ramp plus eight surface tokens — about a dozen values total. Override what you need; leave the rest as-is.

Browse theme presets Theming guide

Wensity Red ramp

Components reference three steps: 300 for tints,500 for the brand,800 for deep accents. The rest of the ramp is available as Tailwind utilities (bg-chili-50…text-chili-900) but isn't hard-baked into the library.

#fff5f4

100

#ffe5e3

200

#ffc7c2

300

#ff8a73

400

#f04d3f

500use

#cd1c18

600

#ad1212

700

#8a1112

800use

#6a0d0e

900

#4d0a0b

Surface tokens

Every component reads from these CSS variables. Light values live on :root; dark values on the.dark class.

Token	Role	Light	Dark
--background	Page surface	#fafafa	#0a0a0b
--foreground	Primary text	#0a0a0a	#f5f5f6
--surface	Card surface	#ffffff	#111113
--surface-muted	Subtle fill	#f4f4f5	#18181b
--border	1px hairline	rgba(10,10,10,0.08)	rgba(255,255,255,0.08)
--border-strong	Card hover	rgba(10,10,10,0.16)	rgba(255,255,255,0.14)
--muted-foreground	Secondary text	#52525b	#a1a1aa
--pattern-fg	Grid lines	rgba(10,10,10,0.07)	rgba(255,255,255,0.06)

Semantic colors

Reserved for state, never decoration. If you find yourself reaching for --color-successas an accent, use a brand shade instead. Semantic colors only carry weight when they're used sparingly.

Success

--color-success

Confirmations, positive deltas

Warning

--color-warning

At-risk states, dirty forms

Danger

--color-danger

Errors, destructive actions

Info

--color-info

Tips, neutral notifications

All of it, in one block

Drop this into globals.css and you have the entire Wensity color system in your project.

globals.css

 1@theme inline {
 2  /* Surface mappings */
 3  --color-background: var(--background);
 4  --color-foreground: var(--foreground);
 5  --color-surface: var(--surface);
 6  --color-surface-muted: var(--surface-muted);
 7  --color-border: var(--border);
 8  --color-border-strong: var(--border-strong);
 9  --color-muted-foreground: var(--muted-foreground);
10
11  /* Brand ramp */
12  --color-chili-50:  #fff5f4;
13  --color-chili-100: #ffe5e3;
14  --color-chili-200: #ffc7c2;
15  --color-chili-300: #ff8a73;
16  --color-chili-400: #f04d3f;
17  --color-chili-500: #cd1c18;
18  --color-chili-600: #ad1212;
19  --color-chili-700: #8a1112;
20  --color-chili-800: #6a0d0e;
21  --color-chili-900: #4d0a0b;
22
23  /* Semantic */
24  --color-success: #16a34a;
25  --color-warning: #f59e0b;
26  --color-danger:  #dc2626;
27  --color-info:    #0284c7;
28}
29
30:root {
31  --background:       #fafafa;
32  --foreground:       #0a0a0a;
33  --surface:          #ffffff;
34  --surface-muted:    #f4f4f5;
35  --border:           rgba(10,10,10,0.08);
36  --border-strong:    rgba(10,10,10,0.16);
37  --muted-foreground: #52525b;
38  --pattern-fg:       rgba(10,10,10,0.07);
39}
40
41.dark {
42  --background:       #0a0a0b;
43  --foreground:       #f5f5f6;
44  --surface:          #111113;
45  --surface-muted:    #18181b;
46  --border:           rgba(255,255,255,0.08);
47  --border-strong:    rgba(255,255,255,0.14);
48  --muted-foreground: #a1a1aa;
49  --pattern-fg:       rgba(255,255,255,0.06);
50}

Typography Browse themes