feat: tight app-first type scale as the Hanzo default (14px base)

@hanzo/brand is the ONE dynamic brand-settings source every surface reads. Retune
the default --font-size-* scale (styles/variables.css + typography.ts, kept in
mirror) from the roomy marketing scale to the compact developer-app register
(linear.app/vercel): base 16→14px, nav 13px, labels 11px, display sizes tightened.
Monochrome palette + white-label registry unchanged. A brand/tenant still overrides
any --font-size-* on :root to retune density on demand. 19/19 tests pass.
This commit is contained in:
2026-07-24 12:45:27 -07:00
parent 5491d3e573
commit dbd39de735
3 changed files with 35 additions and 28 deletions
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@hanzo/brand",
"version": "1.4.2",
"version": "1.4.3",
"description": "Official brand assets and design system for Hanzo AI",
"main": "dist/index.js",
"module": "dist/index.mjs",
+16 -13
View File
@@ -12,20 +12,23 @@ export const typography = {
},
// Font sizes
// TIGHT app-first scale (mirrors styles/variables.css --font-size-*): the compact
// developer-app register (linear.app / vercel.com). Base 14px, nav 13px, labels
// 11px. Line-heights kept snug for density. This is the Hanzo default everywhere.
fontSize: {
xs: ['0.75rem', { lineHeight: '1rem' }],
sm: ['0.875rem', { lineHeight: '1.25rem' }],
base: ['1rem', { lineHeight: '1.5rem' }],
lg: ['1.125rem', { lineHeight: '1.75rem' }],
xl: ['1.25rem', { lineHeight: '1.75rem' }],
'2xl': ['1.5rem', { lineHeight: '2rem' }],
'3xl': ['1.875rem', { lineHeight: '2.25rem' }],
'4xl': ['2.25rem', { lineHeight: '2.5rem' }],
'5xl': ['3rem', { lineHeight: '1' }],
'6xl': ['3.75rem', { lineHeight: '1' }],
'7xl': ['4.5rem', { lineHeight: '1' }],
'8xl': ['6rem', { lineHeight: '1' }],
'9xl': ['8rem', { lineHeight: '1' }],
xs: ['0.6875rem', { lineHeight: '1rem' }], // 11px
sm: ['0.8125rem', { lineHeight: '1.15rem' }], // 13px
base: ['0.875rem', { lineHeight: '1.35rem' }], // 14px
lg: ['0.9375rem', { lineHeight: '1.4rem' }], // 15px
xl: ['1.0625rem', { lineHeight: '1.55rem' }], // 17px
'2xl': ['1.3125rem', { lineHeight: '1.7rem' }], // 21px
'3xl': ['1.625rem', { lineHeight: '1.95rem' }], // 26px
'4xl': ['2rem', { lineHeight: '2.25rem' }], // 32px
'5xl': ['2.5rem', { lineHeight: '1.05' }], // 40px
'6xl': ['3.25rem', { lineHeight: '1.03' }], // 52px
'7xl': ['4rem', { lineHeight: '1' }], // 64px
'8xl': ['5.25rem', { lineHeight: '1' }], // 84px
'9xl': ['7rem', { lineHeight: '1' }], // 112px
},
// Font weights
+18 -14
View File
@@ -137,20 +137,24 @@
--font-sans: 'Geist Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'Geist Mono', Monaco, monospace;
/* ===== Font Size scale (mirrors typography.ts `fontSize`) ===== */
--font-size-xs: 0.75rem; /* 12px */
--font-size-sm: 0.875rem; /* 14px */
--font-size-base: 1rem; /* 16px */
--font-size-lg: 1.125rem; /* 18px */
--font-size-xl: 1.25rem; /* 20px */
--font-size-2xl: 1.5rem; /* 24px */
--font-size-3xl: 1.875rem; /* 30px */
--font-size-4xl: 2.25rem; /* 36px */
--font-size-5xl: 3rem; /* 48px */
--font-size-6xl: 3.75rem; /* 60px */
--font-size-7xl: 4.5rem; /* 72px */
--font-size-8xl: 6rem; /* 96px */
--font-size-9xl: 8rem; /* 128px */
/* ===== Font Size scale (mirrors typography.ts `fontSize`) =====
TIGHT app-first default — the compact developer-app register (linear.app /
vercel.com), NOT a roomy marketing scale. Base is 14px, nav 13px, labels 11px.
Every surface that imports @hanzo/brand inherits this; a brand/tenant can
override any --font-size-* on :root to retune density on demand. */
--font-size-xs: 0.6875rem; /* 11px — eyebrows / section labels */
--font-size-sm: 0.8125rem; /* 13px — nav labels, dense body */
--font-size-base: 0.875rem; /* 14px — base app text (was 16px) */
--font-size-lg: 0.9375rem; /* 15px */
--font-size-xl: 1.0625rem; /* 17px */
--font-size-2xl: 1.3125rem; /* 21px */
--font-size-3xl: 1.625rem; /* 26px */
--font-size-4xl: 2rem; /* 32px */
--font-size-5xl: 2.5rem; /* 40px */
--font-size-6xl: 3.25rem; /* 52px */
--font-size-7xl: 4rem; /* 64px */
--font-size-8xl: 5.25rem; /* 84px */
--font-size-9xl: 7rem; /* 112px */
/* ===== Z-index ladder (mirrors tokens.ts `zIndex`) ===== */
--z-0: 0;