Vivid Spain 网站预览
Vivid Spain 网站预览

Vivid Spain

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

页面以白色为基底,搭配深蓝色文字。局部操作控件以紫色强调。字体采用 Satoshi。视觉特点包括胶囊形控件、渐变展示、紧密字距、分屏构图。适合参考的场景:金融产品官网、财务服务介绍页。

查看原始网站

使用规范

建议采用

  • 全局导航和首屏中的所有按钮、切换和胶囊控件,都使用 100px 圆角。完整圆润胶囊是系统形态标志。
  • 展示标题使用 Satoshi,字号为 52-60px,字重为 700,负字间距为 -1.0 至 -1.26px,形成高级紧压外观。
  • 白底主要 CTA 填充 Vivid Violet #7d33f6,绝不在紫罗兰背景上使用紫罗兰文字,也绝不用它设置正文。
  • 多列卡片网格中,背景交替使用 Lilac Veil #f4edff 和 Orchid Whisper #e9d4fb,无需边框即可形成节奏。
  • 所有卡片内按钮和表单控件使用 10px 圆角,区别于全局导航中的 100px 胶囊按钮。
  • 统一阴影 rgba(0,0,0,0.08) 0px 8px 32px,只用于漂浮顶部导航;其他表面全部无阴影。
  • 所有次要文字保持 12-14px 和 Slate #79797f,绝不用 Slate 设置主要标题或交互元素。

建议避免

  • 功能卡片或定价卡片不要添加边框。粉彩背景填充本身定义卡片边界。
  • 不要使用多种彩色强调。Vivid Violet 是唯一高饱和色,Periwinkle Glow 是唯一辅助色调,而且只用于弱化链接。
  • 全局导航中的按钮不要采用方角或 8px 圆角。导航和首屏 CTA 必须使用 100px 胶囊。
  • 除顶部导航条外,卡片、按钮或任何表面都不要添加阴影。
  • 标题或正文不要使用正字间距。正值只用于 10-12px 微型或全大写标签。
  • 不要引入第二种字体。Satoshi 从 10px 图注到 60px 展示标题,承担全部内容。
  • 文字不要使用原始黑色 #000000。标题采用 Onyx #24282d,正文采用 Graphite #333333,保持冷底调中性色系统。