Component kit
Living reference for the Kanso design system. Every primitive, every variant, visible on one page.
Button
4 variants × 3 sizes + icon. Primary is teal, accent of the system.
Badge
Inline status; neutral default, brand tones sparingly.
Kbd
Keyboard hint primitive.
Form
Label + Input + Field wrapper with hint/error states.
Used for receipts.
Lowercase, hyphens.
Must be at least 12 characters.
Shown on product page.
Card
Surface container. Header / Body / Footer composable.
Today
Orders placed in the last 24 hours.
Low stock
Variants below threshold.
- Linen Apron · M2
- Ceramic Mug4
- Enamel Pin5
Dialog · Dropdown · Tooltip
Radix primitives, Kanso-styled.
Typography
Space Grotesk display + Inter body + JetBrains Mono.
Commerce, simplified.
Kanso
Body copy in Inter — readable, neutral, unobtrusive.
Secondary text is muted one notch.
Helper text, the quietest.
SKU-12408-A · UUID-…
Color tokens
Named swatches, semantic usage.
Storefront kit
ProductGalleryStacked
Two-up stacked gallery for PDP — Saks/Zara pattern.
PurchasePanel
Sticky right-column buy box — brand → title → price → variants → CTA.
Studio Maker
Linen apron, undyed
ProductAccordion
Expandable details on PDP — `+` toggle, no tab bar.
Heavyweight linen, hand-finished seams. Pre-washed for a soft hand.
CrossSellRail
Horizontal product carousel — snap-scroll on mobile.
You might also like
CollectionHeader
PLP top — breadcrumbs, title, sort, count.
New arrivals
Pieces added this week from independent makers.
CollectionFacetsSidebar
Left-rail filter accordion.
NumberedPagination
SSR-friendly pagination — every link is a real anchor.