Ecosia

如同葱郁的搜索林间空地:白色画布界面中,唯一的青柠绿强调和满幅叶片摄影,是仅有的彩色声音。
Ecosia将自己定位为葱郁的搜索引擎:干净白色画布界面中,唯一鲜亮青柠绿强调(#d7eb80)在其余单色系统上承担品牌仅有的彩色标点。首屏是一张满幅自然照片,树叶覆盖的背景将搜索栏重新呈现为林中空地;其他所有分区都回到留白、温暖米白卡片和Founders Grotesk标题。组件柔和圆润,卡片圆角20px,按钮采用9999px胶囊形,分区间距宽松为40-48px,唯一的半透明深色统计叠加层悬浮于首屏照片上方。整体节奏是一页自信、一页安静,再一页带彩色环形图;系统克制地使用色彩,让青柠强调与自然摄影承担情感分量。
查看原始网站使用规范
建议采用
- #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;略为提亮的黑色保留了画布温暖、纸张般的氛围。