Koala logo Design
Overview Colours Typography Icons Dark mode Avatar pickers Avatars Badges Breadcrumbs Buttons Cards Empty states Nav items Stat cards Steppers Sticky headers Switchers Tables Tabs Timelines Charts Rich text Tooltips Action menus Forms Autocomplete Modals Notifications Side trays

Typography

Font families, heading hierarchy, body text sizes, and weight scale used across the Koala platform.

Font family

Plus Jakarta Sans is the primary typeface for all body and heading text. System monospace is used for code.

font-body / font-sans — Plus Jakarta Sans

The quick brown fox jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

font-mono — System monospace

The quick brown fox jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

<p class="font-body">Body text in Plus Jakarta Sans</p>
<code class="font-mono">Code in system monospace</code>

Heading hierarchy

Headings use font-bold weight. Sizes are applied via Tailwind utility classes, not semantic heading elements.

text-3xl (30px)

Page heading h1

text-2xl (24px)

Section heading h2

text-xl (20px)

Subsection heading h3

text-lg (18px)

Card heading h4

text-base (16px)

Minor heading h5

text-sm (14px)

Label heading h6

<h1 class="text-3xl font-bold text-gray-900 dark:text-white">Page heading</h1>
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">Section heading</h2>
<h3 class="text-xl font-bold text-gray-900 dark:text-white">Subsection heading</h3>

Body text sizes

Three tiers of text size with strict rules about where each is used.

Default (16px) — body content, data values, names, descriptions, timestamps, links

Koala is a conveyancing platform that connects estate agents with legal professionals. This is the standard body text size used across all primary content.

text-sm (14px) — definition labels, secondary metadata, table headers

Created at · Last updated · Reference number · Status label

text-xs (12px) — badges and tiny tags only

Active Draft Pending

Important: Body content must never use text-sm or text-xs. Only definition labels, secondary metadata, and badges use smaller sizes.

Font weights

The four weights loaded from Plus Jakarta Sans.

font-normal (400)

The quick brown fox jumps over the lazy dog

font-medium (500)

The quick brown fox jumps over the lazy dog

font-semibold (600)

The quick brown fox jumps over the lazy dog

font-bold (700)

The quick brown fox jumps over the lazy dog

<p class="font-normal">Normal weight (400)</p>
<p class="font-medium">Medium weight (500) — form labels, nav items</p>
<p class="font-semibold">Semibold weight (600) — section headings, card titles</p>
<p class="font-bold">Bold weight (700) — page headings, table headers</p>