Busuu 网站预览
Busuu 网站预览

Busuu

白色基底、胶囊形控件与渐变展示。

页面以白色为基底,搭配深青色文字。局部操作控件以蓝色强调。字体采用 Nista。视觉特点包括胶囊形控件、渐变展示、分屏构图。适合参考的场景:专题展示页、项目介绍页。

查看原始网站

使用规范

建议采用

  • 每屏使用青绿色胶囊按钮(#11ee92填充,45px半径)作为唯一主要操作——绝不引入第二个色彩操作色。
  • 当需要营造充满活力的落地时刻时,所有满幅填充的首屏或横幅必须采用靛蓝到天空蓝的线性渐变(90deg,#3b1e9 → #5a3cc4 → #3a6ef0)。
  • 页面背景设为#f2f7fd,卡片浮动于#ffffff之上,以维持冷静、平和的蓝调工作空间氛围。
  • 在展示文本中使用Nista 800字重(36-40px),在正文使用Nista 400字重(14-16px)——粗体与常规体的对比是系统的语调核心。
  • 所有语言或分类选项均需置于圆形容器中(圆角半径9999px),并添加1px阴影(rgba(0,0,0,0.1) 0px 1px 2px)——圆形是系统的标志性形状。
  • 仅在品牌展示场景(如标识、链接、导航强调)中使用#116eee——绝不可作为操作背景填充使用。
  • 卡片使用20px内边距,区块间间距为64px,元素间间距为10-20px,以维持舒适、透气的节奏感。

建议避免

  • 除作为主要填充操作按钮外,绝不使用青绿色(#11ee92)——它必须保持稀有,以保留其冲击力。
  • 不要叠加多个阴影或使用高层级的堆叠效果——系统刻意保持扁平,仅通过单层1px阴影作为最深的深度提示。
  • 不要引入第二个品牌蓝色或替换#116eee——信号蓝是唯一具有品牌意义的蓝色。
  • 主要控件不要使用锐角——按钮必须为45px胶囊形,标签必须为圆形,卡片必须为16px或更圆润。
  • 长文本内容绝不使用纯黑色(#000000)——阅读舒适度应使用#252b2f深灰;黑色仅用于图标和插画线条。
  • 除信任徽章星级外,绝不使用黄色(#ffcf00)——该色仅用于评分语境。
  • 不要用标准摄影、企业风渐变或密集数据表格破坏插画式、活泼的调性——该系统以角色为核心,而非以图表为核心。