The EMBR design system
Every colour, type size, radius and component EMBR ships with. Built on tokens, so nothing is hardcoded and both themes stay in step.
Logo & mark
The wordmark is always lowercase. The sparkle is the app icon and can stand alone; never redraw or re-space either.
Clear space around the lockup is at least the height of the sparkle. Minimum wordmark width is 72px; below that, use the sparkle alone.
Colour
Warm neutrals carry the interface; ember tones carry the action. Feedback colours are reserved for state only.
Primary
The ember core. Coral leads, Orange warms, Pink accents.
Neutrals
Warm-toned, never cold grey. Cream is the light canvas, Charcoal the dark.
Feedback
Reserved for state. Never decorative.
Gradients
Semantic roles
Typography
Söhne Breit sets every heading; Inter carries body, UI and data. Headings are tight and wide, body is generous and plain.
Substitution note: Söhne Breit is licensed from Klim and can't be fetched here, so headings currently render in Archivo at its widest optical setting — the nearest free match. Drop the Söhne Breit web fonts in and change --font-display to swap the whole system over. No component changes needed.
Ignite your business
Business Health Score
Score breakdown
Customer retention
EMBR reads your numbers and tells you what to fix first.
Updated 4 minutes ago from 3 connected sources.
Last 30 days
Spacing, radius & elevation
A 4px base rhythm, generous corner rounding, and shadows warmed toward the ember palette rather than neutral grey.
Spacing
Radius
Elevation
Iconography
24px grid, 2px stroke, rounded caps and joins, no fills. Coral marks the active state.
Components
Every shadcn primitive re-skinned on EMBR tokens. Primary actions always carry the Coral gradient.
Buttons
Badges
Cards
+12.4%
Follow up with 14 lapsed customers. Est. £6.1k recovered.
Tabs
Progress
Overlays
Avatars & separator
Form controls
Coral focus rings across the board, so keyboard position is always obvious.
Enter a valid email address.
Product patterns
The two pieces unique to EMBR: the Business Health Score dial and the score breakdown metric.
Weighted across six pillars, refreshed daily.