Visual Color Guide: Homepage Sections¶
可视化颜色指南：主页各区域¶
This document provides a visual representation of the color gradients used in each homepage section.
本文档提供主页各区域使用的颜色渐变的可视化表示。
Color Palette Reference / 色板参考¶
Brand Colors / 品牌色¶
Background Tints / 背景色调¶
Purple Tints (紫色调):
#faf5ff ██████ (Light purple - very subtle)
#fefaff ██████ (Very light purple)
#fcfbff ██████ (Barely purple)
#fdfcff ██████ (Ultra-subtle purple)
Blue Tints (蓝色调):
#f0f9ff ██████ (Light cyan-blue)
#f0f4ff ██████ (Blue-purple mix)
#f8f9ff ██████ (Very light blue)
#fcfcff ██████ (Near-white with blue hint)
Section 1: Download Section / 下载区域¶
"立即开始使用 - IntelliJ IDEA 插件"
Background Gradient / 背景渐变¶
Top (0%) #faf5ff ██████████ Light purple tint
↓
Middle (50%) #f0f4ff ██████████ Blue-purple mix
↓
Bottom (100%)#faf5ff ██████████ Light purple tint
Visual Effect: Soft purple warmth transitioning to cool blue-purple in the center, creating a welcoming yet professional appearance.
视觉效果： 柔和的紫色温暖过渡到中心的冷蓝紫色，创造出亲切而专业的外观。
Download Container Card / 下载容器卡片¶
Top (0%) #ffffff ██████████ Pure white
↓
Middle (50%) #fefaff ██████████ Very subtle purple tint
↓
Bottom (100%)#ffffff ██████████ Pure white
Visual Effect: Extremely subtle gradient that adds depth without being obvious. The purple tint is barely visible but creates a more premium feel than pure white.
视觉效果： 极其微妙的渐变增加深度但不明显。紫色调几乎看不见，但比纯白色创造更高级的感觉。
Section 2: Value Section / 价值区域¶
"核心价值"
Background Gradient / 背景渐变¶
Top (0%) #f0f9ff ██████████ Light cyan-blue (cool)
↓
Middle (50%) #faf5ff ██████████ Light purple (warm)
↓
Bottom (100%)#f0f9ff ██████████ Light cyan-blue (cool)
Visual Effect: Creates a cool-to-warm-to-cool transition. The blue tones convey trust and professionalism, while the purple middle adds creativity and warmth.
视觉效果： 创造冷-暖-冷的过渡。蓝色调传达信任和专业，而紫色中部增加创意和温暖。
Value Cards / 价值卡片¶
Visual Effect: Very subtle gradient that keeps cards feeling clean and professional while adding a hint of personality.
视觉效果： 非常微妙的渐变使卡片保持清洁和专业，同时增加一丝个性。
Section 3: Features Section / 功能区域¶
"产品特性"
Background Gradient / 背景渐变¶
Top (0%) #fcfcff ██████████ Near-white with blue hint
↓
Middle (50%) #f8f9ff ██████████ Very light blue
↓
Bottom (100%)#fcfcff ██████████ Near-white with blue hint
Visual Effect: Almost white but with a cool blue undertone. Creates a clean, professional canvas that's more interesting than pure white.
视觉效果： 几乎是白色但带有冷蓝色基调。创造一个清洁、专业的画布，比纯白色更有趣。
Feature Cards / 功能卡片¶
Visual Effect: Whisper-light purple tint at the bottom creates subtle depth without being noticeable.
视觉效果： 底部的极淡紫色调创造微妙深度但不引人注意。
Decorative Elements / 装饰元素¶
Radial Gradients (Ambient Glow) / 径向渐变（环境光晕）¶
Used in section backgrounds to add visual interest:
在区域背景中使用以增加视觉趣味：
Example: Download Section
┌─────────────────────────────────┐
│ ○ Blue glow │ rgba(99, 102, 241, 0.08)
│ (20%, 30%) │ at 20% horizontal, 30% vertical
│ │
│ │
│ Purple glow ○ │ rgba(168, 85, 247, 0.08)
│ (80%, 70%) │ at 80% horizontal, 70% vertical
└─────────────────────────────────┘
Effect: Creates soft, ambient lighting effect that adds depth and dimension without overwhelming the content.
效果： 创造柔和的环境光效果，增加深度和维度，但不会压倒内容。
Top Accent Lines / 顶部装饰线¶
┌═══════════════════════════════════┐ ← 2-3px gradient line
│ transparent │
│ ↓ ↓ │
│ Indigo → Violet → Fuchsia │
│ ↓ ↓ │
│ transparent │
└───────────────────────────────────┘
Effect: Creates visual separation between sections and adds premium feel with brand colors.
效果： 在区域间创造视觉分隔，用品牌色增加高级感。
Color Transition Flow / 颜色过渡流程¶
The homepage creates a natural color flow from top to bottom:
主页从上到下创造自然的颜色流动：
Hero Section
│ Full brand gradient (Purple → Violet → Fuchsia)
│ 深色，充满活力的品牌渐变
↓
Download Section
│ Light purple (#faf5ff) ↔ Blue-purple (#f0f4ff)
│ 温暖的紫色调，亲切专业
↓
Value Section
│ Light cyan-blue (#f0f9ff) ↔ Light purple (#faf5ff)
│ 冷暖过渡，信任与创意
↓
Features Section
│ Near-white (#fcfcff) ↔ Very light blue (#f8f9ff)
│ 清爽专业，功能展示
↓
Differentiation Section
│ Full brand gradient (same as Hero)
│ 回归品牌渐变，强调独特性
↓
CTA Section
│ Full brand gradient (same as Hero)
│ 最终行动号召，品牌强化
Overall Flow: Creates a wave pattern of color intensity - strong at top (Hero), softens through middle sections (Download, Value, Features), then returns to strong brand colors at bottom (Differentiation, CTA).
整体流动： 创造颜色强度的波浪模式 - 顶部强烈（Hero），在中间区域柔和（Download、Value、Features），然后在底部回归强烈的品牌色（Differentiation、CTA）。
Comparison: White vs Gradient / 对比：白色 vs 渐变¶
Pure White (Before) / 纯白色（改进前）¶
Pure White: #ffffff ██████████
#ffffff ██████████
#ffffff ██████████
Problems:
- Harsh and sterile / 刺眼生硬
- No visual interest / 无视觉趣味
- No brand identity / 无品牌识别
- Disconnected sections / 区域断开
Subtle Gradients (After) / 微妙渐变（改进后）¶
Purple Gradient: #faf5ff ██████████ (top)
#f0f4ff ██████████ (middle)
#faf5ff ██████████ (bottom)
Blue Gradient: #f0f9ff ██████████ (top)
#faf5ff ██████████ (middle)
#f0f9ff ██████████ (bottom)
Benefits:
- Soft and sophisticated / 柔和精致
- Visual depth / 视觉深度
- Strong brand identity / 强品牌识别
- Cohesive flow / 统一流动
Technical Notes / 技术说明¶
Gradient Syntax / 渐变语法¶
background: linear-gradient(
180deg, /* Vertical direction (top to bottom) */
#faf5ff 0%, /* Start color */
#f0f4ff 50%, /* Middle color */
#faf5ff 100% /* End color */
);
Opacity for Overlays / 叠加层透明度¶
/* Very subtle - adds interest without being obvious */
background-image:
radial-gradient(circle at 20% 30%,
rgba(99, 102, 241, 0.08) 0%, /* 8% opacity */
transparent 50%);
Why These Opacity Values? / 为什么选择这些透明度值？¶
- 0.03-0.04: Too subtle, barely visible / 太微妙，几乎看不见
- 0.06-0.08: Perfect - adds interest without distraction / 完美 - 增加趣味不分散注意力
- 0.15+: Too strong, starts to interfere with content / 太强，开始干扰内容
Browser Support / 浏览器支持¶
All gradients are pure CSS and work in: 所有渐变都是纯 CSS，支持：
- ✅ Chrome/Edge 88+
- ✅ Firefox 85+
- ✅ Safari 14+
- ✅ Opera 74+
- ✅ All modern mobile browsers
Fallback: Even without gradient support, the base colors provide good appearance. 降级方案： 即使不支持渐变，基础颜色也提供良好的外观。
Summary / 总结¶
The new color scheme transforms boring white panels into sophisticated, branded sections that:
新配色方案将无聊的白色面板转变为精致的品牌区域：
- ✅ Use subtle gradients instead of harsh white
- ✅ Maintain brand identity throughout
- ✅ Create natural visual flow
- ✅ Add depth and dimension
- ✅ Remain accessible and readable
用微妙的渐变替代刺眼的白色 贯穿始终保持品牌识别 创造自然的视觉流动 增加深度和维度 保持可访问和可读