init: 初始化 AssetX 项目仓库
包含 webapp(Next.js 用户端)、webapp-back(Go 后端)、 antdesign(管理后台)、landingpage(营销落地页)、 数据库 SQL 和配置文件。
This commit is contained in:
178
landingpage/styles/tokens/typography.ts
Normal file
178
landingpage/styles/tokens/typography.ts
Normal file
@@ -0,0 +1,178 @@
|
||||
/**
|
||||
* 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;
|
||||
Reference in New Issue
Block a user