Skip to main content
Foundations

# Typography

Display sizes
56px / 700 / -2px
Built to ship.
42px / 700 / -1.4px
A free admin template, redesigned.
32px / 700 / -1px
Real charts, real tables, real fast.
Heading scale
28px / 700 — H1

The quick brown fox jumps over the lazy dog

22px / 600 — H2

## The quick brown fox jumps over the lazy dog

18px / 600 — H3

### The quick brown fox jumps over the lazy dog

15px / 600 — H4

#### The quick brown fox jumps over the lazy dog

14px / 400 — body
Body copy at 14/1.43. The quick brown fox jumps over the lazy dog. Use this size for paragraph text and most UI labels.
13px / 400 — secondary
Secondary text at 13px in `--text-secondary` for descriptions, captions and tertiary copy.
12px / 500 — helper
Helper text at 12px in `--text-muted`. Use sparingly for inline metadata.
11px / 600 caps
Eyebrow / pretitle
Inline text

Bold uses medium 500 by default. Italic looks like this. A hyperlink uses the primary teal. Inline `code` sits at 12px. Use `⌘K` to open the search.

You can highlight or strike old text. Footnotes use superscript or subscript. Abbreviations like CSS use a dotted underline.

Use small caps for compact metadata.

Block elements

> “Design is not just what it looks like and feels like. Design is how it works.”

- Concise list items at 13px
- Comfortable line-height of 1.6
- Bullet color matches body text

1. First step in the sequence
2. Second step continues from above
3. Third step closes the loop

Plan
  Business
Seats
  12 of 25 used
Renewal
  May 28, 2026

Reading copy

Lead paragraph at 16/1.65 for product copy, blog intros, and onboarding screens. Keeps lines around 65–80 characters for comfortable reading.

Body paragraphs continue at 14/1.7 with secondary color. Notice how the spacing between paragraphs gives the eye a place to rest. Long-form articles can run to ~75 characters per line and stay readable on most desktop breakpoints.

Inline emphasis like links, bold accents, and italics all share the body line-height so vertical rhythm is preserved across the whole block.

Footnote. Smaller meta text (12.5/1.55) sits comfortably below dividers. Use this for source attributions, timestamps, and disclaimers.

Code block

    // Add a chart factory to charts.js
    function myChart(echarts, el, t) {
      const chart = echarts.init(el);
      chart.setOption({
        series: [{ type: 'line', data: [12, 18, 24, 30] }]
      });
      return chart;
    }

Terminal

    $ npm run build
    ✓ built in 4.9s
    $ npm run preview
      ➜  Local: http://localhost:4173/
    $ █

Numerals
Default
$28,401.50 · 99.9%
Tabular
$28,401.50 · 99.9%
Display
$28,401
Mono
acct_8f3k29df3lkj
Truncation
Single-line truncate
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
Multi-line clamp (3 lines)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.