uix-uiCustard Schoolbook
Retro-modern learning UI: ochre actions on cream paper, heavy Epilogue headlines and hard-offset shadows on a modern 4px grid.
$ npx uix-ui@latest theme custard-schoolbookGood 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 · Epilogue
Good tea, delivered fresh
Orders, stock and payouts
Everything a small shop needs
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Body · Karla
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 custard-schoolbook/* Tokens from the Custard Schoolbook 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); }