mirror of
https://github.com/hanzoai/brand.git
synced 2026-10-23 03:05:28 +00:00
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:
+1
-1
@@ -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
@@ -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
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user