CHS 官网 v2.2 全站设计语言的可执行规范：色值、字体层级、间距网格、组件样式与响应式断点。品牌蓝（对齐 CHS logo） × 环保绿（循环经济主题）双色融合，科技纯白底 + 冷调分区。所有数值均为最终落地值，以 CSS 自定义属性（Design Tokens）形式维护于 style.css 文件头部，修改一处、全站生效——可直接导出给开发人员逐条对照实现。
科技纯白为底、冷调近黑为墨、钴蓝为品牌主色（对齐 CHS logo 蓝）、信号蓝作交互强调，环保绿（Eco）专属循环经济/可持续主题。Azure 只承担「最值得点的那一下」，Eco 只用于环保/回收相关语义。
| Token | 值 | 用途 | 对比度（对 Paper/白） |
|---|---|---|---|
| --paper | #FFFFFF | 页面主背景（科技纯白），全站 ≥70% 面积 | — |
| --paper-2 | #F2F5FA | 相邻分区交替背景（冷调浅灰蓝），制造节奏 | — |
| --ink | #0F1522 | 标题、正文、按钮悬停态 | 18.7 : 1（AAA） |
| --blue | #0A3D91 | 主按钮、链接强调、品牌识别（与 CHS logo 蓝同族） | 9.4 : 1（AAA） |
| --blue-deep | #06204E | 深色分区（全球网络 / 流程 / 页脚）背景 | 上置 Paper 文字 14.8 : 1 |
| --azure | #2F6BFF | 主 CTA、交互悬停、进度条、选中态。大面积使用每屏 ≤1 处 | 作浅底文字仅限 ≥18px（4.2 : 1） |
| --azure-300 | #6E9BFF | 深色分区（Blue-Deep 底）上的小号强调文字与链接 | 对 Blue-Deep 5.9 : 1（AA） |
| --azure-ink | #FFFFFF | Azure 背景之上的唯一文字色 | 4.5 : 1（AA） |
| --eco | #00A868 | 环保数据格、愿景高亮、页脚标语 | 3.9 : 1（AA Large） |
| --eco-deep | #00804E | 浅底环保文字色（≥14px） | 5.6 : 1（AA） |
| --eco-300 | #3DD598 | 深色底（Blue-Deep）上的环保绿文字 | 对 Blue-Deep 9.2 : 1 |
| --hairline | Ink 14% | 卡片、表格、分区分隔线。代替一切投影 | — |
双字族策略：拉丁字符与数字一律 Space Grotesk（工业感、几何感），中文回退 Noto Sans SC → PingFang SC。中文标题不使用衬线，保持 B2B 工业的克制。
| 字族 | 加载 | 权重 | 应用范围 |
|---|---|---|---|
| Space Grotesk | Google Fonts · 400/500/600/700 | 400 / 500 / 600 / 700 | 所有拉丁字符、数字、编号（01–06）、眉标、hex 值 |
| Noto Sans SC | Google Fonts · 400/500/700 | 400 / 500 / 700 | 中文字符；系统回退 PingFang SC → Microsoft YaHei |
4px 基数、11 级间距刻度。克制使用：相邻模块间距只用 96/128，不出现任意数值。横向网格 12 列，容器 1320px。
| Token | 值 | 刻度 | 典型用途 |
|---|---|---|---|
| --sp-1 | 4px | 图标与文字微间距 | |
| --sp-2 | 8px | 行内元素间距、社媒图标间距 | |
| --sp-3 | 12px | 紧凑列表行距 | |
| --sp-4 | 16px | 卡片内距、表单行距 | |
| --sp-5 | 24px | 列距（gutter）、标题下间距 | |
| --sp-6 | 32px | 卡片组间距、编号与内容间距 | |
| --sp-7 | 48px | 组内二级间距 | |
| --sp-8 | 64px | Hero 品牌块内间距、章节头下间距 | |
| --sp-9 | 96px | 紧凑章节上下内距（section-tight） | |
| --sp-10 | 128px | 标准章节上下内距（section） | |
| --sp-11 | 160px | 首尾章节 / 页头特殊留白 |
| 布局 Token | 值 | 说明 |
|---|---|---|
| --container | 1320px | 内容最大宽度；左右内距 clamp(20px, 4vw, 48px) |
| --gutter | 24px | 栅格列距（12 列体系） |
| --header-h | 76px（移动端 64px） | 固定导航高度；滚动后加纸白毛玻璃底 + 底部 hairline |
| --radius | 2px | 近直角——卡片、图片、表格统一 |
| --radius-pill | 999px | 仅用于按钮与标签胶囊 |
| --ease | cubic-bezier(0.22, 1, 0.36, 1) | 全站唯一缓动曲线，时长 0.35s（reveal 0.8s） |
高转化页面的四个关键组件：按钮、卡片、表单与导航。每个组件给出尺寸、状态与交互规则，可直接对照 CSS 类名实现。
| 组件 | 规格 | 状态与交互 |
|---|---|---|
| 按钮 · 主 .btn .btn-primary |
内距 16×32（sm 10×20）· 字号 15/500 · 胶囊圆角 · 背景 Blue #0A3D91 · 文字 Paper | Hover → 背景 Ink #14161C，箭头 → 平移 4px；用途：每屏一个主 CTA |
| 按钮 · 信号 .btn .btn-azure |
背景 Azure #2F6BFF · 文字 Azure-Ink #FFFFFF | Hover → 背景 Blue #0A3D91；Azure CTA 区块内的主按钮自动反白（白底 Blue 字） |
| 按钮 · 幽灵 .btn .btn-ghost |
边框 1px Hairline-Strong · 无填充 | Hover → 反色（Ink 底 + Paper 字）；深色区用 -invert 变体 |
| 卡片（hairline） .swatch / .qual-cell / .office-card |
白底 · 边框 1px Hairline · 圆角 2px · 内距 24 | Hover（可点击卡片）→ 边框转 Blue + 箭头旋转 45°；无投影 |
| 表单控件 .f-control |
无框底线式：底边 1px Hairline-Strong · Focus → 2px Blue · 字号 15 · 内距 12×0 | 提交成功 → .form-success 蓝色左边框提示条（Blue-Tint 底） |
| 导航 .site-header |
高 76 · 固定 · 品牌字 Space Grotesk 700 · 链接 15/500 | 链接 Hover/Active → 下划线动画；滚动 >10px 加毛玻璃底；≤768px 收纳为 ☰ 抽屉 |
| 轮播 .carousel |
图比 3:2 · 圆角 2px · 角标编号 01/04（Space Grotesk） | 6s 自动播放 · 顶部 3px 进度条（rAF 驱动）· 悬停暂停 |
| 视频占位 <video poster> |
poster 为 AI 生成图 gen-video-poster.png · 16:9 · preload=none | 无源文件时点击给占位提示；接入源文件时解开 source 注释即可 |
桌面优先，两个断点收拢。移动端核心原则：导航抽屉化、多栏降单栏、段落内距 128→80。
| 断点 | 范围 | 布局变化 |
|---|---|---|
| Desktop | ≥ 1025px | 12 列 / 容器 1320 · Hero 左列品牌块 · 数据条 4 列 · 资质 4 列 · 章节内距 72 |
| Tablet | ≤ 1024px | Hero / 网络 / 愿景 / 联系降单栏 · 数据条 2×2 · 资质 2 列 · 流程纵向 · prod-desc 隐藏 |
| Mobile | ≤ 768px | 导航收 ☰ 抽屉 · 头部 64px · 章节内距 80 · 页脚单列 · 表单纵向堆叠 |
全站视觉均为 AI 生成原创素材，统一冷调工业摄影气质——禁止使用任何参考网站图片或图库素材。
| 素材 | 文件 | 规格 | 用途 |
|---|---|---|---|
| 首页主视觉 | gen-hero-real.png | 1536×1024 PNG · 3:2 | 首页全宽 Hero 背景：浅色写实产品摄影，左留白、右真实设备陈列 |
| 品牌标识 | chs-logo.jpg | 1000×974 JPG · 裁切为圆形 | 首页 Hero 左侧 CHS logo |
| 愿景图 | gen-vision-wide.png | 1536×1024 PNG | 首页愿景区块（页尾大图） |
| 视频海报 | gen-video-poster.png | 1536×1024 PNG · 裁切为 16:9 | 首页视频模块 poster 属性 |
| 服务轮播 ×4 | gen-svc-*.png | 1536×1024 PNG × 4 | 服务页轮播（手机/IC/存储/ITAD） |
| 关于页主图 | gen-about.png | 1536×1024 PNG | 关于我们页头 |
| 世界地图 | worldmap.svg | 内联/外部 SVG · 点阵投影 | 首页全球网络区 HKG↔DFW |
| 社媒图标 ×6 | 内联 SVG path | 24×24 viewBox · currentColor 填充 | 页脚与联系区（LinkedIn/X/FB/YT/微信/WhatsApp） |
| 交付文件 | 路径 | 说明 |
|---|---|---|
| index.html | website-v2/ | 首页（7 模块 + 页脚） |
| services.html | website-v2/ | 服务页（索引 + 轮播 + 产品 + 流程） |
| about.html | website-v2/ | 关于页（时间线 + 双办公室地图 + 表单 + 社媒） |
| design-spec.html | website-v2/ | 本规范页 |
| style.css | website-v2/assets/css/ | 设计系统（Tokens 在文件头 24–69 行） |
| main.js | website-v2/assets/js/ | 双语切换 / 滚动显现 / 计数器 / 轮播 / 表单 |