Ecosia 网站预览
Ecosia 网站预览

Ecosia

白色基底、大幅摄影展示与胶囊形控件。

页面以白色为基底,搭配深灰色文字。字体采用 Inter、Founders Grotesk。视觉特点包括大幅摄影展示、胶囊形控件、分屏构图、居中构图。适合参考的场景:摄影作品集、视觉内容展示页。

查看原始网站

使用规范

建议采用

  • #d7eb80 Lime Canopy是整个界面唯一的彩色强调;它是品牌标志性特征,若被多种强调色稀释,就会完全失去意义。
  • 所有交互按钮都设为9999px胶囊圆角;胶囊形是定义系统的组件几何,统一用于按钮、搜索和小标签。
  • 卡片和图像圆角设为20px;这是系统唯一的大圆角,让表面柔和而不显冷静机械。
  • 分区间距设为80px,即10×基础单位,保持舒适且有呼吸感的页面节奏;系统重视留白胜过信息密度。
  • 所有分区标题和首屏文字都采用Founders Grotesk 36-54px、600-700字重,配紧密的1.10-1.15行高。
  • 展示层级以下的所有文字,包括正文、按钮、输入框、标签、徽章和页脚,都采用Inter;让两种字体建立清晰的编辑式层级。
  • 首屏以满幅自然照片为锚点,叠放带33px模糊阴影的悬浮统计卡片;这是页面的情感中心。

建议避免

  • 主要操作按钮的填充绝不要使用#d7eb80之外的颜色;次级按钮必须采用#333333描边,而非另一种彩色填充。
  • 卡片和图像避免直角或低于10px的圆角;系统坚持20px的柔和感。
  • 正文或UI标签不要使用Founders Grotesk;它只留给24px+展示语境,才能感受到编辑式个性。
  • 避免添加渐变;系统刻意保持平面,全部视觉深度来自摄影、唯一的阴影设计变量和卡片表面色阶。
  • 页面不要叠放超过一个深色或半透明表面;首屏照片上的深色统计叠加层,是系统唯一依靠阴影的抬升。
  • 避免密集信息布局;舒适间距意味着40-80px分区间隙,而非16-24px。
  • 绝不要以#000000替代#333333;略为提亮的黑色保留了画布温暖、纸张般的氛围。