Soft UI, glass and micro-motion
Every surface in DrevStore AI is built from these tokens and components. They adapt to light and dark automatically and ship responsive by default.
Colors
Semantic OKLCH tokens. Components never hardcode a colour — they reference these.
background
--background
surface
--surface
primary
--primary
primary-glow
--primary-glow
accent
--accent
success
--success
warning
--warning
destructive
--destructive
muted
--muted
border
--border
Typography
Sora for display headings, Manrope for body copy and UI labels.
Display / 48
Heading / 24
Body / 16 — Manrope keeps long-form settings copy readable at small sizes while staying neutral next to the neumorphic surfaces.
Muted / 14 — helper and hint text.
Overline / 12
Spacing & radius
A 4px-based rhythm and a soft radius ladder that keeps every corner generous.
rounded-md
rounded-lg
rounded-xl
rounded-2xl
rounded-3xl
Buttons, inputs & controls
Raised by default, pressed on interaction — the core Soft UI feedback loop.
Buttons
Five variants, four sizes.
Inputs
Inset fields with labelled controls.
Cards & stats
Elevation variants for panels, metrics and interactive tiles.
Revenue
$27,850.00
+18.2% vs last month
Orders
468
+42 this week
Refunds
12
-3 vs last month
Interactive tile
Lifts on hover with a soft shadow bloom.
Modal, dropdown & toast
Frosted glass overlays with spring entrances and full keyboard support.
Charts
Recharts wrappers themed with chart tokens and glass tooltips.
Revenue
Last six months
Traffic
By channel
Orders
Monthly volume
Loading & skeletons
Every async surface has a matching placeholder so layouts never jump.
Indicators
Spinner, dots and progress.
Route loading
Full-panel fallback.
Fetching stores…