Brand Colors

primary
primaryLight
secondary
secondaryLight
tertiaryLight
secondaryDark
afterpayBlue
klarnaPink
paypalBlue
sbBackground
grayAccent
highlightGreen

UI Colors

black
white
brightTurquoise
gray50
gray100
gray200
gray300
gray400
gray500
gray600
gray700
gray800
gray950
gray900
red
redLight
placeholderPink
success
searchGray
noResultsGray

Text Variants

These variants serve as presets for fontSize, fontWeight, letterSpacing, and textTransform. They are defined in the Vanilla text recipe. The variant unstyled is a special case not defined in the recipe. It is used as an override in the Text component to bypass recipe styling and allow for full customization via style props.

micro

The quick brown fox jumped over the lazy dog

caption

The quick brown fox jumped over the lazy dog

label

The quick brown fox jumped over the lazy dog

base

The quick brown fox jumped over the lazy dog

eyebrow

The quick brown fox jumped over the lazy dog

tagline

The quick brown fox jumped over the lazy dog

title

The quick brown fox jumped over the lazy dog

emphasis

The quick brown fox jumped over the lazy dog

body

The quick brown fox jumped over the lazy dog

subhead

The quick brown fox jumped over the lazy dog

heading

The quick brown fox jumped over the lazy dog

display

The quick brown fox jumped over the lazy dog

unstyled

The quick brown fox jumped over the lazy dog

Button Variants

These variants serve as presets for backgroundColor, color, border, andborderColor, as well as associated :hover and :active states. They are defined in the Vanilla button recipe. The variant unstyled is a special case not defined in the recipe. It is used as an override in the Button component to bypass recipe styling and allow for full customization via style props.

filledDark
filledLight
outline
unstyled