Pitch 网站预览
Pitch 网站预览

Pitch

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

页面以近白色为基底,搭配深蓝色文字。字体采用 Eina01、Mark Pro。视觉特点包括胶囊形控件、渐变展示、紧密字距、满幅色块。适合参考的场景:SaaS 产品官网、功能介绍页。

查看原始网站

使用规范

建议采用

  • Signal Violet(#6b53ff)是主要操作按钮与品牌标记的唯一填充色,绝不以其他颜色替代。
  • 所有按钮、徽章及胶囊形元素均使用20px圆角;较大卡片使用26px圆角;输入框和小标签使用6px圆角
  • 所有UI文本使用Eina01字体,字间距设为0.1em——这种宽字间距是系统的核心节奏
  • 将Mark Pro(字重700–800)保留用于42px及以上标题的展示,字间距设为紧致的-0.02em
  • 将首屏渐变linear-gradient(90deg, #5718eb, #ab6ef9)用作满幅区块背景,承载需要最强强调的内容块。
  • 保持卡片内边距为20px,元素间距为20px,以维持标准产品界面的节奏感
  • 仅使用柔和阴影——默认为rgba(0,0,0,0.15) 0px 3px 10px;仅在首屏功能卡片中升级为带紫罗兰色调的深色阴影

建议避免

  • 不要引入新的强调色;Solar Yellow(#ffd02c)与Ember Orange(#ffa000)仅作装饰,绝不用于按钮或状态。
  • 不要在大于28px的展示尺寸下使用Eina01——任何更大尺寸应切换至Mark Pro,以维持宽窄对比的平衡
  • 不要对Eina01应用紧致的负字间距——其0.1em正字间距是UI语调的不可妥协标准
  • 不要在卡片上使用粗边框或硬边线——系统通过柔和阴影和背景对比来传达层级,而非线条
  • 不要在小尺寸下将正文直接置于紫罗兰色首屏渐变上——最小字号为16px白色文本,或将文本移至白色卡片表面
  • 不要将Deep Indigo(#371789)用作按钮填充色;它是文字和渐变用色,而非交互表面色。
  • 不要在同一组件中混合紫色和黄色——二者功能不同(紫色代表操作,黄色代表活力),混合会模糊层级关系