Design system reference

Never embed colors inline. Use the named utilities (bg-indigo, text-pink) so theme swaps Just Work.

When to use each scale: hDisplay / hPage — hero headlines only; hTitle — major section dividers; hSection — subsection headers; hHeading — card / block titles; hSub — small stat values; tLede — the opening paragraph; tBody — body copy (most common); tMeta — captions, dates, hints; tQuote — rare pull quotes. Never reach for a raw text-[NNpx].

Always reach for <Button> first — it handles links (href), form submits (type/formAction), onClick, and a loading state, so there is no standalone button class to drift from. Pick the variant by emphasis: primary (animated cotton-candy gradient) for the one dominant CTA on a surface; solid for everyday actions (form submit, dialog confirm, add-to-bag); outline for the secondary next to a primary; ghostfor low-emphasis / icon-adjacent actions. Hand-roll a button only for a genuine one-off the variants can't express (e.g. the pink pill below).

Backed by native <dialog> with animated entry, autofocus, backdrop click-to-close. Use data-autofocus on a child to override the first-focusable default.