Design Full-Time 网站预览
Design Full-Time 网站预览

Design Full-Time

近黑色基底、渐变展示与细线分隔。

页面以近黑色为基底,搭配白色文字。字体采用 Inter。视觉特点包括渐变展示、细线分隔、扁平表面、网格布局。适合参考的场景:专题展示页、项目介绍页。

查看原始网站

使用规范

建议采用

  • 以 #000000 作为页面画布,所有非促销内容保持无彩色——让温暖渐变横幅成为页面中唯一的彩色事件。
  • linear-gradient(90deg, #ff8a00, #fa3a19) 仅用于促销 CTA 按钮;不要用于导航、图标或课程卡片。
  • 所有标题使用 Inter 700/800,正文使用 Inter 400/600——绝不引入第二套字体家族。
  • 在 #111111 背景上,用 1px #343434 边框定义卡片边框;不使用阴影,依赖扁平色彩层级来体现层级。
  • 视频卡片内边距设为 16px,保持缩略图、标题与分类标签之间的间距为 8px。
  • 将字级上限控制在 24px——让视频缩略图和渐变横幅承担视觉尺度,而非使用过大的标题。
  • 交互文字和标题使用 #ffffff,元数据和次要内容使用 #a0a0a0 / #888888。

建议避免

  • 不要引入任何蓝色、绿色或紫色强调色——品牌是双色系统(单色+温暖渐变),额外色彩会削弱聚光灯效果。
  • 不要将温暖渐变应用于正文、图标或边框——仅保留用于促销横幅表面及其 CTA 按钮。
  • 不要使用阴影或厚重圆角(>=12px);系统刻意保持扁平,圆角为 4-6px,搭配细线边框。
  • 不要设置标题大于 24px;过大的显示文字破坏了紧凑、教师主导的氛围。
  • 不要将 #111111 用作主要操作按钮背景——该角色专属属于温暖渐变的 CTA。
  • 不要引入第二套字体、自定义显示字体或衬线字体——Inter 唯一承载品牌所有字重。
  • 不要将渐变横幅置于卡片内或重复列表中;它必须保持为单一全宽的转化事件。