Default card with elevation-sm. Body-only content slot.
Skip to main content
Design System v1
Kitchen sink
Every primitive, rendered. Dev-only — not linked from nav, not indexed.
UiButton
Variants align to the Figma library: primary | outline | ghost | link.
size="sm-mobile" — fixed-32px pill for the questionnaire answer-pill use case.
UiIconButton
Square icon button — variants primary | outline | ghost, sizes sm (32) | md (44) | lg (56).
Empty slot renders a placeholder dot at the right size:
UiBadge
50% OFF
FSA Eligible
New
Tag
UiCard
Featured
Card with header slot + body content.
Card with media slot — the gray block above is a media placeholder.
UiInput
UiSectionHeader
How it works
Three steps to your custom fit
Impression kit, mail it back, receive your orthotics in 14 days.
Left-aligned variant
Everything about your feet, considered
Used inside columns, hero side-text, or any narrower section.
UiTrustBadge
180-Day Money-Back Guarantee
FSA / HSA Eligible
70% Less Than a Podiatrist
Layout patterns
Mobile rule — .screen-padding-mobile applies 24px horizontal padding below
$screen-md-max; standalone CTAs use block
to span the resulting content area, paired CTAs sit in .ui-button-row and split
50/50 with a 12px gap. Mocks below force the padding regardless of viewport so the rule reads
at desktop widths too — resize to ≤375px to confirm the real utility kicks in.
375 mobile mock — solo block CTA:
375
375 mobile mock — paired .ui-button-row:
375
Section CTA consistency (desktop)
Solo lg buttons get a 200px min-width on desktop so short labels
(LOAD MORE) don't render visibly smaller than long labels
(READ ALL REVIEWS (13,973)) on the same page. The min-width does
not apply when block is set — block governs width directly.
Paired lg buttons in .ui-button-row: row caps at 480px
and centers; children share an equal width via flex: 1. The pair always
renders 50/50 regardless of label length.