assetx/landingpage/styles/tokens/typography.ts

/**
 * 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;