Contents
🎨 noahtao.top 网站风格指南
最后更新: 2026-03-25 14:47:46
欢迎查看 noahtao.top 的完整风格指南。本指南定义了网站的设计系统，确保所有页面保持一致的视觉风格。
🎯 设计原则
1. 务实高效
简洁明了，功能优先，避免不必要的装饰。
2. 专业可靠
技术感强，值得信赖，内容准确权威。
3. 温暖友好
不冰冷，有温度，让用户感到舒适。
4. 现代简约
干净利落，不花哨，注重用户体验。
🌈 配色系统
主色调
#1a365d
用于标题、重要按钮、导航高亮
辅助色
#ed8936
用于强调、悬停效果、装饰元素
背景色
#f7fafc
页面背景、卡片间隔
文字色
#2d3748
正文文字、次要标题
📐 排版规范
H1 主标题
用于页面主标题，每个页面只有一个H1。
H2 二级标题
用于主要章节标题。
H3 三级标题
用于子章节标题。
正文文字使用深灰色(#2d3748)，行高1.6，确保良好的可读性。字体使用系统默认的无衬线字体，确保在各种设备上都有良好的显示效果。
🎯 组件示例
按钮
卡片
工具卡片示例
用于展示图片处理工具，包含名称、特点和推荐理由。
表格
📱 响应式设计
网站采用响应式设计，确保在各种设备上都有良好的显示效果：
- 桌面端 (≥1024px): 完整布局，多列展示
- 平板端 (768px-1023px): 适中布局，优化间距
- 手机端 (≤767px): 单列布局，触摸友好
🎨 风格一致性
保持风格一致性是建立品牌认知和用户信任的关键。所有新页面和内容都应遵循本风格指南。
如需更新或调整风格，请确保所有相关页面同步更新。