Typography · Since Labs Brand

5.1 The three faces

Face	Role	Where
Lora	Display	Page titles, hero lines, section headings. Nothing else
DM Sans	Interface and body	Everything that is not a heading and not machine data
Geist Mono	Machine data	IDs, emails, slugs, keys, timestamps, shortcuts, the `//` device

All three are on Google Fonts, free, and already loaded by both sincelabs.com and sincelabs/app. Load them with next/font/google:

import { Lora, DM_Sans, Geist_Mono } from "next/font/google";

const lora     = Lora({ variable: "--font-lora", subsets: ["latin"], display: "swap" });
const dmSans   = DM_Sans({ variable: "--font-dm-sans", subsets: ["latin"], display: "swap" });
const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"], display: "swap" });

Fallbacks, for email and anywhere a webfont will not load:

Brand face	Fallback stack
Lora	`Georgia, 'Times New Roman', serif`
DM Sans	`system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif`
Geist Mono	`ui-monospace, SFMono-Regular, Menlo, Consolas, monospace`

⚠️ Cormorant Garamond and Inter are not the brand faces

The Notion "Brand Design System Skills" doc names Cormorant Garamond and Inter. That was written from a visual read of the site, before the token files were inspected. The shipped CSS on both properties is Lora, DM Sans and Geist Mono. Update the Canva brand kit to match.

5.2 Why a serif at all

Because everyone else uses Inter, and because it is the fastest way to say this was written by a person, not generated by a platform. The serif is the brand's warmth, and it is the reason the identity survives being screenshotted next to a competitor.

Use it sparingly. Lora appears on page titles and hero lines, and nowhere else. A serif paragraph or a serif button label reads as a magazine, not as software. The discipline is what keeps the serif meaning something.

5.3 The scale

Name	Size	Line	Tracking	Face	Use
Hero	42px	1.1	−0.02em	Lora	Marketing hero. One per page
Title	28px	1.15	−0.7px	Lora	Page title (h1). The `PageHeader` size
Section	20px	1.3	−0.01em	Lora	Major section heading
Panel	15px	1.4	0	DM Sans 600	Panel and card headings
Body	14px	1.6	0	DM Sans 400	Prose, form values, buttons
UI	13.5px	1.5	0	DM Sans 400	Nav rows, table cells, list items
Secondary	12.5px	1.5	0	DM Sans 400	Captions, hints, metadata
Eyebrow	12px	1.4	+0.08em	DM Sans 500 caps	ALL-CAPS section labels
Micro	11px	1.4	0	DM Sans 500	Chips, badges, keyboard hints

11px is the floor. Nothing in a Since Labs interface is smaller, ever.

Weights: 400 regular, 500 medium, 600 semibold, 700 bold (wordmark only). There is no light weight and no black weight in this brand.

Tracking: negative on display sizes (large type sets loose), zero on interface text, and +0.08em on the eyebrow only. Letter-spaced body copy is not a Since Labs thing.

5.4 The italic move

The brand's single most distinctive typographic gesture:

Serif italic, in terracotta, on the one phrase that matters.

Since we started, <em>everything changed.</em>

Rules, and they are strict:

One per surface. A hero line, or a pull quote. Not both.
Never in body copy. It loses all its power the second time it appears.
Colour it accent-ink #A34A1F, not accent — it is text.
The italic phrase must be the thing you would want someone to remember if they read nothing else.

5.5 The mono rule

Geist Mono means "a machine said this". It is not a decorative face and it is not for emphasis.

Set in mono:

Identifiers — user IDs, org IDs, product keys, slugs
Email addresses in operator tables
Timestamps and dates in logs
Audit-log action names, HTTP status, error codes
Keyboard hints — ⌘K, esc, ↵
Counts in a nav badge
The // device

Never in mono:

Body copy, headings, button labels
A person's name
A number that is a quantity rather than an identifier — 147 members is DM Sans with tabular-nums, not mono

This distinction is load-bearing. It is how an operator scanning a table knows, without reading, which column is a thing they can copy into a support ticket.

5.6 Rules that hold everywhere

Sentence case. Headings, buttons, labels, table headers, menu items. The eyebrow is the only uppercase in the system.

Measure. Prose caps at 62ch. Captions and helper text at 46ch. Past that, a reader loses the line return.

Hierarchy comes from size and weight, not colour. A heading is a heading because it is bigger, not because it is orange.

One h1 per page, and it is the PageHeader title. Do not skip levels — h1 → h2 → h3, never h1 → h3.

Numbers in columns are tabular-nums. Always. Proportional figures in a table make a column of amounts impossible to compare at a glance.

Emphasis is <strong> in ink, not colour, not italic, not caps.

5.7 Do and don't

✅ Use Lora for titles and hero lines only
✅ Keep the italic-terracotta move to one phrase per surface
✅ Set identifiers in mono and quantities in tabular sans
✅ Cap prose at 62ch

Don't

❌ Set body copy in Lora
❌ Use Title Case
❌ Letter-space anything but the eyebrow
❌ Go below 11px
❌ Introduce a fourth typeface — including Inter, Geist Sans, or Cormorant
❌ Use colour as the only signal that text is a heading