Playful 网站预览
Playful 网站预览

Playful

暖白色基底、胶囊形控件与分屏构图。

页面以暖白色为基底,搭配近黑色文字。局部操作控件以粉色强调。字体采用 Inter、Arial。视觉特点包括胶囊形控件、分屏构图、渐变展示、宽松留白。适合参考的场景:软件产品首页、服务说明页。

查看原始网站

使用规范

建议采用

  • 仅将亮洋红(#ff2e95)用于主要CTA、标志和链接高亮——绝不可作为大面积填充、图标背景或超过一个区块的装饰色块。
  • 将标题显示设置为 Inter 700/900 斜体,字号70–79px,行高1.00,字间距-0.002em——这种斜体在大字号下的呈现是品牌的排版标志。
  • 卡片和图块使用44px圆角,搭配双层阴影堆叠(0 32px 80px rgba(0,0,0,0.22) + 0 2px 8px rgba(0,0,0,0.08))
  • 以燕麦底色(#f6f2ee)作为页面背景——切勿将全屏背景切换为纯白色
  • 每个邮箱输入框必须搭配一个胶囊形CTA,置于单个白色胶囊容器(99px半径)内,以形成一个整体复合单元
  • 首屏内容采用垂直堆叠布局——标题、副标题和CTA依次排列,各主要区块之间保持充足的113px区块间距
  • 图标保持线条描边,使用石墨灰(#848383),线宽1.5–2px,绝不使用填充色

建议避免

  • 显示标题绝不可使用直立(非斜体)700以上字重——斜体的倾斜感才是Playful体现编辑风格而非企业风格的关键
  • 绝不引入额外的强调色——蓝色、绿色、橙色、紫色均不在系统内;亮洋红是唯一的色彩表达
  • 绝不将纯黑(#000000)置于纯白(#ffffff)背景上用于正文,除非确认——应使用#111或#0f172a以降低在温暖底色上的刺眼感
  • 绝不使用锐利的0–4px圆角应用于卡片或按钮——16/44/99px的圆角尺度是其亲和与柔软感的核心部分
  • 单屏上绝不叠加超过两种字重——通常为400正文 + 700/900斜体显示,辅以500/600用于副标题
  • 绝不将白色卡片直接置于白色背景上——必须将纸白(Paper White)置于燕麦底色(Oat Canvas)上,使卡片看起来更突出
  • 绝不为文本、按钮或图标添加阴影——阴影仅用于卡片层级的提升