An applied component set.

Primary carries the dominant action. One primary per surface. Secondary supports it; ghost recedes; accent reserves itself for limited offers; danger flags destructive intent.

Sm 14 / Md 16 / Lg 18 / Xl 20 px label. Match size to surface density.

Hover deepens; active compresses; focus carries a 2px gold ring (keyboard navigation only).

Lead icon for outbound action; trailing icon for action target; icon-only buttons require an aria-label.

Use a button group for mutually exclusive view toggles. The pressed state mirrors `aria-pressed=true`.

Ghost variant on dark surfaces uses a 1.5px white border and inverts on hover.

Idle border is Light Silver; focus replaces it with brand purple plus a 3px purple-12% halo. Error overrides border to danger red and surfaces a message.

Affix slots accept a leading icon or a trailing unit. Native HTML types preserve mobile keyboard hints.

Textarea uses identical border and focus states as input. The select swap-replaces the native arrow with a custom chevron in Roboto.

Native checkbox is hidden but receives focus. Visual box uses border for idle, fills purple on `:checked`, and shows a 2px gold ring on `:focus-visible`.

Single selection within a group. Selected state fills with brand purple inside a thicker purple ring.

Switches are reserved for state that takes effect immediately — toggling preferences, pause/resume, on/off. Use a checkbox for selection that requires submission.

Single column is the default for marketing forms. Optimal completion rate; mobile-friendly without modification.

Use two columns for paired fields (first / last, email / phone). Allow full-width spans for free-text and submission rows.

Use inline forms for single-input actions (newsletter sign-ups, search). Stack vertically below 600px.

Basic card carries title + body + single anchor. Hover lifts 4px and tints the border purple.

Stat cards use the H1-token numeral for emphasis with a Roboto Medium uppercase label below. Best on dark surfaces for impact.

Action card stacks badge → title → body → button row. Pair primary and ghost; never two primaries.

Service grid uses a 1px gap on dark background as hairline separator. Cards stretch to equal row height via li { display: flex }. Hover reveals a dark-to-primary diagonal gradient and a gradient top border. "New" badge sits align-self: flex-start.

Use info for context; success for positive confirmation; warning for time-sensitive nudges; danger for critical errors. Each pairs an icon with a title and message.

Badges are static state markers. They should not be interactive — for interactive labels, use a tag.

Tags filter content. Each carries a × control with an accessible label naming the value being removed.

Hairline rules between rows; mono-tabular numerals in numeric columns; embedded badges for status. Hover tints the row 4% purple.

Active tab carries a 2px purple underline. Tabs scroll horizontally below 640px.

Current page filled in purple; hover ring on the rest. Use ellipsis when total exceeds 7 pages.

Use a slash separator and indicate current location with `aria-current="page"`.

Avatars show initials when no image is supplied. Background is the primary purple at 12% with the brand purple text.

Stacked avatars overlap by 8px and use a paper-colored ring to separate. The trailing avatar shows the overflow count.

Use the spinner for unscoped waits (saves, submissions); use dots for short content placeholder waits within prose.

Skeleton placeholders should mirror the rough geometry of the loading content. Animation is a 1.4s gradient sweep.

Default hairline at 1px / 8% ink. Strong variant at 1px / 22% ink. The labelled divider sits on a paper background.

Tooltip is delivered with `data-tip` and rendered with a CSS `::after`. Avoid for critical information — content must remain available without hover.