Angellist 网站预览
Angellist 网站预览

Angellist

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

页面以浅色为基底,搭配近黑色文字。字体采用 angellistDisplay、angellist。视觉特点包括胶囊形控件、渐变展示、大字排版、分屏构图。适合参考的场景:金融产品官网、财务服务介绍页。

查看原始网站

使用规范

建议采用

  • 当展示字体承载意义时,最小字号设为60px——任何更小的字号都会削弱专题刊物的语调。
  • 所有按钮、标签、徽章和图像卡片均使用9999px半径。胶囊形是形状语言。
  • 向橄榄色→紫色线性渐变仅应用于页面标题。绝不用于正文、按钮或背景。
  • 搭配Vellum Lavender高亮与Inkwell Teal文字——对比度达8:1以上,绝不因背景变浅而丢失。
  • 使用angellist的550字重用于标签和按钮文字;保留500字重用于行内强调。绝不使用700以上——系统保持单一语调。
  • 正文在标准阅读区域保持18px。UI组件的最小字号为16px。
  • 用水平带状堆叠分隔主要区块——让配色方案作为独立构成呼吸。

建议避免

  • 不要在深色背景下将展示字体设为纯Paper White——渐变才是展示字体的颜色,而非后备方案。
  • 不要引入第二个强调色。该系统为单色+薰衣草色;任何其他色彩都会破坏年度报告的调性。
  • 不要在交互元素上使用2px或4px圆角——这些值仅用于薰衣草色文字高亮。
  • 不要对正文进行居中对齐。该系统为非对称且具有专题刊物特征,优先左侧栏。
  • 不要为卡片或按钮添加阴影。层级感通过表面色调变化(鼠尾草绿→Paper White→Bone)实现,绝不用模糊处理。
  • 不要在导航CTA上打破9999px的胶囊形,即使在桌面尺寸下。圆润度随布局变化而变化。
  • 在正文字号下不要使用橄榄色→紫色渐变——在小于60px时会显得浑浊。