Button System Demo

Live preview of every pill-shaped button variant configured in $btn-variants plus utility styles. Use this catalogue alongside docs/button-system.md when adjusting tokens or creating new combinations.

Legacy utility classes such as .btn-sm now delegate to the same CSS variable scale as .btn--sm, so older templates render with the updated typography and spacing automatically.

Read the guide Jump to customization notes

Core variants

Primary

Flat lime CTA for high-emphasis flows.

Forest

Deep green alternative for layered hero modules.

Charcoal

Reversed charcoal surface for light cards or forms.

Mint

Fresh mint tone for secondary or success actions.

Outline

Bordered lime accent that keeps the interior flat.

Size & density scale

Core ramp

Apply size modifiers on top of .btn for consistent heights.

Size + theme combos

Mix any color variant with a density token.

Icon spacing

Gap + min-height tokens keep icons aligned across sizes.

Token hooks: --btn-gap, --btn-min-height, --btn-font-size.

Ghost & subtle controls

Ghost

Transparent surface with lime border for dark backgrounds.

Subtle

Soft mint background for quiet, inline actions.

Utility helpers

Pill buttons scale down cleanly for icon affordances.

States & spacing

Token hooks: --btn-bg, --btn-color, --btn-hover-bg, --btn-hover-color, --btn-border-width, --btn-border-color, --btn-shadow, --btn-hover-shadow, --btn-radius, --btn-padding-x, --btn-padding-y, --btn-gap, --btn-min-height, --btn-font-size, --btn-line-height.

Customize quickly

Change a variant color

Edit the $btn-variants map in scss/components/_buttons.scss and adjust the bg, text, and hover-bg entries. Rebuild assets to propagate the change across the site.

Override per instance

Apply CSS custom properties on any button element to tweak radius, spacing, or colors inline: 

<button class="btn btn--primary" style="--btn-bg: #ffb703; --btn-color: #081c15">Sunrise CTA</button>