uix-uiSeasalt Digest
Calm clinical analytics UI: sage-grey neutrals, one muted amber action color and a serif reserved for report titles.
$ npx uix-ui@latest theme seasalt-digestGood 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 seasalt-digest/* Tokens from the Seasalt Digest 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); }