From 6ef5f68b59433762c0c4e6554386d9f78dc72110 Mon Sep 17 00:00:00 2001 From: CarterPerez-dev Date: Sun, 17 May 2026 17:27:35 -0400 Subject: [PATCH] =?UTF-8?q?feat(canary):=20web=20fonts=20=E2=80=94=20Archi?= =?UTF-8?q?vo=20Black=20/=20Space=20Grotesk=20/=20Departure=20Mono?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 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). --- .../canary-token-generator/frontend/index.html | 13 +++++++++++++ .../src/pages/landing/landing.module.scss | 16 +++++++--------- .../frontend/src/pages/manage/manage.module.scss | 9 ++++----- .../src/pages/notfound/notfound.module.scss | 7 +++---- .../frontend/src/styles/_fonts.scss | 11 +++++++---- 5 files changed, 34 insertions(+), 22 deletions(-) diff --git a/PROJECTS/beginner/canary-token-generator/frontend/index.html b/PROJECTS/beginner/canary-token-generator/frontend/index.html index d16a6010..7f69fb26 100644 --- a/PROJECTS/beginner/canary-token-generator/frontend/index.html +++ b/PROJECTS/beginner/canary-token-generator/frontend/index.html @@ -33,6 +33,19 @@ name="author" content=" ©AngelaMos | 2026 | CarterPerez-dev" /> + + +
diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/pages/landing/landing.module.scss b/PROJECTS/beginner/canary-token-generator/frontend/src/pages/landing/landing.module.scss index 198696e8..83f9619e 100644 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/pages/landing/landing.module.scss +++ b/PROJECTS/beginner/canary-token-generator/frontend/src/pages/landing/landing.module.scss @@ -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; diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/pages/manage/manage.module.scss b/PROJECTS/beginner/canary-token-generator/frontend/src/pages/manage/manage.module.scss index c3be5aba..5442f9c7 100644 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/pages/manage/manage.module.scss +++ b/PROJECTS/beginner/canary-token-generator/frontend/src/pages/manage/manage.module.scss @@ -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; diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/pages/notfound/notfound.module.scss b/PROJECTS/beginner/canary-token-generator/frontend/src/pages/notfound/notfound.module.scss index efadea02..967a86c0 100644 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/pages/notfound/notfound.module.scss +++ b/PROJECTS/beginner/canary-token-generator/frontend/src/pages/notfound/notfound.module.scss @@ -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; diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/styles/_fonts.scss b/PROJECTS/beginner/canary-token-generator/frontend/src/styles/_fonts.scss index 268e9b70..e83b1f0b 100644 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/styles/_fonts.scss +++ b/PROJECTS/beginner/canary-token-generator/frontend/src/styles/_fonts.scss @@ -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;