Typography

BugPort's typography is editorial where it persuades and operational where it works. A confident display face carries marketing and milestone moments; a clean, highly legible body face carries everything you actually read and act on; and a monospace face carries logs, network rows, and paths. This page defines the font stack, the type-role scale, usage by surface, and the rules that keep type calm and legible.

The discipline here is restraint. A small number of roles, used consistently, is what makes the product feel precise rather than busy.

FONT STACK

Font stack

Three families, each with an open fallback. Proprietary source faces are reference-only — never a dependency in shipped code. Ship with the fallbacks if a source face is unavailable.

Display

Space Grotesk, with Archivo as fallback. Used for display and hero sizes — marketing headlines and the rare milestone moment. Distinctive, editorial, used sparingly.

Body / UI

Inter, with Manrope as fallback. The workhorse for all running text, UI labels, tables, forms, and dashboard chrome. Optimised for legibility at small sizes.

Code

IBM Plex Mono. Used for logs, network rows, response bodies, file paths, keys, and code samples. Fixed-width alignment is the point.

The type-role scale

Design and build against roles, not raw pixel values. Each role has a size, a weight, and a job.

Role	Size	Weight	Usage
Display	76px	Bold	Marketing hero headline; one per viewport section.
Hero	50px	Bold / Semibold	Secondary marketing headlines, large section openers.
Page title	32px	Semibold	Top-of-page H1 in dashboard and docs.
Section title	24px	Semibold	H2 section headers within a page.
Card title	20px	Semibold	Title of a card, dialog, or panel.
Body	16px	Regular	Default running text and paragraphs.
Body-sm	14px	Regular	Dense dashboard text, table rows, secondary copy.
Caption	12px	Regular	Timestamps, helper text, metadata.
Overline	12px	Semibold, uppercase	Eyebrow labels above a section.
Button label	14px	Semibold	All buttons and primary controls.
Code	12–13px	Regular (mono)	Logs, network, paths, keys, code samples.

Usage by surface

Each surface leans on a different part of the scale.

Marketing

Editorial and generous. Display and hero set the rhythm; body at 16px carries the argument. Display appears once per viewport section, never repeated down the page.

Dashboard

Operational and dense. Page title and section title for structure; body-sm 14px for tables and dense rows; mono for logs and network. Display sizes do not appear here.

Plugin

Compact. Card title and body-sm do most of the work in a narrow panel; button label on the submit action; mono for any captured technical detail. No large display type.

Auth + Email

Clear and minimal. A single page-title or card-title, body for the supporting line, button label on the one primary action. Restraint keeps these surfaces trustworthy.

Rules

A handful of rules keep type on-brand:

• Display once per viewport section. Never stack two display-size headlines in the same view; it kills the editorial rhythm.
• Never all-caps body. Uppercase is reserved for the overline role only. All-caps running text hurts legibility and reads as shouting.
• Tables and logs use body-sm and code. Dense dashboard rows, log lines, and network entries live at 14px or mono — not 16px body.
• Mono for logs, network, and paths. IBM Plex Mono signals "this is exact technical data": console output, network rows, response bodies, file paths, and keys.
• Max three text roles per small card. A compact card should not mix more than three roles (e.g. card title + body-sm + caption). More than that and the card stops being scannable.

🔤

A quick on-brand check for any card: can you name every text role on it, and is the count three or fewer? If you can't name a role, it probably shouldn't be there.

Typography do's and don'ts

✓ Do

• Reserve display and hero for marketing and milestone moments.
• Use body-sm and mono for dashboard tables, logs, and network rows.
• Keep small cards to three roles or fewer.
• Use the overline role for eyebrow labels, in semibold uppercase.

✕ Don't

• Don't repeat a display headline within the same viewport section.
• Don't set running body text in all-caps.
• Don't set dense tables or log rows at 16px body.
• Don't depend on a proprietary source face in shipped code — ship the fallback.

Next steps

📐Layout & Spacing

How type sits inside containers, rhythm, and the radius system.

Structure →🎨Visual Identity

The text colours these roles pair with.

Colour →🧭Product UX Principles

How type supports density and state patterns.

Behaviour →