Text
Aa quick brown foxtext-text-primary
Aa quick brown foxtext-text-secondary
Aa quick brown foxtext-text-tertiary
Aa quick brown foxtext-text-inverse
Aa quick brown foxtext-text-on-brand
Aa quick brown foxtext-text-disabled
Aa quick brown foxtext-text-on-disabled
Aa quick brown foxtext-text-link-primary
Aa quick brown foxtext-text-link-primary-hover
Aa quick brown foxtext-text-link-secondary
Aa quick brown foxtext-text-link-secondary-hover
Aa quick brown foxtext-text-positive
Aa quick brown foxtext-text-on-positive
Aa quick brown foxtext-text-warning
Aa quick brown foxtext-text-on-warning
Aa quick brown foxtext-text-negative
Aa quick brown foxtext-text-on-negative-primary
Aa quick brown foxtext-text-on-negative-secondary
Background
bg-background-primary
bg-background-primary-hover
bg-background-secondary
bg-background-secondary-hover
bg-background-tertiary
bg-background-tertiary-hover
bg-background-quaternary
bg-background-inverse
bg-background-inverse-hover
bg-background-brand
bg-background-brand-hover
bg-background-positive
bg-background-warning
bg-background-negative-primary
bg-background-negative-primary-hover
bg-background-negative-secondary
bg-background-negative-secondary-hover
bg-background-negative-ghost
bg-background-negative-ghost-hover
bg-background-disabled
bg-background-modal
bg-background-overlay
bg-background-cell-overlay
Border and divider
border-border-primary
border-border-primary-hover
border-border-secondary
border-border-secondary-hover
border-border-tertiary
border-border-tertiary-hover
border-border-inverse
border-border-brand
border-border-focus
border-border-disabled
border-border-positive
border-border-warning
border-border-negative
border-divider
Glass (over imagery)
Aa
text-glass-text-primaryAa
text-glass-text-secondaryAa
text-glass-text-tertiaryAa
text-glass-text-disabledAa
text-glass-text-negativebg-glass-background-primary
bg-glass-background-primary-hover
bg-glass-background-surface
bg-glass-background-surface-thick
bg-glass-background-control
bg-glass-background-control-hover
border-glass-divider
Primitives
neutral
red
yellow
green
blue
purple
opacity-black
opacity-gray
opacity-white
Type
text-captionThe quick brown fox
text-caption-boldThe quick brown fox
text-compactThe quick brown fox
text-compact-boldThe quick brown fox
text-bodyThe quick brown fox
text-body-boldThe quick brown fox
text-featureThe quick brown fox
text-feature-boldThe quick brown fox
text-title-3The quick brown fox
text-title-2The quick brown fox
text-title-1The quick brown fox
text-spotlightThe quick brown fox
text-showcaseThe quick brown fox
Radius
rounded-4
rounded-8
rounded-12
rounded-16
rounded-20
rounded-24
rounded-28
rounded-32
rounded-40
rounded-full
Shadow
shadow
shadow-xs
shadow-large
shadow-glass
shadow-dropdown
shadow-image-inset
shadow-logo-inset
Spacing (1px base)
size-4
size-8
size-12
size-16
size-20
size-24
size-32
size-40
size-48
size-64
size-80