Typography Reference ↓

Native Headings (h1-h6)

Design systems that scale

Crafting consistent UI experiences

Component architecture & design tokens

Accessible, composable, customisable

Zero dependencies - pure CSS & vanilla JS

Ship faster without sacrificing quality

Text Sizes

@3xl - Great design is invisible

@2xl - Great design is invisible

@xl - Great design is invisible

@l - Great design is invisible

@m - Great design is invisible

@s - Great design is invisible

@xs - Great design is invisible

Font Weights

normal 400

The quick brown fox

medium 500

The quick brown fox

semibold 600

The quick brown fox

bold 700

The quick brown fox

Text Transform

ui-text-transform-none - The quick brown fox jumps over the lazy dog

ui-text-transform-capitalize - The quick brown fox jumps over the lazy dog

ui-text-transform-uppercase - The quick brown fox jumps over the lazy dog

ui-text-transform-lowercase - THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG

Text Colors

Primary Secondary Success Warning Danger Info Brand Accent Muted Default Black White

Links

Primary Muted Secondary Success Warning Danger Info Brand Accent

Inline elements

Typography forms the backbone of every interface. Bold text anchors attention, italics add nuance, and underlines signal interactivity. ~~Strikethrough~~ conveys changes, while monospace code is indispensable for technical content. Use semantic links to guide users through your product.

Blockquote

"Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world." - Albert Einstein

Code Block

function greet(name) {
  const message = `Hello, ${name}!`;
  console.log(message);
  return message;
}

greet('World');

Reference

Base

Class	Values
`.ui-text-weight-*`	normal, medium, semibold, bold
`.ui-text-transform-*`	none, capitalize, uppercase, lowercase
`.ui-link`	base link (default = primary)
`.ui-blockquote`	styled blockquote
`.ui-code`	inline monospace code
`.ui-codeblock`	multiline code block on <pre>

Modifiers

Class	Values
`.ui-text@*`	xs, s, m, l, xl, 2xl, 3xl
`.ui-text:*`	primary, secondary, success, warning, danger, info, brand, accent, muted, default, black, white
`.ui-link:*`	muted, secondary, success, warning, danger, info, brand, accent

Options

Class	Values