Foundations
Typography
Three upright families on a major third scale. Headings speak with confidence, the interface stays compact, and nothing is ever set in italics.
Typefaces
Sora
Headings and figures
Geometric and wide. Gives titles and large numbers a confident, engineered voice.
- Utility
- font-heading
- Token
- --font-app-heading
- Weights
- 500, 600, 700
Instrument Sans
Interface and reading
A compact grotesque that stays crisp at 14px in dense tables, forms and menus.
- Utility
- font-sans
- Token
- --font-app-sans
- Weights
- 400, 500, 600
JetBrains Mono
Code, hashes and IDs
Unambiguous characters for SHA-256 hashes, record IDs and literal values like null and 0.
- Utility
- font-mono
- Token
- --font-app-mono
- Weights
- 400, 500, 600
// src/pages/_app.tsx: only upright faces are requested
const sans = Instrument_Sans({ subsets: ['latin'], style: ['normal'] })
const heading = Sora({ subsets: ['latin'], style: ['normal'] })
const mono = JetBrains_Mono({ subsets: ['latin'], style: ['normal'] })
// globals.css: tokens resolve inside @theme inline, with a fallback stack
--font-sans: var(--font-app-sans, ui-sans-serif, system-ui, sans-serif);Type scale
text-display56px / 1.04 · -0.035emHero statements. One per page, marketing only.Move with certainty.
text-h140px / 1.1 · -0.025emPage titles in docs and onboarding.Migration overview
text-h232px / 1.2 · -0.02emSection titles and large stat values.Wave 4 is dispatching
text-h324px / 1.3 · -0.015emPortal page titles and dialog titles.Plan revision r14
text-h420px / 1.4 · -0.01emCard groups and sub-sections.Read-back reconciliation
text-body-lg18px / 1.6 · no trackingLead paragraphs under page titles.Every record moves through five ledger stages before it counts.
text-body16px / 1.65 · no trackingLong-form reading in docs and dialogs.Source stores stay read-only. Kramor never writes back to them.
text-ui14px / 1.45 · no trackingThe portal default: tables, forms, menus, buttons.61,430 of 98,750 records dispatched
text-caption12px / 1.4 · 0.005emHints, timestamps, table meta.Verified today at 09:42 UTC
text-overline11px / 1.2 · 0.09emEyebrows above titles. Always uppercase.Wave 4 of 9
Roman typography
Gate 38a is a standing invariant: zero italics anywhere in the interface. Italic faces are never loaded, the browser is told not to fake them, and semantic emphasis renders upright at semibold weight.
Source stores are strictly read-only. A connector that attempts a write throws ReadOnlyConnectorViolationError and the job halts.
“No retry is permitted until a read-back reconciliation step confirms the outcome.”
/* globals.css, Gate 38a: Roman typography */
html { font-synthesis-style: none; }
em, i, cite, dfn, var, address { font-style: normal; }
em { font-weight: 600; }Plan r14 is locked for approval.
Do
Emphasize with weight, color or structure
Semibold for a key phrase, the foreground color for contrast, or a badge when the emphasis is a state.
Plan r14 is locked.
Don't
Reach for italics, faux or real
Slanted text breaks the gate, reads poorly at small sizes and is the first thing reviewers flag in a pull request.
Numbers and data
Tabular figures
Identifiers and literals
op_01HZX8K2M4QW7N3RLiteral values such as null, "" and 0 are always shown in mono so they are never mistaken for words.
Voice and labels
Sentence case everywhere
Buttons, titles and menu items use sentence case. Status values are the one exception and always come from the vocabulary.
State the outcome and its evidence
Write “Verified by read-back at 09:42” rather than “Success”. The evidence is the point.
Name the action on the button
“Approve revision r14” beats “OK”. Destructive buttons repeat the object: “Delete 12 redirects”.
Never overstate
Tested is not certified. Implemented is not tested. Copy follows the status vocabulary exactly.