Typography

Ziom uses Inter for UI text and a monospace stack for code. Font sizes, weights, line-heights, and letter-spacing are all tokenized in variables.css. Prefer the heading and text utility classes over ad-hoc sizes.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

HTML

<h1 class="ziom-heading-1">Heading 1</h1>
<h2 class="ziom-heading-2">Heading 2</h2>
<h3 class="ziom-heading-3">Heading 3</h3>
<h4 class="ziom-heading-4">Heading 4</h4>

Body & Labels

Regular body text using the base size.

Small text for secondary content.

Extra small text for captions.

Muted / secondary text.

SECTION LABEL

HTML

<p class="ziom-text">Regular body text using the base size.</p>
<p class="ziom-text-sm">Small text for secondary content.</p>
<p class="ziom-text-xs">Extra small text for captions.</p>
<p class="ziom-text-muted">Muted / secondary text.</p>
<span class="ziom-text-label">SECTION LABEL</span>

Type Scale

Token	Size
`--ziom-text-xs`	11px
`--ziom-text-sm`	13px
`--ziom-text-base`	15px
`--ziom-text-lg`	17px
`--ziom-text-xl`	20px
`--ziom-text-2xl`	24px
`--ziom-text-3xl`	30px

Weights

Normal — 400

Medium — 500

Semibold — 600

Bold — 700

HTML

<p style="font-weight: var(--ziom-font-normal);">Normal &mdash; 400</p>
<p style="font-weight: var(--ziom-font-medium);">Medium &mdash; 500</p>
<p style="font-weight: var(--ziom-font-semibold);">Semibold &mdash; 600</p>
<p style="font-weight: var(--ziom-font-bold);">Bold &mdash; 700</p>