/** * Design System - Typography Tokens * * 字体大小和样式规范定义 */ /** * Serif Display 系列 (Domine/Noto Serif) * 用于大标题、引用等展示性文本 */ export const serifDisplay = { giant: { bold: { fontSize: '100px', lineHeight: '100%', fontWeight: '700', letterSpacing: '-0.03em' }, regular: { fontSize: '100px', lineHeight: '100%', fontWeight: '400', letterSpacing: '-0.03em' }, }, hero: { bold: { fontSize: '64px', lineHeight: '110%', fontWeight: '700', letterSpacing: '-0.02em' }, regular: { fontSize: '64px', lineHeight: '110%', fontWeight: '400', letterSpacing: '-0.02em' }, }, title1: { bold: { fontSize: '48px', lineHeight: '120%', fontWeight: '700', letterSpacing: '-0.01em' }, regular: { fontSize: '48px', lineHeight: '120%', fontWeight: '400', letterSpacing: '-0.01em' }, }, title2: { bold: { fontSize: '32px', lineHeight: '120%', fontWeight: '700', letterSpacing: '-0.01em' }, regular: { fontSize: '32px', lineHeight: '120%', fontWeight: '400', letterSpacing: '-0.01em' }, }, quote: { bold: { fontSize: '24px', lineHeight: '130%', fontWeight: '700', letterSpacing: '-0.005em' }, regular: { fontSize: '24px', lineHeight: '130%', fontWeight: '400', letterSpacing: '-0.005em' }, }, text: { bold: { fontSize: '16px', lineHeight: '150%', fontWeight: '700' }, regular: { fontSize: '16px', lineHeight: '150%', fontWeight: '400' }, }, } as const; /** * Sans Heading 系列 (Inter/Noto Sans) * 用于标题和子标题 */ export const sansHeading = { h1: { bold: { fontSize: '48px', lineHeight: '120%', fontWeight: '700', letterSpacing: '-0.01em' }, medium: { fontSize: '48px', lineHeight: '120%', fontWeight: '500', letterSpacing: '-0.01em' }, regular: { fontSize: '48px', lineHeight: '120%', fontWeight: '400', letterSpacing: '-0.01em' }, }, h2: { bold: { fontSize: '32px', lineHeight: '120%', fontWeight: '700', letterSpacing: '-0.01em' }, medium: { fontSize: '32px', lineHeight: '120%', fontWeight: '500', letterSpacing: '-0.01em' }, regular: { fontSize: '32px', lineHeight: '120%', fontWeight: '400', letterSpacing: '-0.01em' }, }, h3: { bold: { fontSize: '24px', lineHeight: '130%', fontWeight: '700', letterSpacing: '-0.005em' }, medium: { fontSize: '24px', lineHeight: '130%', fontWeight: '500', letterSpacing: '-0.005em' }, regular: { fontSize: '24px', lineHeight: '130%', fontWeight: '400', letterSpacing: '-0.005em' }, }, h4: { bold: { fontSize: '20px', lineHeight: '140%', fontWeight: '700' }, medium: { fontSize: '20px', lineHeight: '140%', fontWeight: '500' }, regular: { fontSize: '20px', lineHeight: '140%', fontWeight: '400' }, }, } as const; /** * Sans Body 系列 * 用于正文和段落文本 */ export const sansBody = { large: { bold: { fontSize: '18px', lineHeight: '150%', fontWeight: '700' }, medium: { fontSize: '18px', lineHeight: '150%', fontWeight: '500' }, regular: { fontSize: '18px', lineHeight: '150%', fontWeight: '400' }, }, default: { bold: { fontSize: '16px', lineHeight: '150%', fontWeight: '700' }, medium: { fontSize: '16px', lineHeight: '150%', fontWeight: '500' }, regular: { fontSize: '16px', lineHeight: '150%', fontWeight: '400' }, }, small: { bold: { fontSize: '14px', lineHeight: '150%', fontWeight: '700' }, medium: { fontSize: '14px', lineHeight: '150%', fontWeight: '500' }, regular: { fontSize: '14px', lineHeight: '150%', fontWeight: '400' }, }, } as const; /** * Sans Caption 系列 * 用于说明文字、标签等小字 */ export const sansCaption = { tiny: { bold: { fontSize: '12px', lineHeight: '150%', fontWeight: '700', letterSpacing: '0.01em' }, medium: { fontSize: '12px', lineHeight: '150%', fontWeight: '500', letterSpacing: '0.01em' }, regular: { fontSize: '12px', lineHeight: '150%', fontWeight: '400', letterSpacing: '0.01em' }, }, minuscule: { bold: { fontSize: '10px', lineHeight: '150%', fontWeight: '700', letterSpacing: '0.02em' }, medium: { fontSize: '10px', lineHeight: '150%', fontWeight: '500', letterSpacing: '0.02em' }, regular: { fontSize: '10px', lineHeight: '150%', fontWeight: '400', letterSpacing: '0.02em' }, }, } as const; /** * Mono Numeric 系列 (JetBrains Mono) * 用于数字、统计数据展示 */ export const monoNumeric = { giant: { extraBold: { fontSize: '48px', lineHeight: '110%', fontWeight: '800', letterSpacing: '-0.01em' }, bold: { fontSize: '48px', lineHeight: '110%', fontWeight: '700', letterSpacing: '-0.01em' }, medium: { fontSize: '48px', lineHeight: '110%', fontWeight: '500', letterSpacing: '-0.01em' }, regular: { fontSize: '48px', lineHeight: '110%', fontWeight: '400', letterSpacing: '-0.01em' }, }, huge: { extraBold: { fontSize: '32px', lineHeight: '120%', fontWeight: '800', letterSpacing: '-0.005em' }, bold: { fontSize: '32px', lineHeight: '120%', fontWeight: '700', letterSpacing: '-0.005em' }, medium: { fontSize: '32px', lineHeight: '120%', fontWeight: '500', letterSpacing: '-0.005em' }, regular: { fontSize: '32px', lineHeight: '120%', fontWeight: '400', letterSpacing: '-0.005em' }, }, large: { extraBold: { fontSize: '24px', lineHeight: '130%', fontWeight: '800' }, bold: { fontSize: '24px', lineHeight: '130%', fontWeight: '700' }, medium: { fontSize: '24px', lineHeight: '130%', fontWeight: '500' }, regular: { fontSize: '24px', lineHeight: '130%', fontWeight: '400' }, }, default: { extraBold: { fontSize: '16px', lineHeight: '140%', fontWeight: '800' }, bold: { fontSize: '16px', lineHeight: '140%', fontWeight: '700' }, medium: { fontSize: '16px', lineHeight: '140%', fontWeight: '500' }, regular: { fontSize: '16px', lineHeight: '140%', fontWeight: '400' }, }, } as const; /** * Mono Code 系列 * 用于代码、技术文本 */ export const monoCode = { small: { extraBold: { fontSize: '14px', lineHeight: '150%', fontWeight: '800' }, bold: { fontSize: '14px', lineHeight: '150%', fontWeight: '700' }, medium: { fontSize: '14px', lineHeight: '150%', fontWeight: '500' }, regular: { fontSize: '14px', lineHeight: '150%', fontWeight: '400' }, }, tiny: { extraBold: { fontSize: '12px', lineHeight: '150%', fontWeight: '800' }, bold: { fontSize: '12px', lineHeight: '150%', fontWeight: '700' }, medium: { fontSize: '12px', lineHeight: '150%', fontWeight: '500' }, regular: { fontSize: '12px', lineHeight: '150%', fontWeight: '400' }, }, minuscule: { extraBold: { fontSize: '10px', lineHeight: '150%', fontWeight: '800' }, bold: { fontSize: '10px', lineHeight: '150%', fontWeight: '700' }, medium: { fontSize: '10px', lineHeight: '150%', fontWeight: '500' }, regular: { fontSize: '10px', lineHeight: '150%', fontWeight: '400' }, }, } as const; /** * 统一导出 */ export const typography = { serif: { display: serifDisplay, }, sans: { heading: sansHeading, body: sansBody, caption: sansCaption, }, mono: { numeric: monoNumeric, code: monoCode, }, } as const; export type Typography = typeof typography;