Text

Overview

Typography in Axiom CSS is driven by design‑tokens, so every colour, size and spacing unit is customisable from one place. Text colours auto‑invert when you toggle the .dark class on <html>, thanks to dual‑token definitions in the config you saw earlier. The default sizing ladder is generated from two variables: --text-base-size (16 px) and --text-size-ratio (1.15). Change either value once and every utility shown below adjusts automatically.

Headings & Paragraphs

Core tags (<h1>–<h6> and <p>) ship with sensible margins, typography‑friendly line‑height, and the colour tokens --i-text-base-primary/secondary. They’ll switch to light‑on‑dark automatically.

Automatic h1 style

Automatic h2 style

Body copy inherits a comfortable 1.5 line‑height and uses the secondary text tone so that headings stand out.

<h1>Automatic h1 style</h1>
<h2>Automatic h2 style</h2>
<p>Body copy inherits…</p>

Colour Tokens & Auto Inversion

Pick from semantic tokens (.i-text-base-primary, .i-text-base-secondary) or palette helpers (.text-base-700, .text-red). All semantic tokens use a touch of transparency, so they sit comfortably on tinted backgrounds—handy for cards and alerts. When .dark is applied, these same classes flip to their light variants.

Primary in dark mode

Secondary in dark mode

Palette red (unchanged)

<p class="i-text-base-primary">…</p>
<p class="i-text-base-secondary">…</p>
<p class="text-red">…</p>

Sizing Utilities

The scale is a geometric progression (--text-size-ratio) so .text-size-lg is always ratio × the base, .text-size-xl is ratio², and so on. Responsive versions are available via container queries.

Small text

Large text

Small below 500 px, large above 850 px

<p class="text-size-sm">…</p>
<p class="text-size-lg">…</p>
<p class="sm:text-size-sm md:text-size-lg">…</p>

Alignment

Utility classes mirror CSS values and ship with break‑point variants.

Always centred

Right‑aligned on medium screens up

<p class="text-center">…</p>
<p class="md:text-right">…</p>

Weight & Style

Nine weight utilities map 1:1 to the numeric CSS weights, plus italic helpers.

300 Light

700 Bold

500 Medium Italic

<p class="text-weight-300">…</p>
<p class="text-weight-700">…</p>
<p class="text-weight-500"><em>…</em></p>

Letter Spacing & Case

Helpful for UI labels and overlines.

TRACKING +25

condensed label

<p class="uppercase letter-spacing-wide">…</p>
<p class="lowercase letter-spacing-tight">…</p>

Overflow & Truncation

Prevents runaway text without custom CSS.

A very very long filename_that_needs_truncating.txt

<div style="max-width:14rem">
  <p class="text-truncate">A very very long…</p>
</div>

Lists

Defaults use inside bullets and respect the spacing scale. Mix‑in utilities when you need emphasis.

Bread
Milk
Coffee

<ul>
  <li>Bread</li>
  <li>Milk</li>
  <li class="text-weight-semibold text-base-700">Coffee</li>
</ul>

Links

Anchor tags pick up brand colours and subtle transparency by default; utilities override when needed.

Default link

Custom orange link

<a href="#">Default link</a>
<a href="#" class="text-orange">Custom orange link</a>

AxiomCSS