From 1fe9c41759d4704485d04b11ab8ee71020b8b87c Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Thu, 2 Jul 2026 17:32:47 -0700 Subject: [PATCH] Replace Alumni Sans Pinstripe with Alumni Sans across the type system MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The Pinstripe display face was single-weight, so every `font-weight` on it was inert — the documented h1/h2 weight split never actually rendered. Switch --ks-font-display (and --ks-font-wordmark) to plain Alumni Sans, which honors weight, and set the display scale intentionally: - Display / h1 -> weight 100 (thin hairline hero) - Headline / h2 -> weight 300 via --ks-type-headline-weight (light anchor) - Wordmark 400, body 400, title 500 unchanged Centralize h2 weight: the eight section-title sites that hardcoded 600 now read var(--ks-type-headline-weight), so h2 weight is a single lever. Google Fonts now loads Alumni Sans wght@100;300;...;700 and no longer pulls the Pinstripe family. DESIGN.md, design.json, and the token/CSS comments are updated to match (family, weights, Two-Face and Weight-Inversion rules). Co-Authored-By: Claude Opus 4.8 (1M context) --- .impeccable/design.json | 10 +++--- DESIGN.md | 34 ++++++++++----------- site/layouts/Base.astro | 2 +- site/pages/design-system/explorations.astro | 2 +- site/pages/shader-lab/index.astro | 2 +- site/styles/design-system.css | 2 +- site/styles/designing-kinpaku.css | 18 +++++------ site/styles/docs-kinpaku.css | 4 +-- site/styles/home-kinpaku.css | 4 +-- site/styles/home-rebuild.css | 10 +++--- site/styles/kinpaku-kit.css | 4 +-- site/styles/kinpaku-tokens.css | 25 ++++++++------- site/styles/live-mode-kinpaku.css | 6 ++-- 13 files changed, 61 insertions(+), 62 deletions(-) diff --git a/.impeccable/design.json b/.impeccable/design.json index 0d88ce73f..43478a3eb 100644 --- a/.impeccable/design.json +++ b/.impeccable/design.json @@ -174,15 +174,15 @@ "typographyMeta": { "wordmark": { "displayName": "Wordmark", - "purpose": "IMPECCABLE lockup only. Solid Alumni Sans, not pinstripe." + "purpose": "IMPECCABLE lockup only. Alumni Sans at weight 400." }, "display": { "displayName": "Display", - "purpose": "Hero h1. Alumni Sans Pinstripe, weight 300." + "purpose": "Hero h1. Alumni Sans, weight 100." }, "headline": { "displayName": "Headline", - "purpose": "Section h2. Pinstripe at weight 600, heavier than display." + "purpose": "Section h2. Alumni Sans at weight 300, heavier than display." }, "title": { "displayName": "Title", @@ -360,12 +360,12 @@ { "name": "The Weight-Inversion Rule", "section": "typography", - "body": "Section h2s read heavier (600) than the hero h1 (300). This is deliberate: the hero is elegant and thin so the page can breathe; section anchors carry more weight to ground each block." + "body": "Section h2s read heavier (300) than the hero h1 (100). This is deliberate: the hero is elegant and thin so the page can breathe; section anchors carry more weight to ground each block." }, { "name": "The Two-Face Rule", "section": "typography", - "body": "Display sizes use Alumni Sans Pinstripe. Anything sized below 1.2rem uses Albert Sans. Pinstripe at small sizes loses its identity and reads as a bad rendering." + "body": "Display sizes use Alumni Sans — thin (100) for the h1, heavier (300) for h2s. Anything sized below 1.2rem uses Albert Sans. The thin display cut reads too light at small sizes, so it never carries body or UI text." }, { "name": "The Tracked Labels Are Short Rule", diff --git a/DESIGN.md b/DESIGN.md index 2eef8c7c7..dbeeb12ec 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -104,24 +104,24 @@ colors: typography: wordmark: - # Solid Alumni Sans (token --ks-font-wordmark), the weightable sibling of - # the pinstripe display face. The pinstripe itself is single-weight and - # reads too thin in the small lockup, so the wordmark uses the solid cut. - fontFamily: "Alumni Sans, Alumni Sans Pinstripe, Albert Sans, Arial, sans-serif" + # Alumni Sans (token --ks-font-wordmark), the same face as display, held + # at weight 400 for the small brand lockup where the thin display cut + # would read too light. + fontFamily: "Alumni Sans, Albert Sans, Arial, sans-serif" fontSize: "1.3rem" fontWeight: 400 letterSpacing: "0.15em" lineHeight: 1 display: - fontFamily: "Alumni Sans Pinstripe, Albert Sans, Arial, sans-serif" + fontFamily: "Alumni Sans, Albert Sans, Arial, sans-serif" fontSize: "clamp(3.4rem, 6.5vw, 5.6rem)" - fontWeight: 300 + fontWeight: 100 letterSpacing: "-0.01em" lineHeight: 1.02 headline: - fontFamily: "Alumni Sans Pinstripe, Albert Sans, Arial, sans-serif" + fontFamily: "Alumni Sans, Albert Sans, Arial, sans-serif" fontSize: "clamp(2.6rem, 4vw, 3.4rem)" - fontWeight: 600 + fontWeight: 300 letterSpacing: "0" lineHeight: 1.04 title: @@ -262,7 +262,7 @@ Every class below is a global primitive. Drop it on any element on any page usin - `.ks-section` — page-level section container, 1320px max-width, kit gutters. - `.ks-section-head` — the section header block. - `.ks-section-eyebrow` — small mono eyebrow above the h2 (optional). -- `.ks-section-head h2` — auto-styles any h2 inside `.ks-section-head` to the section title scale (weight 600, kit display family). +- `.ks-section-head h2` — auto-styles any h2 inside `.ks-section-head` to the section title scale (weight 300, kit display family). - `.ks-section-sub` — subhead paragraph below the h2. - `.ks-subsection` — nested grouping inside a section. - `.ks-subsection-label` — small mono label above a subsection's content. @@ -376,17 +376,17 @@ Do not hand-type oklch values or font sizes in page CSS. If a value isn't in the ## 4. Typography: Two faces, weight inversion at the top -**Display font:** Alumni Sans Pinstripe, Albert Sans, Arial, sans-serif (pinstripe horizontal strikes carry the brand at display sizes) +**Display font:** Alumni Sans, Albert Sans, Arial, sans-serif (a thin hairline cut carries the brand at display sizes) **Body and UI font:** Albert Sans, Avenir Next, Helvetica Neue, Arial, system-ui, sans-serif **Mono font:** SFMono-Regular, Roboto Mono, Consolas, monospace -The voice is geometric and restrained. The pinstripe display face is reserved for the hero h1 and section h2s; the brand wordmark uses its solid sibling (Alumni Sans). Everything else (body, UI labels, controls, code) uses Albert Sans. The faces pair cleanly because they share humanist proportions without fighting for attention. +The voice is geometric and restrained. The Alumni Sans display face is reserved for the hero h1 and section h2s; the brand wordmark uses the same face at a heavier weight. Everything else (body, UI labels, controls, code) uses Albert Sans. The faces pair cleanly because they share humanist proportions without fighting for attention. ### Hierarchy -- **Wordmark**: solid Alumni Sans (`--ks-font-wordmark`), weight 400, uppercase, `1.3rem`, letter-spacing `0.15em`. Brand lockup only. The pinstripe sibling reads too thin at lockup size, so the wordmark uses the weightable cut. -- **Display · h1**: Alumni Sans Pinstripe, `clamp(3.4rem, 6.5vw, 5.6rem)`, **weight 300**, line-height 1.02, letter-spacing `-0.01em`. Hero and major statements. -- **Headline · h2**: Alumni Sans Pinstripe, `clamp(2.6rem, 4vw, 3.4rem)`, **weight 600**, line-height 1.04. Section titles. +- **Wordmark**: Alumni Sans (`--ks-font-wordmark`), weight 400, uppercase, `1.3rem`, letter-spacing `0.15em`. Brand lockup only. The thin display cut reads too light at lockup size, so the wordmark holds weight 400. +- **Display · h1**: Alumni Sans, `clamp(3.4rem, 6.5vw, 5.6rem)`, **weight 100**, line-height 1.02, letter-spacing `-0.01em`. Hero and major statements. +- **Headline · h2**: Alumni Sans, `clamp(2.6rem, 4vw, 3.4rem)`, **weight 300**, line-height 1.04. Section titles. - **Title · h3**: Albert Sans, `1.18rem`, weight 500, line-height 1.35. Component and panel headings. - **Body**: Albert Sans, `1.02rem`, weight 400, line-height 1.8. Long copy on dark surfaces needs air. - **Eyebrow**: Mono, `0.7rem`, weight 500, uppercase, letter-spacing `0.18em`. Small markers above titles. @@ -394,9 +394,9 @@ The voice is geometric and restrained. The pinstripe display face is reserved fo ### Typography Rules -**The Weight-Inversion Rule.** Section h2s read heavier (600) than the hero h1 (300). This is deliberate: the hero is elegant and thin so the page can breathe; section anchors carry more weight to ground each block. Do not normalize the two weights. +**The Weight-Inversion Rule.** Section h2s read heavier (300) than the hero h1 (100). This is deliberate: the hero is elegant and thin so the page can breathe; section anchors carry more weight to ground each block. Do not normalize the two weights. -**The Two-Face Rule.** Display sizes use Alumni Sans Pinstripe. Anything sized below `1.2rem` uses Albert Sans. Pinstripe at small sizes loses its identity and reads as a bad rendering. +**The Two-Face Rule.** Display sizes use Alumni Sans — thin (100) for the h1, heavier (300) for h2s. Anything sized below `1.2rem` uses Albert Sans. The thin display cut reads too light at small sizes, so it never carries body or UI text. **Tracked Labels Are Short Rule.** Tracked uppercase labels are for short system markers. Do not write full sentences in tracked caps. @@ -446,7 +446,7 @@ The command table uses dark category cells. Kinpaku covers Create, Refine, and S ### DESIGN.md Panel -The DESIGN.md visualization must show kinpaku as the primary color, patina as the secondary color, Alumni Sans Pinstripe and Albert Sans as the display and body families, and dark component samples. Magenta is not representative of the current system. +The DESIGN.md visualization must show kinpaku as the primary color, patina as the secondary color, Alumni Sans and Albert Sans as the display and body families, and dark component samples. Magenta is not representative of the current system. ### Dividers and Material Accents diff --git a/site/layouts/Base.astro b/site/layouts/Base.astro index 9a3bf0f83..0da63117e 100644 --- a/site/layouts/Base.astro +++ b/site/layouts/Base.astro @@ -103,7 +103,7 @@ const resolvedOgDescription = ogDescription || description; - + diff --git a/site/pages/design-system/explorations.astro b/site/pages/design-system/explorations.astro index d1b21fbcd..fcc8db8b0 100644 --- a/site/pages/design-system/explorations.astro +++ b/site/pages/design-system/explorations.astro @@ -256,7 +256,7 @@ const mockupCandidates = listCandidates('mockups'); .logo-dir-name { margin: 0 0 8px; font-family: var(--ks-font-display); - font-weight: 600; + font-weight: var(--ks-type-headline-weight); font-size: 1.4rem; color: var(--ks-champagne); } diff --git a/site/pages/shader-lab/index.astro b/site/pages/shader-lab/index.astro index 7c4d3eed3..eafaed4c2 100644 --- a/site/pages/shader-lab/index.astro +++ b/site/pages/shader-lab/index.astro @@ -309,7 +309,7 @@ const FIXTURES = [ .hero{position:relative;width:100%;height:100%;min-height:340px;overflow:hidden;display:grid;align-items:center} .hero-art{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,oklch(7% 0.006 95/0.9) 0%,oklch(7% 0.006 95/0.5) 8%,transparent 18%),url('/assets/neo-kinpaku/candidates/finalists/m-01-v2-01.png') center/cover no-repeat;filter:saturate(1.2) contrast(1.08)} .hero-inner{position:relative;z-index:1;padding:34px;display:grid;gap:18px;max-width:520px} - .hero-title{margin:0;color:oklch(84% 0.035 82);font-family:"Alumni Sans Pinstripe","Albert Sans",Arial,sans-serif;font-weight:300;font-size:2.9rem;line-height:1.02;letter-spacing:-0.01em} + .hero-title{margin:0;color:oklch(84% 0.035 82);font-family:"Alumni Sans","Albert Sans",Arial,sans-serif;font-weight:100;font-size:2.9rem;line-height:1.02;letter-spacing:-0.01em} .hero-copy{margin:0;color:oklch(81% 0.03 82);font-size:0.92rem;line-height:1.55;font-weight:300;max-width:40ch} .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:2px} .hero-cta a{min-height:46px;display:inline-flex;align-items:center;gap:10px;padding:0 22px;border-radius:2px;font-size:0.9rem;font-weight:500;border:1px solid transparent;text-decoration:none} diff --git a/site/styles/design-system.css b/site/styles/design-system.css index f46b4c966..5fea74177 100644 --- a/site/styles/design-system.css +++ b/site/styles/design-system.css @@ -180,7 +180,7 @@ display: block; color: var(--ks-kinpaku); font-family: var(--ks-font-display); - font-weight: 300; + font-weight: 100; font-size: clamp(3.2rem, 7.2vw, 5.6rem); line-height: 1; letter-spacing: 0.22em; diff --git a/site/styles/designing-kinpaku.css b/site/styles/designing-kinpaku.css index 46297ec5d..f9ae6323c 100644 --- a/site/styles/designing-kinpaku.css +++ b/site/styles/designing-kinpaku.css @@ -4,7 +4,7 @@ Overrides sub-pages.css + docs-visuals.css for the long-form "Designing with Impeccable" walkthrough. The existing markup is unchanged; this file restyles every block to the kinpaku brand: dark lacquer surface, gold + - verdigris accents, Alumni Sans Pinstripe display, Albert Sans body. + verdigris accents, Alumni Sans display, Albert Sans body. Structure of this file mirrors the page itself: 1. Page scope + base @@ -198,7 +198,7 @@ text-wrap: balance; max-width: none; /* "Impeccable" at the display token's 3.4rem minimum is 270px+ in the - narrow Pinstripe face and overflows a 360px viewport. Allow break-word + narrow Alumni Sans face and overflows a 360px viewport. Allow break-word as a safety net so the title never blows out of its container. */ word-break: break-word; overflow-wrap: anywhere; @@ -287,8 +287,8 @@ .designing-kinpaku .designing-loop-name { color: var(--ks-champagne); - /* Pinstripe is single-weight and reads broken at ~1.5–2rem; wordmark - carries real stroke weight at compass-label scale (cf. iterate-name). */ + /* The thin display cut reads too light at compass-label scale (~1.5–2rem); + the wordmark token is the same face at weight 400+ (cf. iterate-name). */ font-family: var(--ks-font-wordmark); font-weight: 600; font-size: clamp(1.5rem, 2.2vw, 2rem); @@ -806,9 +806,9 @@ color: var(--ks-kinpaku); } -/* Subsection h3s use Albert Sans, not the Pinstripe display face. DESIGN.md +/* Subsection h3s use Albert Sans, not the Alumni Sans display face. DESIGN.md reserves the display face for the hero h1 and section h2s; at h3 sizes the - thin Pinstripe loses its identity and reads as a broken render. */ + thin display cut loses presence and reads too light. */ .designing-kinpaku .designing-iterate-name { color: var(--ks-champagne); font-family: var(--ks-font); @@ -1427,8 +1427,8 @@ font-weight: 600; } -/* The brand mock title used the pinstripe display face at ~1.6rem, which reads - broken/washed at that size (Two-Face rule); use the clean body face. */ +/* The brand mock title used the Alumni Sans display face at ~1.6rem, where the + thin cut reads too light at that size (Two-Face rule); use the clean body face. */ .designing-kinpaku .designing-lane-mock-title { font-family: var(--ks-font); font-weight: 500; @@ -1612,7 +1612,7 @@ .designing-kinpaku .designing-cta-card-title { color: var(--ks-champagne); font-family: var(--ks-font-display); - font-weight: 300; + font-weight: 100; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.1; margin: 0; diff --git a/site/styles/docs-kinpaku.css b/site/styles/docs-kinpaku.css index 19779ec79..d734f8763 100644 --- a/site/styles/docs-kinpaku.css +++ b/site/styles/docs-kinpaku.css @@ -632,7 +632,7 @@ html.light .docs-kinpaku { .docs-kinpaku .docs-live-target-title { font-family: var(--ks-font-display); font-style: normal; - font-weight: 600; + font-weight: var(--ks-type-headline-weight); font-size: 1.4rem; line-height: 1.15; color: var(--ks-champagne); @@ -1200,7 +1200,7 @@ html.light .docs-kinpaku { } /* h2/h3 follow the DESIGN.md type scale exactly: - - h2 (Headline): Alumni Sans Pinstripe, clamp 2.6-3.4rem, weight 600 + - h2 (Headline): Alumni Sans, clamp 2.6-3.4rem, weight 600 - h3 (Title): Albert Sans, 1.18rem, weight 500 - h4: Albert Sans, 1rem, weight 600 (utility) */ diff --git a/site/styles/home-kinpaku.css b/site/styles/home-kinpaku.css index 4fe6d71af..896b99970 100644 --- a/site/styles/home-kinpaku.css +++ b/site/styles/home-kinpaku.css @@ -200,7 +200,7 @@ .home-kinpaku .section-title { font-family: var(--ks-font-display); - font-weight: 600; + font-weight: var(--ks-type-headline-weight); font-size: clamp(2.6rem, 4vw, 3.4rem); line-height: 1.04; color: var(--ks-champagne); @@ -1020,7 +1020,7 @@ color: var(--ks-kinpaku); font-family: var(--ks-font-display); font-size: 4.2rem; - font-weight: 300; + font-weight: 100; letter-spacing: 0; } diff --git a/site/styles/home-rebuild.css b/site/styles/home-rebuild.css index b58fb5934..1484c44d4 100644 --- a/site/styles/home-rebuild.css +++ b/site/styles/home-rebuild.css @@ -92,7 +92,7 @@ margin: 0; color: var(--ks-champagne); font-family: var(--ks-font-display); - font-weight: 300; + font-weight: 100; font-size: clamp(3.4rem, 6.5vw, 5.6rem); line-height: 1.02; letter-spacing: -0.01em; @@ -265,7 +265,7 @@ forced the grid track wider than the viewport. Drop it on mobile. */ .hero-rebuild-container { padding-left: 0; padding-right: 0; } /* Title keeps its design-system clamp (floors at 3.4rem ≈ 54px here): the - Pinstripe display face is condensed, so "interfaces" stays well within a + Alumni Sans display face is narrow, so "interfaces" stays well within a 320px+ viewport. No mobile shrink — at 54px against 16.8px body it holds a ~3.2× hero hierarchy; shrinking it made the heading read smaller than body. */ .hero-rebuild-actions { flex-direction: column; align-items: stretch; } @@ -305,7 +305,7 @@ margin: 0; color: var(--ks-champagne); font-family: var(--ks-font-display); - font-weight: 600; + font-weight: var(--ks-type-headline-weight); font-size: clamp(2.6rem, 4vw, 3.4rem); line-height: 1.04; letter-spacing: -0.005em; @@ -649,7 +649,7 @@ margin: 0; color: var(--card-fg-strong); font-family: var(--ks-font-display); - font-weight: 600; + font-weight: var(--ks-type-headline-weight); font-size: clamp(2.6rem, 4vw, 3.4rem); line-height: 1.04; } @@ -2017,7 +2017,7 @@ svg.downloads-rebuild-tab-logo { .live-how-title { margin: 0; font-family: var(--ks-font-display); - font-weight: 600; + font-weight: var(--ks-type-headline-weight); font-size: 1.18rem; color: var(--ks-champagne); } diff --git a/site/styles/kinpaku-kit.css b/site/styles/kinpaku-kit.css index 050e6c2d9..a65db442a 100644 --- a/site/styles/kinpaku-kit.css +++ b/site/styles/kinpaku-kit.css @@ -82,7 +82,7 @@ color: var(--ks-champagne); font-family: var(--ks-font-display); font-size: clamp(2.2rem, 3.6vw, 3rem); - font-weight: 600; + font-weight: var(--ks-type-headline-weight); line-height: 1.06; letter-spacing: -0.005em; } @@ -1007,7 +1007,7 @@ } /* The legacy display face was italic serif; the kinpaku display face - (Alumni Sans Pinstripe) reads wrong synthesized-italic, so reset it on + (Alumni Sans) renders wrong as synthesized italic, so reset it on the headings the base stylesheet set to italic. */ .kinpaku-surface .sub-page-title, .kinpaku-surface .prose h1, diff --git a/site/styles/kinpaku-tokens.css b/site/styles/kinpaku-tokens.css index e61e4fb0b..18993ef40 100644 --- a/site/styles/kinpaku-tokens.css +++ b/site/styles/kinpaku-tokens.css @@ -82,20 +82,19 @@ --ks-code-cmd: var(--ks-kinpaku); /* code that's a command link */ /* ============================================================ - Typography — three faces. - - --ks-font-display: Alumni Sans Pinstripe. Pinstripe horizontal - strikes feel futuristic and editorial at display size; used for - the hero h1 and section h2s. Single-weight — font-weight is inert. - - --ks-font-wordmark: solid Alumni Sans, the weightable sibling of - the pinstripe. Same letterforms, but carries real weight in the - brand lockup where the hairline pinstripe reads too thin. + Typography — two faces. + - --ks-font-display: Alumni Sans. A weightable humanist grotesque; + the hero h1 runs at a thin hairline (100) for elegance, section + h2s at a heavier cut (300) to anchor each block. + - --ks-font-wordmark: Alumni Sans, same face as display, held at + weight 400 for the brand lockup. - --ks-font: Albert Sans. Quiet geometric humanist, used for body - and UI text. Pairs cleanly with the pinstripe display without + and UI text. Pairs cleanly with the Alumni Sans display without competing. All loaded via Base.astro's Google Fonts link. ============================================================ */ - --ks-font-display: "Alumni Sans Pinstripe", "Albert Sans", Arial, sans-serif; - --ks-font-wordmark: "Alumni Sans", "Alumni Sans Pinstripe", "Albert Sans", Arial, sans-serif; + --ks-font-display: "Alumni Sans", "Albert Sans", Arial, sans-serif; + --ks-font-wordmark: "Alumni Sans", "Albert Sans", Arial, sans-serif; --ks-font: "Albert Sans", "Avenir Next", "Helvetica Neue", Arial, system-ui, sans-serif; --ks-mono: "SFMono-Regular", "Roboto Mono", "JetBrains Mono", Consolas, monospace; @@ -103,19 +102,19 @@ Type scale. These are the actual sizes the homepage ships with — new pages should read them via var(...) rather than hand-typing. The display vs headline weight split is deliberate: the hero h1 - reads thin (300) for elegance; section h2s read heavier (600) to + reads thin (100) for elegance; section h2s read heavier (300) to anchor each block. Section h2s look heavier than the h1 on purpose. ============================================================ */ /* Display — hero h1. */ --ks-type-display-size: clamp(3.4rem, 6.5vw, 5.6rem); - --ks-type-display-weight: 300; + --ks-type-display-weight: 100; --ks-type-display-line: 1.02; --ks-type-display-track: -0.01em; /* Headline — section h2. Heavier than display. */ --ks-type-headline-size: clamp(2.6rem, 4vw, 3.4rem); - --ks-type-headline-weight: 600; + --ks-type-headline-weight: 300; --ks-type-headline-line: 1.04; /* Title — card and panel headings (h3). */ diff --git a/site/styles/live-mode-kinpaku.css b/site/styles/live-mode-kinpaku.css index 5052cf8f9..0c2c42e45 100644 --- a/site/styles/live-mode-kinpaku.css +++ b/site/styles/live-mode-kinpaku.css @@ -338,7 +338,7 @@ .live-mode-kinpaku .live-demo-card--v1 h3 { font-family: var(--ks-font-display); font-style: normal; - font-weight: 600; + font-weight: var(--ks-type-headline-weight); color: var(--ks-champagne); } @@ -548,8 +548,8 @@ background: var(--ks-lacquer-raised); border: 1.5px solid var(--ks-kinpaku); color: var(--ks-champagne); - /* Pinstripe display font loses legibility below ~1.2rem (Two-Face Rule). - The mock renders at 12px, so force the body face here. */ + /* The thin Alumni Sans display cut loses legibility below ~1.2rem (Two-Face + Rule). The mock renders at 12px, so force the body face here. */ font-family: var(--ks-font); font-style: normal; font-weight: 500;