Typography

Typefaces

Two typefaces are used across all Level 147 interfaces. Both are loaded via Google Fonts.

Inter — primary typeface

Used for all UI text, body copy, headings, and labels.

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

--font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

Inter is a variable-weight sans-serif optimised for screen readability at small sizes. It has a large x-height, open apertures, and distinguishable characters (0 vs O, l vs 1) that are important for data-dense interfaces.

Fallback chain: Segoe UI (Windows), system-ui (macOS/iOS), -apple-system (older Safari), generic sans-serif.

JetBrains Mono — monospace typeface

Used for all code, terminal output, data values, API endpoints, environment variable names, and numeric data.

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

--font-mono: "JetBrains Mono", "Cascadia Code", ui-monospace, monospace;

JetBrains Mono features programming ligatures (disabled by default) and excellent distinguishability between similar characters.

Fallback chain: Cascadia Code (Windows Terminal), ui-monospace (system mono), generic monospace.

---

Type scale

The scale uses rem units anchored to the browser default (16px). All sizes are defined as CSS custom properties and must be used — do not introduce ad-hoc font sizes.

Token	rem	px	Use
--fs-0	0.82rem	13.1px	Captions, badges, chip labels, table footnotes
--fs-1	0.92rem	14.7px	Sidebar items, metadata, secondary body
--fs-2	1rem	16px	Default body text
--fs-3	1.18rem	18.9px	Lead paragraphs, intro copy
--fs-4	1.5rem	24px	Section headings (h2)
--fs-5	2rem	32px	Page titles (h1)
--fs-6	2.6rem	41.6px	Hero / display headings

/* Usage */
.caption    { font-size: var(--fs-0); }
.body       { font-size: var(--fs-2); }
.lead       { font-size: var(--fs-3); }
h2          { font-size: var(--fs-4); }
h1          { font-size: var(--fs-5); }
.hero-title { font-size: var(--fs-6); }

---

Font weights

Weight	Value	Use
Regular	400	Body text, prose, table cells
Semibold	600	Navigation labels, table headers, button text, active states
Bold	700	Headings h2–h3, emphasis
Heavy	800	Display headings h1, hero titles

.body-text     { font-weight: 400; }
.nav-label     { font-weight: 600; }
.section-title { font-weight: 700; }
.hero-heading  { font-weight: 800; }

---

Line height

--lh: 1.7;

A line height of 1.7 is used for all body text. This is generous — appropriate for technical documentation where dense prose must remain scannable.

For headings, tighten to 1.1–1.2 to prevent gaps between lines on multi-line titles.

p, li, td {
  line-height: var(--lh);         /* 1.7 */
}

h1, h2, h3 {
  line-height: 1.15;              /* tighter for headings */
}

---

Letter spacing

Element	Value	Rationale
Body text	0	Inter is already optimised; do not adjust
Display headings	−0.4px to −0.6px	Tighten large type slightly
ALL CAPS labels	+1.5px	Open tracking improves readability at small caps sizes

.display-heading  { letter-spacing: -0.5px; }
.section-label    { letter-spacing: 1.5px; text-transform: uppercase; }

---

Monospace usage rules

Use --font-mono (JetBrains Mono) for:

• All code blocks and inline code
• Terminal commands and shell output
• File paths and directory names
• Environment variable names (NEXT_PUBLIC_*, DATABASE_URL, etc.)
• API routes (/api/widgets/docker)
• IP addresses and port numbers
• Timestamps in log-style displays
• Version numbers when presented as identifiers

Do not use monospace for:

• Prose references to technology names (“Docker”, “Cloudflare”)
• Generic UI labels, even if they reference config keys
• Tables where the monospace content is not code

code, pre, kbd {
  font-family: var(--font-mono);
  font-size: 0.84em;   /* slightly smaller than surrounding text */
}

---

Responsive behaviour

The type scale is fixed (rem-based, not viewport-relative). Do not use fluid type (clamp, vw units) in the current design system — the dashboard is used on large screens at consistent viewport widths. Revisit if mobile support becomes a requirement.

---

Typographic hierarchy example

<!-- Page title -->
<h1>Dashboard</h1>                    <!-- --fs-5, weight 800 -->

<!-- Section heading -->
<h2>Widget Reference</h2>             <!-- --fs-4, weight 700 -->

<!-- Subsection -->
<h3>Docker Containers</h3>            <!-- --fs-3, weight 650 -->

<!-- Body -->
<p>The Docker widget reads container state via...</p>  <!-- --fs-2, weight 400 -->

<!-- Metadata / label -->
<span class="label">Updated 2 min ago</span>          <!-- --fs-0, weight 600 -->

<!-- Code reference -->
<code>/api/widgets/docker</code>      <!-- --font-mono, 0.84em -->