feat(canary): web fonts — Archivo Black / Space Grotesk / Departure Mono
System stack was the floor; this is the intended pairing. Three roles, three voices: - Archivo Black (display) — the big confident archive voice. CANARIES, TRAP TRIPPED, DOSSIER NOT FOUND, SPECIMEN ISSUED, NO SPECIMEN HERE. Single weight 900 black grotesque, wide letterforms, built for huge display. Pairs visually with the PARADISE-style pixelated typography in the vector-minimalism reference folder. - Space Grotesk (sans) — speaking voice. Body, section titles, blurbs, button labels, error text. Geometric joints + open apertures read as "designed" where system extra-bold read as "just heavy." Weights 400-700 cover the range; section titles dropped 800→700 since Space Grotesk caps at 700 (no perceptible difference in the design). - Departure Mono (mono) — technical scribblings. SerialBar, timestamps, field labels, strip pills, ID codes, all the spec-sheet micro-text. Its pixelated character is the deliberate echo of image 1 (PARADISE) that ui-monospace can't make. Loaded via Google Fonts <link> in index.html (preconnect + display=swap), no npm dep. ~50KB cold cache; cached-warm thereafter. System sans / system mono remain in the fallback chain at the end of each stack so a CDN miss degrades to the previous design without breaking. $font-display token added to _fonts.scss for the giant headlines; $font-sans and $font-mono updated to lead with the new families. Headlines previously at font-weight: 900 dropped the weight (Archivo Black is single-weight), and letter-spacing/line-height tightened slightly to match the new metrics. Gates green: typecheck + biome + lint:scss + build (419ms; no chunk size delta — fonts load from CDN, not the bundle).
This commit is contained in:
CarterPerez-dev
parent
2f73e37a61
commit
6ef5f68b59
|
|
@ -33,6 +33,19 @@
|
|||
name="author"
|
||||
content=" ©AngelaMos | 2026 | CarterPerez-dev"
|
||||
/>
|
||||
<link
|
||||
rel="preconnect"
|
||||
href="https://fonts.googleapis.com"
|
||||
/>
|
||||
<link
|
||||
rel="preconnect"
|
||||
href="https://fonts.gstatic.com"
|
||||
crossorigin
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Departure+Mono&family=Space+Grotesk:wght@400;500;600;700&display=swap"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
|
|
|||
|
|
@ -37,11 +37,10 @@
|
|||
}
|
||||
|
||||
.headline {
|
||||
font-family: $font-sans;
|
||||
font-weight: 900;
|
||||
font-family: $font-display;
|
||||
font-size: clamp(3rem, 11vw, 8.5rem);
|
||||
letter-spacing: -0.06em;
|
||||
line-height: 0.85;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 0.88;
|
||||
color: $ink;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -113,7 +112,7 @@
|
|||
|
||||
.sectionTitle {
|
||||
font-family: $font-sans;
|
||||
font-weight: 800;
|
||||
font-weight: 700;
|
||||
font-size: clamp(1.5rem, 3vw, 2.25rem);
|
||||
letter-spacing: -0.03em;
|
||||
line-height: $line-height-tight;
|
||||
|
|
@ -455,11 +454,10 @@
|
|||
.resultHeadline {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
font-family: $font-sans;
|
||||
font-weight: 900;
|
||||
font-family: $font-display;
|
||||
font-size: clamp(2rem, 5vw, 3.5rem);
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 0.9;
|
||||
letter-spacing: -0.03em;
|
||||
line-height: 0.92;
|
||||
text-transform: uppercase;
|
||||
color: $ink;
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -71,11 +71,10 @@
|
|||
}
|
||||
|
||||
.headline {
|
||||
font-family: $font-sans;
|
||||
font-weight: 900;
|
||||
font-family: $font-display;
|
||||
font-size: clamp(2.25rem, 8vw, 6rem);
|
||||
letter-spacing: -0.05em;
|
||||
line-height: 0.9;
|
||||
letter-spacing: -0.035em;
|
||||
line-height: 0.92;
|
||||
text-transform: uppercase;
|
||||
color: $ink;
|
||||
margin: 0;
|
||||
|
|
@ -325,7 +324,7 @@
|
|||
|
||||
.deleteTitle {
|
||||
font-family: $font-sans;
|
||||
font-weight: 800;
|
||||
font-weight: 700;
|
||||
font-size: clamp(1.25rem, 3vw, 1.75rem);
|
||||
letter-spacing: -0.02em;
|
||||
text-transform: uppercase;
|
||||
|
|
|
|||
|
|
@ -40,11 +40,10 @@
|
|||
}
|
||||
|
||||
.headline {
|
||||
font-family: $font-sans;
|
||||
font-weight: 900;
|
||||
font-family: $font-display;
|
||||
font-size: clamp(2.25rem, 8vw, 5.5rem);
|
||||
letter-spacing: -0.05em;
|
||||
line-height: 0.9;
|
||||
letter-spacing: -0.035em;
|
||||
line-height: 0.92;
|
||||
text-transform: uppercase;
|
||||
color: $ink;
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -5,8 +5,11 @@
|
|||
|
||||
@use 'tokens' as *;
|
||||
|
||||
$font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto,
|
||||
'Helvetica Neue', Arial, sans-serif;
|
||||
$font-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Inter',
|
||||
'Segoe UI', Roboto, 'Helvetica Neue', Arial, system-ui, sans-serif;
|
||||
|
||||
$font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
|
||||
'Liberation Mono', monospace;
|
||||
$font-display: 'Archivo Black', 'Space Grotesk', -apple-system,
|
||||
BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
|
||||
|
||||
$font-mono: 'Departure Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo,
|
||||
Consolas, 'Liberation Mono', monospace;
|
||||
|
|
|
|||
Loading…
Reference in New Issue