uix-uiHeliotrope Anthology
Near-monochrome media UI with spacious layouts, a single violet accent and a violet-tinted neutral ramp for catalogue and reading screens.
$ npx uix-ui@latest theme heliotrope-anthologyGood 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 · Space Grotesk
Good tea, delivered fresh
Orders, stock and payouts
Everything a small shop needs
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Body · Inter
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 heliotrope-anthology/* Tokens from the Heliotrope Anthology 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); }