01
色彩 Color
集团主色在全站占比 ≥ 85%；业务辅助色只在对应业务模块内作为 Secondary Accent 使用。
Group Palette · 集团主色
Business Accents · 业务辅助色
Usage Ratio · 面积占比
GROUP ≥ 85%（规范目标，示意）BUSINESS ACCENTS ≤ 15%
02
字体 Typography
英文 / 数字：Inter Tight 500–600，大标题字距 -0.02em；中文：PingFang SC / 思源黑体；标签与元数据：JetBrains Mono 12px 大写，字距 0.12em。
连接产业 YUNX
不只是举办展会
FROM EVENTS TO GROWTH
2027 · YUNX EDUCATION CONFERENCE
云际无界通过会展、活动、内容与数字营销，连接产业、品牌、人群与商业机会。
以会展为产业连接入口，通过活动营销、内容传播与数字推广，帮助品牌建立从线下场景到线上增长的完整连接。
YUNX · CONNECTING WORLDS
100K+
Mobile：Display 48 · H1 40 · H2 28 · Body 16（页面使用 clamp() 在 390 → 1440 之间连续过渡）
03
栅格与间距 Grid & Spacing
画布 1440，内容容器 1280，12 栏，栏距 24，页边距 80；8pt 间距系统。
Spacing · 8pt
Section Rhythm · 模块留白
Radius & Ratio
05
响应式 Responsive
断点 Desktop 1440 / 1920 · Tablet 1024 / 768 · Mobile 390 / 430。移动端重排而非等比缩放，导航折叠为全屏菜单，「商务合作」固定在菜单底部。
| Breakpoint | Page Margin | Layout | Navigation |
|---|---|---|---|
| Desktop ≥ 1200 | 80 / 48 | 12 栏，完整 15 个模块 | 横向导航 + 商务合作 |
| Tablet 768 – 1199 | 40 | 双栏模块改为上下排布 | 全屏菜单 |
| Mobile ≤ 767 | 20 | Brand → 核心业务 → 重点项目 → 案例 → 新闻 → 合作 CTA → Footer；Hero 100svh；Lite Mode | 全屏菜单，CTA 固定底部 |
06
动效与 3D Motion & WebGL
Slow · Smooth · Premium · Controlled。Lenis + GSAP ScrollTrigger + Three.js；缓动 power2 / power3.out，常规时长 0.6–1.2s，Pin 场景 ≤ 300vh。
| Element | Tech | 连接含义 |
|---|---|---|
| Hero · YUNX WORLD | Three.js | 节点 = 城市 / 产业 / 品牌 / 人群；光点 = 传播路径；核心 YUNX 的五条连线延伸至五项业务 |
| Scroll Storytelling | Three.js + DOM | 网络收束为三大产业（内环）→ 外环生长两项服务能力，对应两层业务结构 |
| Business Architecture | Three.js（轻量） | 虚线与向下流动的光点表达「展会 → 服务」 |
| Education Portal | Three.js | 层叠知识楼层之间的跨层连线 = 教育、人才、科技资源的连接 |
| Pop Culture Portal | Three.js | 点云 IP 剪影被数字轨道环绕 = IP 与青年文化的连接 |
| Agriculture Portal | Three.js | 地形等高线上的传感节点组网 = 农业科技、品牌与渠道生态 |
| Event Marketing | CSS / ScrollTrigger | 五项能力随滚动依次点亮 = 从策略到内容的完整执行链 |
| Growth Marketing | SVG | 注意力先扩散再收束为转化 = TURN ATTENTION INTO GROWTH |
| Global Network | Three.js | 经纬点阵 + 10 个城市 + 四类连接（Industry / Brand / Event / Media） |
- PERFLCP < 2.5s：WebGL 以动态 import 在首帧后加载；三角面 < 200k，纹理 0（全部程序化）
- LITE移动端 Lite Mode：节点数降低 60%，关闭抗锯齿，像素比 ≤ 1.5
- A11Yprefers-reduced-motion：关闭视差、Pin 与自动动画，保留静态构图
- FALLBACKWebGL 不可用时显示静态 SVG / CSS 点阵；文字与按钮从不等待 WebGL