Components
Buttons
Base is a solid --second pill that fills --prime on hover. Combine classes on the same element.
Primary
class="btn" — solid --second, hover --prime.
<a class="btn" href="#">Get started</a>Alt
class="btn alt" — inverse: solid --prime, hover --second.
<a class="btn alt" href="#">Learn more</a>Outline
class="btn outline" — transparent with a --prime edge; fills --prime on hover.
<a class="btn outline" href="#">Secondary action</a>Alt outline
class="btn alt outline" — transparent with a --second edge; fills --second on hover.
<a class="btn alt outline" href="#">Tertiary action</a>Pair
Primary + outline, the common CTA pairing.
<a class="btn" href="#">Get started</a> <a class="btn outline" href="#">See how</a>| Class | Look |
|---|---|
.btn | solid --second → hover --prime |
.btn.alt | solid --prime → hover --second |
.btn.outline | transparent, --prime edge → fills --prime |
.btn.alt.outline | transparent, --second edge → fills --second |