Paste 网站预览
Paste 网站预览

Paste

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

页面以白色为基底,搭配近黑色文字。局部操作控件以蓝色强调。字体采用 Inter。视觉特点包括胶囊形控件、渐变展示、紧密字距、居中构图。适合参考的场景:摄影作品集、视觉内容展示页。

查看原始网站

使用规范

建议采用

  • 所有按钮、徽章及胶囊形元素的边框半径统一使用100px——此为不可妥协的规则,定义了视觉身份
  • 交替使用#ffffff与#f5f5f7背景色,以创造节奏感,同时避免可见分隔线
  • 将显示标题(40px及以上)设置为system-ui字重600-700,字间距为负值(-0.7px至-1.04px)——大字号时需保持紧密字间距
  • 仅将琥珀橙色渐变(rgb(240,100,19) → rgb(254,171,48))用于品牌标志和偶尔的标题强调,绝不可用于背景或大面积表面
  • 所有CTA按钮必须使用#0088ff配白色文字——温暖的品牌与冷静的CTA温度对比是核心交互模式
  • 使用#6e6e73或#ababb0作为次要/正文文字颜色,以维持高对比标题与低对比正文的层级关系
  • 为提升卡片元素添加柔和的环境阴影(rgba(16,16,16,0.1) 0px 0px 30px)——禁止使用方向性或锐利的阴影

建议避免

  • 绝不可将琥珀橙色渐变用作按钮填充——该渐变仅保留用于标志和装饰性标题强调
  • 绝不可将尖角容器(0px半径)与胶囊半径系统混合使用——任何容器的最小半径为8px,卡片类元素建议使用16-20px
  • 绝不可在单个CTA场景中使用超过一个色彩强调色(#0088ff)——四个类别色(#34c759、#cb30e0、#ff383c)仅用于指示,不用于按钮
  • 绝不可将正文文字设置为700字重——700字重仅用于40px以上的标题;正文文字保持在400-500字重范围内
  • 绝不可在区块之间添加可见的边线——应通过背景色切换(#ffffff ↔ #f5f5f7)和间距实现
  • 绝不可使用方向性或硬边阴影——系统中唯一的阴影是10%不透明度的30px模糊环境阴影
  • 绝不可在标题中使用正字间距——显示文本始终使用负字间距;正字间距仅用于小字号(14-18px)标签