## Design Context ### Users - 中国企业决策者(CEO/CIO/CTO),寻求数字化转型服务 - 使用场景:评估技术供应商、了解解决方案、发起咨询 - 期望感受:专业可信、文化共鸣、技术前沿 ### Brand Personality - 沉稳 · 精致 · 可信赖 - 东方水墨美学 + 现代科技感 - 不是高高在上的"专家",而是坐下来一起想办法的"同行者" ### Aesthetic Direction - **风格**: 水墨雅致 — 以留白和排版取胜,特效点到为止 - **参考**: Apple 中国官网(极致留白、精准排版、微妙动效) - **核心视觉**: 墨韵流光(旋转渐变边框 + 鼠标跟随光晕)— 全站统一 - **反参考**: 过度装饰、花哨动画、多色渐变、拥挤布局 ### Design Principles 1. **留白即力量** — 内容呼吸,不拥挤。section 间距 generous,卡片内部留白充足 2. **墨韵流光统一** — 所有卡片共享 ink-glow-border + mouse-follow 系统,但参数克制 3. **朱砂点睛** — 品牌红 #C41E3A 仅作点缀,不作为主色调。标题中关键词用 font-calligraphy 突出 4. **层次分明** — 通过字重和间距建立层级,而非颜色多样性 5. **克制动效** — 动效服务于信息传达,不炫技。hover 效果统一:translateY(-4px) + shadow + glow ### Design Tokens #### Colors (Strict) | Token | Value | Usage | |-------|-------|-------| | ink | #1C1C1C | 主文字、深色背景 | | ink-light | #595959 | 次要文字(唯一值) | | ink-muted | #A3A3A3 | 辅助文字(唯一值) | | cinnabar | #C41E3A | 品牌强调色,仅点缀 | | paper | #FFFFFF | 主背景 | | paper-warm | #FAFAFA | 交替 section 背景 | | ink-dark | #0A0A0A | CTA 深色背景 | #### Typography | Level | Size | Weight | Usage | |-------|------|--------|-------| | H1 | text-5xl sm:text-6xl lg:text-7xl | font-normal (brand) | Hero 品牌名 | | H2 | text-3xl sm:text-4xl | font-semibold | Section 标题 | | H3 | text-lg sm:text-xl | font-semibold | Card 标题 | | Body | text-base | normal | 正文描述 | | Small | text-sm | normal | 辅助信息 | | Mono | text-xs font-mono | normal | 编号标签 | #### Spacing | Token | Value | Usage | |-------|-------|-------| | section-y | py-20 md:py-28 | Section 纵向间距 | | card-p | p-6 md:p-8 | 卡片内边距 | | grid-gap | gap-6 md:gap-8 | 网格间距 | #### Card System - 所有卡片: `ink-glow-border rounded-2xl` + mouse-follow + hover translateY(-4px) - 鼠标光晕: `radial-gradient(400px circle, rgba(accent, 0.04), transparent 40%)` - 阴影: hover `0 16px 32px rgba(0,0,0,0.08)` / default `0 1px 3px rgba(0,0,0,0.04)` - 边框: ink-glow-border 旋转渐变 #### Section Backgrounds (Alternating) 1. Hero: paper (#FFFFFF) 2. Social Proof: paper-warm (#FAFAFA) 3. Product Matrix: paper (#FFFFFF) 4. Challenge: paper-warm (#FAFAFA) 5. Services: paper (#FFFFFF) 6. Methodology: paper-warm (#FAFAFA) 7. Home Solutions: paper (#FFFFFF) 8. Testimonials: paper-warm (#FAFAFA) 9. Team: paper (#FFFFFF) 10. About: paper-warm (#FAFAFA) 11. News: paper (#FFFFFF) 12. CTA: ink-dark (#1C1C1C)