Button system

Three semantic variants. Two sizes. Zero exceptions. Buttons are status-aware — the visual matches the action’s commercial weight.

Variants

.btn-hero

Primary CTA. Solid orange. Reserved for the single most important action on a surface (Apply, Submit, Subscribe). Maximum ONE per visible block.

.btn-outline

Secondary CTA. 1px purple border, transparent background, purple text. View, Read more, See details.

.btn-default

Neutral utility action. 1px border-border, card background. Used for filters, "show more", non-commercial inline actions.

Sizes

.btn-md (default)

40-44px tall. Use everywhere unless you have a specific reason to go smaller.

.btn-sm

32-36px tall. Use inside cards, filter strips, and tight grids.

.btn-lg

52px tall. Reserved for hero CTAs only. Two per page maximum.

Banned button styles

• No green / blue / red buttons. Status is communicated by chips and badges, not button color.
• No 3D shadows, no inset highlights, no glassmorphism.
• No gradient buttons outside the explicitly-approved sponsor banner variant.
• No rounded-full pill buttons in editorial chrome (they are reserved for filter chips and badges).