基建开始
设计变量体系——字体/间距/圆角/阴影
这里是设置文字的基础部分，为了整个网站的基础内容有一个很好的基座。
展示部分
展示变量与字体号
只是为了有一个文本显示，所以就做了这行文字而已
| 变量名 | 值 |
|---|---|
| ty-text-xs | 12px |
| ty-text-s | 14px |
| ty-text-m | clamp(15px, 0.11vw + 14.6px, 16px) |
| ty-text-l | clamp(17px, 0.11vw + 16.6px, 18px) |
| ty-text-xl | clamp(20px, 0.42vw + 18.4px, 24px) |
| ty-text-2xl | clamp(25px, 0.74vw + 22.2px, 32px) |
| ty-text-3xl | clamp(30px, 1.27vw + 25.2px, 42px) |
| ty-text-4xl | clamp(36px, 2.12vw + 28.1px, 56px) |
ty-text-4xl：一般用于首页 Hero 大标题
ty-text-3xl：一般用于页面主标题 H1（默认标题层级）
ty-text-2xl：一般用于章节标题 / 二级区块标题（H2）
ty-text-xl：一般用于小节标题（H3）
ty-text-l：一般用于强调正文 / 卡片标题 / hero 引导语
ty-text-m：一般用于正文（网站基本字体）
ty-text-s：一般用于元信息 / 卡片描述文字
ty-text-xs：一般用于脚注 / 眉题小字 / 徽章
间距体系
展示变量与间距
间距为固定值（4px 网格基准）。手机端大间距自动降一档：48→32、80→48、120→80。
| 变量名 | 值 |
|---|---|
| ty-space-4 | 4px |
| ty-space-8 | 8px |
| ty-space-12 | 12px |
| ty-space-16 | 16px |
| ty-space-24 | 24px |
| ty-space-32 | 32px |
| ty-space-48 | 48px |
| ty-space-80 | 80px |
| ty-space-120 | 120px |
ty-space-4：图标与文字间距 / 徽章内边距
ty-space-8：组件内最小间距
ty-space-12：紧凑卡片内部间距
ty-space-16：基本间距 / 卡片 padding
ty-space-24：元素组间距（按钮组/标题组）
ty-space-32：区块内分块间距 / 表单字段组
ty-space-48：区块之间间距（手机端 32px）
ty-space-80：大区块 padding（手机端 48px）
ty-space-120：页面级超大间距 hero（手机端 80px）
圆角体系
展示变量与圆角
圆角为固定值（4px 网格基准）。数值命名，full 为胶囊 / 圆形（9999px）。
| 变量名 | 值 |
|---|---|
| ty-radius-4 | 4px |
| ty-radius-8 | 8px |
| ty-radius-12 | 12px |
| ty-radius-16 | 16px |
| ty-radius-24 | 24px |
| ty-radius-full | 9999px |
ty-radius-4：小控件（输入框、标签）
ty-radius-8：默认圆角（按钮、卡片）
ty-radius-12：卡片、图片容器
ty-radius-16：大卡片、弹窗
ty-radius-24：特大容器、Hero 图
ty-radius-full：胶囊 / 圆形（按钮、头像、徽章）
ty-radius-4
ty-radius-8
ty-radius-12
ty-radius-16
ty-radius-24
ty-radius-full
阴影体系
展示变量与阴影
阴影为固定值，语义命名（sm/md/lg/xl 对应层级）。颜色独立成变量，随层级透明度递增。
| 变量名 | 值 |
|---|---|
| ty-shadow-sm | 0 1px 2px 0 var(–ty-color-shadow-sm) |
| ty-shadow-md | 0 4px 12px 0 var(–ty-color-shadow-md) |
| ty-shadow-lg | 0 10px 24px 0 var(–ty-color-shadow-lg) |
| ty-shadow-xl | 0 20px 40px 0 var(–ty-color-shadow-xl) |
ty-shadow-sm：卡片悬浮微效果
ty-shadow-md：卡片默认阴影（hover 升 lg）
ty-shadow-lg：下拉菜单 / 导航浮层
ty-shadow-xl：弹窗 / toast / 最高层级
ty-color-shadow-sm：阴影颜色 rgba(15,23,42,0.06)
ty-color-shadow-lg：阴影颜色 rgba(15,23,42,0.12)（md/xl 同理）
ty-shadow-sm
ty-shadow-md
ty-hover-shadow-lg
ty-hover-shadow-lg
ty-shadow-lg
ty-shadow-xl
颜色体系
展示变量与颜色
颜色分 8 组：品牌 / 中性 / 文本 / 状态 / 背景 / 边框 / 覆盖层 / 阴影色。客户换肤时只改品牌色 8 个 + 深色背景 + inverse 灰。
品牌色 Brand
ty-color-primary
ty-color-primary-light
ty-color-primary-deep
ty-color-primary-bg
ty-color-secondary
ty-color-secondary-light
ty-color-secondary-deep
ty-color-secondary-bg
中性色 Neutral
ty-color-neutral-0
ty-color-neutral-50
ty-color-neutral-100
ty-color-neutral-200
ty-color-neutral-300
ty-color-neutral-400
ty-color-neutral-500
ty-color-neutral-600
ty-color-neutral-700
ty-color-neutral-800
ty-color-neutral-900
ty-color-neutral-1000
文本色 Text
ty-color-text-header
ty-color-text-body
ty-color-text-muted
ty-color-text-inverse
ty-color-text-inverse-soft
ty-color-text-inverse-muted
状态色 Status
ty-color-success
ty-color-warning
ty-color-danger
ty-color-info
背景 Background
ty-color-background
ty-color-background-block
ty-color-background-dark
ty-color-background-dark-deep
边框 Border
ty-color-border
ty-color-border-light
覆盖层 Overlay
ty-color-overlay-dark-light
ty-color-overlay-dark-medium
ty-color-overlay-dark-deep
阴影色 Shadow
ty-color-shadow-sm
ty-color-shadow-md
ty-color-shadow-lg
ty-color-shadow-xl