uix-uiSpring Doorstep
Calm, botanical UI for home-service booking: spring-water blue actions on cool green-grey neutrals, soft serif headlines, steady contrast.
$ npx uix-ui@latest theme spring-doorstepGood 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 · Fraunces
Good tea, delivered fresh
Orders, stock and payouts
Everything a small shop needs
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Body · Instrument Sans
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 spring-doorstep/* Tokens from the Spring Doorstep 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); }