Arrecho UI
A commerce design system for building branded storefronts — the colors, type, and components you compose every store from. Change a token once and it updates everywhere.
Browse heroes & sections →Color
Two layers: raw primitives (the full scales) and the semantic tokens the components actually use.
Brand — Terracotta
Accent — Sage
Neutral — Warm Taupe
Semantic
Commerce
sale must read as the primary price; out-of-stock pairs with clear text — never color alone.
Typography
Named styles — use the utility class, not an ad-hoc text-* stack, so type stays consistent. Geist by default; a brand can swap in its own heading and body typefaces via tokens.
DisplayArrecho UIheading-lgSection headingheading-mdSub-sectionbodyBody copy — the quick brown fox jumps over the lazy dog.body-smSmaller body copy for dense areas.metalabelFree shippingproduct-titleCountry Sourdough — 24-hour cold fermentPrice styles
price$24.00price-lg$24.00price-sale + original$18.00$24.00unit / from$4.50Buttons
Built from your semantic tokens — terracotta primary, sage-tinted hovers, warm focus rings.
Controls
The interactive primitives — selection, overlays, navigation, and loading — all built on Base UI with keyboard and focus behavior handled.
Checkbox
Radio group
Select
Tooltip & Dialog
Tabs
Pagination
Toast
Dropdown menu
Carousel
Avatar
Toggle
Slider
Progress
Calendar
Skeleton (loading state)
Semantic & Status
Success, warning, info, and error each have their own token — so status UI stays on-brand instead of defaulting to stock green/red. Accent (sage) surfaces here too.
Cards & Forms
Warm off-white surfaces, soft corners, and subtle brown-tinted shadows.
Radius & Shadow
Soft corners and warm, low-contrast shadows are what make it feel handmade rather than clinical.