foundations

Typography

The main application font is Inter — a font designed for the web which can be localised, and clear at both body and heading sizes. Keeping typography consistent and sticking to logical hierarchies ensures that elements in the UI are clear and easily recognisable when scanning the page. The typographic scale communicates visual hierarchy in text. Formatting rules: By default, text is left-aligned. Exceptions include text in tables and centred text used in empty states. Bold text should be used sparingly and only where strong emphasis is required — in interfaces, bold should seldom be used to enhance visual hierarchy. Underline styles are exclusively for text links; don't use underline for emphasis within body copy. The heading scale uses four levels, all in Semibold weight: Heading 3XL (H1) at 30px/32px line-height, Heading 2XL (H2) at 24px/32px, Heading XL (H3) at 20px/24px, and Heading L (H4) at 18px/24px. Body text uses text-sm (14px) as the standard size for dense UI contexts. text-base (16px) is reserved for reading-heavy areas, and text-xs (12px) for supplementary information like timestamps and captions.

Usage Guidance

When to use

  • +Apply consistent typography for clear visual hierarchy.
  • +Use the Heading component for page and section titles (H1–H4).
  • +Follow the type scale to create clear, scannable layouts.

When not to use

  • −Don't use arbitrary font sizes — stick to the type scale.
  • −Don't use fonts other than Inter.

Examples

Code Samples

Heading scale

The heading scale uses four levels, all set in Inter Semibold. Each level has specific size and line-height values: | Style | Type | Weight | Size | Line Height | |---|---|---|---|---| | Heading 3XL (H1) | Heading | Semibold | 30px | 32px | | Heading 2XL (H2) | Heading | Semibold | 24px | 32px | | Heading XL (H3) | Heading | Semibold | 20px | 24px | | Heading L (H4) | Heading | Semibold | 18px | 24px |

<div className="flex flex-col gap-4">
  <Heading level={1}>Heading 3XL (H1) — 30px</Heading>
  <Heading level={2}>Heading 2XL (H2) — 24px</Heading>
  <Heading level={3}>Heading XL (H3) — 20px</Heading>
  <Heading level={4}>Heading L (H4) — 18px</Heading>
</div>

Body text sizes

Body text uses three sizes from the typographic scale. text-base (16px) is for reading-heavy contexts where legibility matters, such as descriptions. text-sm (14px) is the workhorse size for the majority of interface text including table cells, form labels, and list items. text-xs (12px) is for supplementary information like timestamps and captions.

<div className="flex flex-col gap-3">
  <p className="text-base text-gray-900">
    Base body text (16px) — use for content-heavy areas like descriptions.
  </p>
  <p className="text-sm text-gray-700">
    Small body text (14px) — the default for most interface text.
  </p>
  <p className="text-xs text-gray-500">
    Caption text (12px) — use for supplementary information and timestamps.
  </p>
</div>

Formatting rules

Text is left-aligned by default. Bold (Semibold) should be used sparingly — only where strong emphasis is required. Underline styles are exclusively for text links; never use underline for emphasis within body copy.

<div className="flex flex-col gap-3">
  <p className="text-sm text-gray-700">
    Left-aligned text is the default for all content.
  </p>
  <p className="text-sm text-gray-700">
    Use <span className="font-semibold">bold text sparingly</span> for strong emphasis only.
  </p>
  <p className="text-sm text-gray-700">
    <a href="#" className="underline text-blue-600">Underline is exclusively for links</a> — never for emphasis.
  </p>
</div>

Text with components

Combine headings, body text, and inline components like Badge to build typical content blocks. This example shows a card with a status badge, a medium-weight title, a secondary description, and a tertiary timestamp. The progression from dark to light text colour reinforces the reading hierarchy.

<Card>
  <CardHeader>
    <div className="flex items-center gap-2">
      <span>Job Details</span>
      <Badge color="green">Confirmed</Badge>
    </div>
  </CardHeader>
  <div className="p-4 flex flex-col gap-1">
    <p className="text-sm font-medium text-gray-900">Electrical Inspection</p>
    <p className="text-sm text-gray-600">Scheduled for tomorrow at 9:00 AM</p>
    <p className="text-xs text-gray-400">Last updated 2 hours ago</p>
  </div>
</Card>

Guidelines

Do

  • ✓Use Heading component for semantic headings (H1–H4).
  • ✓Left-align text by default.
  • ✓Use font-weight-semibold (600) for headings and font-weight-medium (500) for labels.
  • ✓Use the typographic scale to communicate visual hierarchy.
  • ✓Limit heading levels to 3–4 per page for clear hierarchy.

Don't

  • ✗Don't use bold for entire paragraphs — use sparingly for strong emphasis only.
  • ✗Don't use underline for emphasis — underline is exclusively for text links.
  • ✗Don't skip heading levels (H1 → H3).
  • ✗Don't use font sizes smaller than 12px for readable content.