Typography — Syhrezz Design System

Font Families

Primary UI Font

Plus Jakarta Sans

Used for: Admin, Director, Supervisor roles
Weights: 300, 400, 500, 600, 700, 800
--font-primary

Sales / Manager Font

Poppins

Used for: Sales, Manager role pages
Weights: 300, 400, 500, 600, 700, 800
--font-sales

Monospace Font

JetBrains Mono

Used for: IDs, dates, numbers, code
Weights: 400, 500
--font-mono

Import via Google Fonts:

https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&family=Poppins:wght@300;400;500;600;700;800&display=swap

Type Scale

--text-5xl · 28px · fw-800 · Hero KPI values

$24.5M

--text-4xl · 24px · fw-800 · Page headings (letter-spacing: -0.8px)

Admin Central Overview

--text-3xl · 18px · fw-800 · Logo text (Accent)

Syhrezz

--text-2xl · 17px · fw-800 · Logo text (primary role)

Syhrezz

--text-xl · 15px · fw-800 · Section titles, card headers

Performance by Region

--text-lg · 14px · fw-600 · Nav items, form inputs, body standard

Navigation Item · Form Field Value

--text-md · 13px · fw-500 · Primary body, buttons, dropdown items

This is the primary body text size used across most UI surfaces.

--text-base · 12px · fw-500 · Secondary body, table cells, form labels

Table cell content, secondary descriptions, helper text

--text-sm · 11px · fw-700 · Badge text, sub-labels

Badge Label · Timestamp Sub-text

--text-xs · 10px · fw-700 · Section labels (UPPERCASE + letter-spacing: 1.5px)

SECTION LABEL · NAVIGATION CATEGORY

Font Weights

Token	Value	Usage
--fw-regular	400	Long-form text, placeholders
--fw-medium	500	Body text, nav items, table cells
--fw-semibold	600	Buttons, form labels, active nav, sub-headings
--fw-bold	700	Badge text, section labels, small caps text
--fw-extrabold	800	Page headings, card titles, logo text, KPI values

Letter Spacing Rules

Context	Letter Spacing	Also Applied
Page headings (h1)	-0.8px	font-size:24px, fw-800
Hero KPI values	-1px	font-size:28px, fw-800
Logo text	-0.5px	font-size:17–18px, fw-800
Section titles	-0.3px	font-size:15px, fw-800
Section labels (UPPERCASE)	1.5px	font-size:10px, fw-700–800, text-transform:uppercase
Form labels (UPPERCASE)	0.5px	font-size:12px, fw-700, text-transform:uppercase
Nav badge	—	font-size:10px, fw-800, padding:2px 8px

Monospace Usage

JetBrains Mono is used for data that benefits from fixed-width rendering: transaction IDs, timestamps, numeric values in tables, and code snippets.

TIMESTAMP 2026-07-24 14:32:01
TRANS ID TXN-2026-001234
CSS VAR --primary: #3B5BDB
AMOUNT $4,500,000

AI Implementation Notes

For AI coding assistants: Always set font-family: var(--font-primary) on the body for primary role pages. Use var(--font-sales) for alternative role pages. Page heading h1 is ALWAYS 24px fw-800 letter-spacing:-0.8px. Section titles inside cards are ALWAYS 15px fw-800 letter-spacing:-0.3px. Form labels are ALWAYS 12px fw-700 UPPERCASE letter-spacing:0.5px. Never use font sizes outside the defined scale.