Popcorn 网站预览
Popcorn 网站预览

Popcorn

近白色基底、渐变展示与紧密字距。

页面以近白色为基底，搭配灰色文字。字体采用 Untitled Serif、Messina Sans。视觉特点包括渐变展示、紧密字距、衬线字形、胶囊形控件。适合参考的场景：SaaS 产品官网、功能介绍页。

查看原始网站

使用规范

建议采用

  • 30px及以上展示文字采用Untitled Serif字重400；首屏区域标题不要使用无衬线。
  • 每个交互控件、徽章和导航元素采用100px border-radius，保持胶囊形一致性。
  • 84px展示字号的letter-spacing为-0.0300em，并随字号缩小同比调整；紧字间距使衬线显得自信，而非装饰性。
  • 配色限制为文字用Warm Graphite (#393737)、背景用Cream Canvas (#f7f7f7)；Paper White (#ffffff)仅作为抬升卡片表面。
  • 卡片和徽章使用唯一柔和阴影rgba(0,0,0,0.05) 0 4px 20px；系统中不存在其他阴影值。
  • 首屏区域和分区标题居中；正文和常见问题项左对齐。
  • 仅在从主要内容切换到社会证明或次级内容时，使用Lilac Field (#f3f0f8)分区区域打断暖奶油画布。

建议避免

  • 文字不要使用纯黑#000000；Warm Graphite (#393737)是最深中性色，纯黑会破坏暖纸隐喻。
  • CTA、链接或文字不要使用饱和蓝、红、绿等品牌色；系统是单色的，彩色按钮会像另一个产品。
  • 按钮、徽章和导航元素不要使用0–6px直角或小圆角；胶囊是交互表面唯一形状语言。
  • 不要堆叠多重阴影或使用彩色投影；5%黑色柔影是唯一抬升基础元素。
  • Untitled Serif不要用于20px以下；它会失去编辑分量，在正文尺度难以阅读。
  • 按钮、徽章和卡片等UI控件不要引入渐变；圆锥渐变仅留给产品图像后方的装饰光晕。
  • 正文行高不要低于1.4；暖奶油画布和衬线展示需要呼吸空间，紧正文会压垮编辑感。

相似设计语言