Typography

Heading levels, text sizes, font families, and body copy driven by your ACSS tokens.

Headings

H1var(–h1)

The quick brown fox

H2var(–h2)

The quick brown fox

H3var(–h3)

The quick brown fox

H4var(–h4)

The quick brown fox

H5var(–h5)
The quick brown fox
H6var(–h6)
The quick brown fox

Text Sizes

XXLvar(–text-xxl)

The quick brown fox jumps over the lazy dog.

XLvar(–text-xl)

The quick brown fox jumps over the lazy dog.

Lvar(–text-l)

The quick brown fox jumps over the lazy dog.

Mvar(–text-m)

The quick brown fox jumps over the lazy dog.

Svar(–text-s)

The quick brown fox jumps over the lazy dog.

XSvar(–text-xs)

The quick brown fox jumps over the lazy dog.

Font Families

Heading Font
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm
0123456789 !@#$%&
var(–heading-font-family)
Text Font
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm
0123456789 !@#$%&
var(–text-font-family)

Body Text

This is a standard body paragraph rendered with your default text styles.

A second paragraph shows normal content rhythm, spacing, and readability using your global ACSS typography tokens.

Primary
ultra-light
Copied
-primary-ultra-light
Popup theme
light
Copied
-primary-light
Popup theme
semi-light
Copied
-primary-semi-light
Popup theme
core
Copied
-primary
Popup theme
hover
Copied
-primary-hover
Popup theme
semi-dark
Copied
-primary-semi-dark
Popup theme
dark
Copied
-primary-dark
Popup theme
ultra-dark
Copied
-primary-ultra-dark
Popup theme
Secondary
ultra-light
Copied
-secondary-ultra-light
Popup theme
light
Copied
-secondary-light
Popup theme
semi-light
Copied
-secondary-semi-light
Popup theme
core
Copied
-secondary
Popup theme
hover
Copied
-secondary-hover
Popup theme
semi-dark
Copied
-secondary-semi-dark
Popup theme
dark
Copied
-secondary-dark
Popup theme
ultra-dark
Copied
-secondary-ultra-dark
Popup theme
Tertiary
ultra-light
Copied
-tertiary-ultra-light
Popup theme
light
Copied
-tertiary-light
Popup theme
semi-light
Copied
-tertiary-semi-light
Popup theme
core
Copied
-tertiary
Popup theme
hover
Copied
-tertiary-hover
Popup theme
semi-dark
Copied
-tertiary-semi-dark
Popup theme
dark
Copied
-tertiary-dark
Popup theme
ultra-dark
Copied
-tertiary-ultra-dark
Popup theme
Accent
ultra-light
Copied
-accent-ultra-light
Popup theme
light
Copied
-accent-light
Popup theme
semi-light
Copied
-accent-semi-light
Popup theme
core
Copied
-accent
Popup theme
hover
Copied
-accent-hover
Popup theme
semi-dark
Copied
-accent-semi-dark
Popup theme
dark
Copied
-accent-dark
Popup theme
ultra-dark
Copied
-accent-ultra-dark
Popup theme
Base
ultra-light
Copied
-base-ultra-light
Popup theme
light
Copied
-base-light
Popup theme
semi-light
Copied
-base-semi-light
Popup theme
core
Copied
-base
Popup theme
hover
Copied
-base-hover
Popup theme
semi-dark
Copied
-base-semi-dark
Popup theme
dark
Copied
-base-dark
Popup theme
ultra-dark
Copied
-base-ultra-dark
Popup theme
Neutral
ultra-light
Copied
-neutral-ultra-light
Popup theme
light
Copied
-neutral-light
Popup theme
semi-light
Copied
-neutral-semi-light
Popup theme
core
Copied
-neutral
Popup theme
hover
Copied
-neutral-hover
Popup theme
semi-dark
Copied
-neutral-semi-dark
Popup theme
dark
Copied
-neutral-dark
Popup theme
ultra-dark
Copied
-neutral-ultra-dark
Popup theme

Colors

Palette, contextual text colors, and light/dark scheme previews using ACSS color tokens.

Palette

Primary
ultra-light
light
base
dark
Secondary
ultra-light
light
base
dark
Tertiary
ultra-light
light
base
dark
Accent
ultra-light
light
base
dark
Base
ultra-light
light
base
dark
Neutral
ultra-light
light
base
dark

Contextual Text Colors

var(–text-dark)

The quick brown fox jumps over the lazy dog.

var(–text-dark-muted)

The quick brown fox jumps over the lazy dog.

var(–text-light)

The quick brown fox jumps over the lazy dog.

var(–text-light-muted)

The quick brown fox jumps over the lazy dog.

Spacing

Padding rings and gap examples using your ACSS spacing tokens.

Spacing Scale

var(–space-xxl)
var(–space-xl)
var(–space-l)
var(–space-m)
var(–space-s)
var(–space-xs)
inner content

Contextual Gaps

var(–content-gap)
Heading
Paragraph
Paragraph
List
var(–grid-gap)
var(–container-gap)
Container 1
Container 2
Container 3

Links & Buttons

Global link behavior and ACSS button utilities.

Links

Here is a paragraph with a standard inline link embedded in body copy.

Standard linkPrimarySecondaryAccentBase dark

Buttons

PrimarySecondaryTertiaryAccentBaseNeutralPrimary OutlineSecondary OutlineTertiary OutlineAccent OutlineBase OutlineNeutral Outline

Dark Surface Preview

Dark background

PrimarySecondaryPrimary OutlineSecondary Outline
Standard linkPrimary lightAccent light
  • Menu Link