ilovecreatives 网站预览
ilovecreatives 网站预览

ilovecreatives

白色基底、胶囊形控件与圆角卡片。

页面以白色为基底，搭配近黑色文字。字体采用 Suisse Regular、Romana。视觉特点包括胶囊形控件、圆角卡片、紧密字距、摄影展示。适合参考的场景：音视频产品介绍页、媒体内容展示页。

查看原始网站

使用规范

建议采用

  • 所有交互按钮都采用450px border-radius，所有标签和徽章都采用300px；胶囊形是系统中唯一的形状。
  • 所有正文和UI文字采用Suisse Regular；Romana只保留给20px+的展示字号和品牌文字标志。
  • 整个字体尺度都采用-0.02em至-0.06em letter-spacing，字号越大越收紧，展示文字为-0.06em，正文为-0.02em。
  • 所有图像都以20px border-radius呈现，不设例外；任何照片或插画都不采用直角。
  • 创意人士的档案照片呈现为黑白；全彩摄影只留给首屏和课程卡片图像。
  • 1px的Ink Black（#222222）边框是主要结构分隔和按钮轮廓；不用阴影或填充制造深度。
  • #e1ea99 Risograph Lime只作为偶尔出现的区块或标签上的稀疏表面点缀，绝不作为文字颜色或主要操作色。

建议避免

  • 绝不要引入蓝、红、紫等彩色强调；系统刻意而强烈地保持单色。
  • 绝不要使用带鲜亮实色填充的CTA按钮；所有按钮都是无填充或描边胶囊形。
  • 任何组件都绝不要采用投影或抬升辉光；平面感就是设计理念。
  • Romana绝不要低于20px；它只用于展示，在正文字号下会失去个性。
  • 图像圆角绝不要小于8px或大于20px；圆角词汇有严格范围。
  • 正文绝不要采用#000000；小字号使用#222222获得更柔和的对比，#000000只留给真正的纯黑强调。
  • 绝不要给满幅首屏照片的边缘着色；让它一直铺到视口边缘，不加内边距或框架。

相似设计语言