Brand Colors
primary
primaryLight
secondary
secondaryLight
tertiaryLight
secondaryDark
afterpayBlue
klarnaPink
paypalBlue
sbBackground
grayAccent
highlightGreen
UI Colors
black
white
brightTurquoise
gray5
gray50
gray100
gray200
gray300
gray400
gray500
gray600
gray700
gray800
gray950
gray900
red
redLight
placeholderPink
success
searchGray
noResultsGray
blackWithOpacity
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