utopia-ai
/
HR-ATS-Portal
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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 <noreply@anthropic.com>
pull/29/head
Talha Ahmed 2026-08-27 11:31:19 +05:00
parent abc8bffb81
commit 9df3b46aa9
4 changed files with 41 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/dist/index.html vendored
View File

@ -16,15 +16,16 @@
<meta name="theme-color" content="#004d43" media="(prefers-color-scheme: light)" />
<meta name="theme-color" content="#0e1d1f" media="(prefers-color-scheme: dark)" />
<!-- Utopia brand type: Belleza (main headings) + Inter as the metric-
compatible stand-in for Neue Montreal, which is a licensed face.
If Neue Montreal is installed locally it wins via the CSS stack. -->
<!-- Type: Inter Tight (headings) + Inter as the metric-compatible
stand-in for Neue Montreal, which is a licensed face; if Neue
Montreal is installed locally it wins via the CSS stack.
Belleza is loaded for the wordmark only. -->
<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=Belleza&family=Inter:wght@400;500;600;700;800&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Belleza&family=Inter:wght@400;500;600;700;800&family=Inter+Tight:wght@500;600;700&display=swap" />
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='22' fill='%23004d43'/><g transform='translate(14 32) scale(0.72)'><path d='M100 3.65C97.86 20.99 91.89 43.03 79.48 55.33 76 58.77 71.84 61.46 66.96 62.14 50.4 64.46 41.84 47.5 29.07 42.7 21.85 39.98 14.5 42.02 9.66 47.95 6.54 51.78 4.49 56.35 2.97 61.13 2.41 61.64 0.97 61.66 0 61.31L0 0.13C1.05 0 2.27 0.02 3.09 0.28 14.9 15.86 26.77 30.82 40.15 45.28L60.79 24.7C67.38 18.22 74.41 12.74 82.59 8.51 88.11 5.83 93.64 3.93 100 3.65Z' fill='%23ceff71'/></g></svg>" />
<script type="module" crossorigin src="/assets/index-CxWyqo2y.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-C-yWe0Um.css">
<script type="module" crossorigin src="/assets/index-Nz9mKrAc.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-B2bX4le4.css">
</head>
<body>
<div id="root"></div>

9
frontend/index.html
View File

@ -16,12 +16,13 @@
<meta name="theme-color" content="#004d43" media="(prefers-color-scheme: light)" />
<meta name="theme-color" content="#0e1d1f" media="(prefers-color-scheme: dark)" />
<!-- Utopia brand type: Belleza (main headings) + Inter as the metric-
compatible stand-in for Neue Montreal, which is a licensed face.
If Neue Montreal is installed locally it wins via the CSS stack. -->
<!-- Type: Inter Tight (headings) + Inter as the metric-compatible
stand-in for Neue Montreal, which is a licensed face; if Neue
Montreal is installed locally it wins via the CSS stack.
Belleza is loaded for the wordmark only. -->
<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=Belleza&family=Inter:wght@400;500;600;700;800&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Belleza&family=Inter:wght@400;500;600;700;800&family=Inter+Tight:wght@500;600;700&display=swap" />
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='22' fill='%23004d43'/><g transform='translate(14 32) scale(0.72)'><path d='M100 3.65C97.86 20.99 91.89 43.03 79.48 55.33 76 58.77 71.84 61.46 66.96 62.14 50.4 64.46 41.84 47.5 29.07 42.7 21.85 39.98 14.5 42.02 9.66 47.95 6.54 51.78 4.49 56.35 2.97 61.13 2.41 61.64 0.97 61.66 0 61.31L0 0.13C1.05 0 2.27 0.02 3.09 0.28 14.9 15.86 26.77 30.82 40.15 45.28L60.79 24.7C67.38 18.22 74.41 12.74 82.59 8.51 88.11 5.83 93.64 3.93 100 3.65Z' fill='%23ceff71'/></g></svg>" />
</head>
<body>

8
frontend/src/styles/auth.css
View File

@ -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;
}

46
frontend/src/styles/styles.css
View File

@ -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; }