Living Documentation

Type scale, rhythm, and readability standards for every Lumora module

This page defines practical type usage: heading hierarchy, body rhythm, utility text, and code typography. Use the playground to test family, size, weight, spacing, and line-height combinations before shipping.

Type scale Reading rhythm Live controls Copy-ready snippets

Catalog Blocks 6 Scale, playground, heading map, body rules, composition, snippets

Primary Families 3 Josefin Sans, Inter, and JetBrains Mono

Type Tokens 5 Size, weight, line-height, spacing, and numeric style

Preview State Josefin — 16px Updated live from playground

1. Type Scale Matrix

Canonical heading and body scale used across page templates

Heading hierarchy

H1 — 32 / 700

Build observability for distributed systems

H2 — 24 / 600

Alerts, incidents, and release timelines

H3 — 20 / 600

Deployment pipeline summary

Body and utility text

Body text defaults to a comfortable rhythm for long-form scanning. Keep paragraphs concise and avoid over-tight line spacing in cards.

Small label: 12 / 500 uppercase tokens for metadata and chips.

2. Interaction Playground

Generate live typography recipes

Family

Weight

Size (px)

Line Height

Letter spacing (em)

Live Output

Josefin 16px

Josefin Sans, 16px, weight 500, line-height 1.6.

Use copy recipe for generated CSS.

Great dashboards feel calm, clear, and confidently structured. Typography is the first signal of that quality.

3. Heading Rhythm

Map section hierarchy from page title to local card title

Page title zone

Incident Command Center

Primary page context and action framing.

Section and card titles

Active Incidents

Critical services

4. Body and Numeric Text

Ensure readability while preserving numeric alignment

Body paragraph standard

Keep operational narratives clear and concise. For dashboard notes, prefer short paragraphs with direct verbs and specific values.

Tabular numerics

09:15:02 — 1832 requests — 99.94% uptime — $18,420.55

5. Composition Patterns

Practical card and table pairings for production pages

Stat card composition

Monthly Revenue

$214,920

+12.4% from last month

Table row typography

Build pipeline timeout

Updated 8 minutes ago

6. Real-use Snippets

Copy-ready snippets for heading map, body style, and numeric text

Heading Stack

<h1 style="font-size:32px;font-weight:700;letter-spacing:-0.01em">Page Title</h1>
<h2 style="font-size:24px;font-weight:600">Section Title</h2>
<h3 style="font-size:20px;font-weight:600">Card Title</h3>

Body Paragraph

<p style="font-size:14.5px;line-height:1.6;font-weight:400">
  Keep body text concise and readable for scanning.
</p>

Tabular Numerics

<div class="u-font-inter" style="font-variant-numeric:tabular-nums">
  09:15:02 — 1832 requests — 99.94%
</div>