Design System v1
Every primitive, rendered. Dev-only — not linked from nav, not indexed.
Variants align to the Figma library: primary | outline | ghost | link.
size="sm-mobile" — fixed-32px pill for the questionnaire answer-pill use case.
Square icon button — variants primary | outline | ghost, sizes sm (32) | md (44) | lg (56).
Empty slot renders a placeholder dot at the right size:
Featured
How it works
Impression kit, mail it back, receive your orthotics in 14 days.
Left-aligned variant
Used inside columns, hero side-text, or any narrower section.
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 mobile mock — paired .ui-button-row:
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.
