Typography

The identity relies on contrast between faces, not one retro font everywhere.

Family	Face	Use
reading	Go	Body, docs headings, navigation
display	Archivo 800 (stand-in)	Editorial titles only
system	Pixelify Sans (stand-in)	System cards, window titles — never long prose
mono	Go Mono	Code, API names, URLs in metadata
smallcaps	Go Smallcaps	Small utility labels

note

Archivo and Pixelify Sans are Google-hosted stand-ins for the licensed display and pixel faces. Swap the stacks in design-system/tokens.json when the real files arrive.

Every style is available as a .type-<name> class.

Editorial

Approximately Correct

.type-hero-xl · 120px / 0.95 · 800 — Monumental editorial title, asymmetric, editorial-ink on editorial-aqua. Use clamp(56px, 9vw, 120px) responsively.

Truth or Consequences

.type-hero-l · 80px / 0.95 · 800 — Second line / lead phrase of an editorial hero.

New Mexico

.type-hero-annotation · 44px / 1 · 700 — Smaller offset annotation inside a hero (place names, qualifiers).

A brief talk on address parsers, machine learning, and geocoders.

.type-caption-lg · 22px / 1.3 · 700 — One-sentence hero caption above the bottom rule.

Docs

What is Keywork?

.type-h1 · 48px / 1.15 · 700 — Docs/product page H1. Assertive, less theatrical than hero titles.

Why use Keywork?

.type-h2 · 32px / 1.25 · 700 — Docs section heading.

Routing

.type-h3 · 24px / 1.3 · 700 — Docs subsection heading.

Keywork is a batteries-included library for building serverless web apps.

.type-body · 16px / 1.6 · 400 — Article prose, 65–80ch measure. color-charcoal on color-paper.

Last updated on 15 Oct 2026

.type-body-sm · 14px / 1.5 · 400 — Table cells, captions, secondary prose.

Isomorphic error handling

.type-toc · 14px / 1.5 · 400 — Right-rail table-of-contents links.

Quick Start

.type-nav-lg · 24px / 1.25 · 400 — Level-1 docs nav tiles (Keywork 1.5rem).

Middleware

.type-nav-md · 20px / 1.3 · 400 — Level-2 docs nav tiles (Keywork 1.25rem).

Examples

.type-tab · 16px / 1.25 · 400 — Top-bar tabs and utility buttons.

System

NIRRIUS

.type-system-title · 24px / 1.2 · 400 — Brand name on the system identity card, letter-spaced.

SYSTEM

.type-system-heading · 20px / 1.2 · 400 — Section labels in system cards (SYSTEM, USERS).

Status: Chronically Online

.type-system-body · 16px / 1.4 · 400 — Status lines inside system cards and window bodies.

About Us – SPECTRA

.type-window-title · 14px / 1.2 · 400 — Window titlebar label, taskbar and clock.

Meta

Teffen Ellis

.type-meta · 13px / 1.3 · 700 — Tiny factual metadata over a hairline rule: speaker, org, version.

https://mailwoman.ai

.type-meta-mono · 13px / 1.3 · 700 — URLs, build ids, versions in metadata strips.

Last updated

.type-label-caps · 13px / 1.3 · 400 — Small-caps utility labels.

Code

app.get('/', () => <h1>Hello</h1>)

.type-code · 14.4px / 1.6 · 400 — Code blocks and inline code (Keywork: 90% of body).

RequestRouter<BoundAliases>

.type-code-sm · 13px / 1.5 · 400 — API signatures in tables, terminal output.