1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
/* ============================================================
Pantograph — Typography tokens
------------------------------------------------------------
Two voices. Minimal, like the product:
• Saira Condensed — THE primary face. Display, headings,
UI, body, prose, eyebrows, scale numerals. Tall and
narrow; reads as engraved instrument lettering.
• IBM Plex Mono — code, terminals, the panto CLI, tabular
numerals, anything "machine".
--font-sans / --font-serif / --font-display all resolve to
Saira Condensed, so role tokens and existing components keep
working while the system runs on a single primary face.
============================================================ */
:root {
/* Families — one primary face, one mono */
--font-primary: 'Saira Condensed', 'Arial Narrow', sans-serif;
--font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
/* Aliases — all point at the primary face (legacy role names) */
--font-display: var(--font-primary);
--font-sans: var(--font-primary);
--font-serif: var(--font-primary);
/* Type scale (1.250 major-third, rooted at 16px) */
--text-2xs: 0.6875rem; /* 11px — tick labels, legal */
--text-xs: 0.75rem; /* 12px — captions, eyebrows */
--text-sm: 0.875rem; /* 14px — secondary UI text */
--text-base: 1rem; /* 16px — body */
--text-md: 1.125rem; /* 18px — lead paragraph */
--text-lg: 1.375rem; /* 22px — h4 / card titles */
--text-xl: 1.75rem; /* 28px — h3 */
--text-2xl: 2.25rem; /* 36px — h2 */
--text-3xl: 3rem; /* 48px — h1 */
--text-4xl: 4rem; /* 64px — display */
--text-5xl: 5.5rem; /* 88px — hero display */
/* Weights */
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
/* Line heights */
--leading-tight: 1.05; /* display */
--leading-snug: 1.25; /* headings */
--leading-normal: 1.5; /* UI / sans body */
--leading-relaxed: 1.7; /* serif prose */
--leading-mono: 1.6; /* code */
/* Letter spacing */
--tracking-label: 0.14em; /* ALL-CAPS engraved labels */
--tracking-tight: -0.01em; /* large display */
--tracking-normal: 0;
/* ---- Semantic roles ---- */
--role-display: var(--weight-bold) var(--text-4xl)/var(--leading-tight) var(--font-display);
--role-h1: var(--weight-bold) var(--text-3xl)/var(--leading-snug) var(--font-display);
--role-h2: var(--weight-semibold) var(--text-2xl)/var(--leading-snug) var(--font-sans);
--role-h3: var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-sans);
--role-body: var(--weight-regular) var(--text-base)/var(--leading-normal) var(--font-sans);
--role-prose: var(--weight-regular) var(--text-md)/var(--leading-relaxed) var(--font-primary);
--role-code: var(--weight-regular) var(--text-sm)/var(--leading-mono) var(--font-mono);
--role-label: var(--weight-semibold) var(--text-xs)/1 var(--font-display);
}
|
