uix-uiSweatband Grape
Retro-modern fitness UI: grape-violet actions on cream paper neutrals, with Playfair headlines that nod to 70s gym posters.
$ npx uix-ui@latest theme sweatband-grapeGood morning, Mira
Here is how Shapla Tea did this week.
Revenue
৳48,200
+12.5%Orders
312
-3.1%Good morning, Mira
Here is how Shapla Tea did this week.
Revenue
৳48,200
+12.5%Orders
312
-3.1%Colours
Six ramps from light (50) to dark (950). Click a swatch to copy its hex code.
primary
secondary
neutral
success
warning
error
Type
Display · Playfair Display
Good tea, delivered fresh
Orders, stock and payouts
Everything a small shop needs
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Body · Source Sans 3
Pay monthly, cancel any time. Your first order ships the same day.
Pay monthly, cancel any time. Your first order ships the same day.
Pay monthly, cancel any time. Your first order ships the same day.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Contrast
The pairs you use most, measured with the WCAG formula. Normal text needs 4.5:1 to pass AA.
| Pair | Light | Dark |
|---|---|---|
Main text on the pagetext-primary on bg-canvas | … | … |
Secondary text on a cardtext-secondary on bg-surface | … | … |
Text on a brand buttontext-on-brand on bg-brand | … | … |
Brand-coloured text on the pagetext-brand on bg-canvas | … | … |
Use it
One command adds the theme to your project. After that, every colour, font and radius is a token you can use anywhere.
$ npx uix-ui@latest theme sweatband-grape/* Tokens from the Sweatband Grape theme */
.panel {
background: var(--bg-surface);
color: var(--text-primary);
border: 1px solid var(--border-default);
border-radius: var(--radius-lg);
font-family: var(--font-body);
}
.panel h2 { font-family: var(--font-heading); }
.panel .cta {
background: var(--bg-brand);
color: var(--text-on-brand);
}
.panel .cta:hover { background: var(--bg-brand-hover); }