Skip to Content

Typography

Each sample uses the corresponding `.text-*` utility class.

.text-h1
Heading 1 – The quick brown fox
var(--text-h1)
.text-h2
Heading 2 – The quick brown fox
var(--text-h2)
.text-h3
Heading 3 – The quick brown fox
var(--text-h3)
.text-h4
Heading 4 – The quick brown fox
var(--text-h4)
.text-h5
Heading 5 – The quick brown fox
var(--text-h5)
.text-h6
Heading 6 – The quick brown fox
var(--text-h6)
.text-body-xl
Body XL – The quick brown fox jumps over the lazy dog.
var(--text-xlarge)
.text-body-lg
Body Large – The quick brown fox jumps over the lazy dog.
var(--text-large)
.text-body
Body – The quick brown fox jumps over the lazy dog.
var(--text-regular)
.text-body-sm
Body Small – The quick brown fox jumps over the lazy dog.
var(--text-small)
.text-caption
Caption – The quick brown fox jumps over the lazy dog.
var(--text-caption)
.text-overline
OVERLINE – The quick brown fox
var(--text-overline)
.text-quote
“Quote – The quick brown fox jumps over the lazy dog.”
var(--text-quote)
.text-citation
Citation – The quick brown fox
var(--text-citation)

Buttons

Button variants and sizes using `.btn`, `.btn-*` utilities.

Primary
.btn .btn-primary .btn-[sm|md|lg]
Secondary
.btn .btn-secondary .btn-[sm|md|lg]
Ghost
.btn .btn-ghost .btn-[sm|md|lg]
White
.btn .btn-white .btn-[sm|md|lg]
Primary outline
.btn .btn-primary-outline .btn-[sm|md|lg]
White outline
.btn .btn-white-outline .btn-[sm|md|lg]
Disabled
:disabled state