From 9df3b46aa95f23942520690a24754977e15262d0 Mon Sep 17 00:00:00 2001 From: Talha Ahmed Date: Thu, 27 Aug 2026 11:31:19 +0500 Subject: [PATCH] Typography overhaul: Inter Tight display headings, Belleza confined to wordmark Belleza (single-weight decorative face) read thin and informal against the dense data UI. Headings now use Inter Tight semibold with negative tracking; hero metrics join the display face at proper optical sizes. Co-Authored-By: Claude Fable 5 --- frontend/dist/index.html | 13 +++++----- frontend/index.html | 9 ++++--- frontend/src/styles/auth.css | 8 +++--- frontend/src/styles/styles.css | 46 ++++++++++++++++++---------------- 4 files changed, 41 insertions(+), 35 deletions(-) diff --git a/frontend/dist/index.html b/frontend/dist/index.html index d8621ee..0aa6337 100644 --- a/frontend/dist/index.html +++ b/frontend/dist/index.html @@ -16,15 +16,16 @@ - + - + - - + +
diff --git a/frontend/index.html b/frontend/index.html index f425b9e..7ce4819 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -16,12 +16,13 @@ - + - + diff --git a/frontend/src/styles/auth.css b/frontend/src/styles/auth.css index 0f550e6..6b644e3 100644 --- a/frontend/src/styles/auth.css +++ b/frontend/src/styles/auth.css @@ -52,9 +52,9 @@ .auth-aside-copy h1 { font-family: var(--font-display); font-size: clamp(32px, 4vw, 44px); - line-height: 1.15; - font-weight: 400; - letter-spacing: -0.02em; + line-height: 1.12; + font-weight: 600; + letter-spacing: -0.025em; margin: 0 0 14px; color: #fff; } @@ -115,7 +115,7 @@ } .auth-brand .brand-name { - font-family: var(--font-display); + font-family: var(--font-brand); font-weight: 400; letter-spacing: 0.2px; } diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css index 740557f..76cd39b 100644 --- a/frontend/src/styles/styles.css +++ b/frontend/src/styles/styles.css @@ -7,8 +7,9 @@ Secondary #25e9a5 mint · #8e92ff periwinkle Neutral #ffffff · #000000 Typography - Display / main headings ....... Belleza + Display / main headings ....... Inter Tight (semibold, tight tracking) UI, body & sub-headings ....... Neue Montreal (Inter fallback) + Wordmark only ................. Belleza Theme model Light — white/mint surfaces, deep green as the action colour. @@ -84,7 +85,8 @@ --topbar-h: 64px; --font: 'Neue Montreal', 'PP Neue Montreal', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; - --font-display: 'Belleza', 'Neue Montreal', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + --font-display: 'Inter Tight', 'Neue Montreal', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + --font-brand: 'Belleza', 'Inter Tight', 'Inter', sans-serif; --mono: 'SF Mono', ui-monospace, 'Cascadia Code', Menlo, monospace; /* Type scale — 9 steps that the 20-size census collapses onto. @@ -97,9 +99,9 @@ --fs-lg: 18px; /* section headings, empty states */ --fs-xl: 22px; /* modal titles */ --fs-2xl: 25px; /* profile hero name, mobile page title */ - --fs-3xl: 30px; /* page title (Belleza) */ + --fs-3xl: 30px; /* page title (Inter Tight) */ - --lh-display: 1.15; /* Belleza display headings */ + --lh-display: 1.15; /* display headings */ --lh-heading: 1.25; /* h2–h6, card titles */ --lh-body: 1.5; /* running copy */ --lh-label: 1.35; /* eyebrows, form labels, table headers */ @@ -261,30 +263,32 @@ img, svg, video, canvas { max-width: 100%; } /* ============================================================ BRAND TYPOGRAPHY - Guideline: "main heading always in main typeface belleza / - content & sub-heading always in neue montreal". - Belleza is a display face — reserved for page-level and modal - titles, hero numbers and the wordmark. Everything structural - (labels, tables, controls) stays in the UI face for legibility. + Display face is Inter Tight — a headline grotesque that shares + Inter's skeleton, so titles read as the same voice as the UI, + only set semibold with negative tracking. Belleza (the brand + guideline's decorative face) is confined to the wordmark: at + text sizes and weight 400 it read thin and informal against a + dense data UI. Everything structural (labels, tables, controls) + stays in the UI face for legibility. ============================================================ */ .page-title, .modal-head h2, -.brand-name, .ph-name, .ai-hero h2, .empty-state h3 { font-family: var(--font-display); - font-weight: 400; - letter-spacing: 0; + font-weight: 600; + letter-spacing: -0.015em; } -.page-title { font-size: var(--fs-3xl); line-height: var(--lh-display); } -.page-title-sm { font-size: var(--fs-xl); } /* embedded sub-page titles (h2) */ +.page-title { font-size: var(--fs-3xl); line-height: var(--lh-display); letter-spacing: -0.02em; } +.page-title-sm { font-size: var(--fs-xl); letter-spacing: -0.015em; } /* embedded sub-page titles (h2) */ .modal-head h2 { font-size: var(--fs-xl); } .ph-name { font-size: var(--fs-2xl); } -.brand-name { font-size: var(--fs-lg); font-weight: 400; letter-spacing: .2px; } +.brand-name { font-family: var(--font-brand); font-size: var(--fs-lg); font-weight: 400; letter-spacing: .2px; } -/* Metrics read as data, not prose — keep them in the UI face, - tabular-lining so digits don't jitter as values update. */ +/* Metrics read as data — hero numbers use the display face (Inter + Tight keeps Inter's figures), everything else stays in the UI face; + all tabular-lining so digits don't jitter as values update. */ .kpi-value, .stat-mini-val, .ats-ring .ats-num, .cell-mono, .mono, table.data td, .k-count, .nav-badge { font-variant-numeric: tabular-nums; @@ -295,7 +299,7 @@ table.data td, .k-count, .nav-badge { bolder than the styled card titles beside them). Component rules (.page-title, .modal-head h2, .card-head h3, …) win by specificity. */ h1, h2, h3, h4, h5, h6 { line-height: var(--lh-heading); } -h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-3xl); line-height: var(--lh-display); } +h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-3xl); line-height: var(--lh-display); letter-spacing: -0.02em; } h2 { font-size: var(--fs-xl); font-weight: 600; } h3 { font-size: var(--fs-md); font-weight: 600; } h4 { font-size: var(--fs-base); font-weight: 600; } @@ -583,7 +587,7 @@ table.data thead th, .rbac-matrix th, .cal-dow, .info-item .il, .kpi-label { font-size: var(--fs-sm); color: var(--text-2); font-weight: 500; } .kpi-icn { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; } .kpi-icn svg { width: 20px; height: 20px; } -.kpi-value { font-size: 28px; font-weight: 700; letter-spacing: -1px; line-height: 1; } +.kpi-value { font-family: var(--font-display); font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; } .kpi-foot { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: var(--fs-sm); } .trend { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; padding: 2px 7px; border-radius: var(--radius-sm); font-size: var(--fs-xs); } .trend svg { width: 13px; height: 13px; } @@ -830,7 +834,7 @@ canvas { width: 100%; max-width: 100%; display: block; } .more-count { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-sunken); color: var(--text-2); font-size: 11px; font-weight: 700; border: 2px solid var(--bg-elev); margin-left: -8px; } .stat-mini { display: flex; flex-direction: column; gap: 4px; } -.stat-mini-val { font-size: 22px; font-weight: 700; letter-spacing: -.5px; } +.stat-mini-val { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.015em; } .stat-mini-lbl { font-size: var(--fs-sm); color: var(--text-3); } .divider { height: 1px; background: var(--border); margin: 16px 0; } @@ -1055,7 +1059,7 @@ canvas { width: 100%; max-width: 100%; display: block; } background: conic-gradient(var(--c) calc(var(--pct)*1%), var(--bg-sunken) 0); } .ats-ring::after { content: ''; position: absolute; inset: 12px; border-radius: 50%; background: var(--bg-elev); } .ats-ring .ats-val { position: relative; z-index: 1; text-align: center; } -.ats-ring .ats-num { font-size: 30px; font-weight: 800; letter-spacing: -1px; line-height: 1; } +.ats-ring .ats-num { font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; } .ats-ring .ats-lbl { font-size: 11px; color: var(--text-3); font-weight: 600; } .skill-pill { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 600; padding: 4px 10px; border-radius: var(--radius-sm); } .skill-pill svg { width: 12px; height: 12px; }