Chantlings 网站预览
Chantlings 网站预览

Chantlings

近黑色基底、细线分隔与衬线字形。

页面以近黑色为基底,搭配白色文字。字体采用 Mija。视觉特点包括细线分隔、衬线字形、分屏构图、居中构图。适合参考的场景:专题展示页、项目介绍页。

查看原始网站

使用规范

建议采用

  • 任何展示或文字标志尺度的文字都采用Mija 100字重;细线笔画是品牌语气,而非可替换的风格选择。
  • 页面背景设为#222222,表面叠层几乎不可见;卡片以1px的#333333细线边框界定,绝不通过背景色变化界定。
  • #ffaa20和#ff8800只留给黑暗中的生命信号,包括App Store徽章、角色眼睛和一个填充按钮;绝不要用于大面积填充、背景或装饰。
  • 桌面端页面横向内边距采用100–108px,分区之间以65–100px纵向间隙呼吸;密度必须具有仪式感,而非追求效率。
  • 胶囊按钮采用50px圆角,其余全部0px;几何形态应像一片锐利矩形表面之中,唯一圆润的操作。
  • 汉堡菜单只是在深色画布上的两条白线,不加界面装饰;顶部栏是低语,而非横幅。
  • 手机模型图应是没有屏幕内容的空轮廓;产品被暗示,而非演示。

建议避免

  • 不要添加投影、辉光或任何抬升效果;系统通过没有抬升来定义自己,阴影会破坏使琥珀强调发光的平面感。
  • 文字标志或标题不要使用Mija之外的任何字体;任何字重的系统字体都会像另一款产品。
  • 不要引入额外强调色;温暖琥珀是唯一彩色音符,添加蓝、绿或红会击碎烛光调色板。
  • 不要采用浅色主题变体或白色背景;虚空就是品牌,白色页面会完全像另一款产品。
  • 图标不要采用填充或多色处理;系统图标只采用1px石墨色(#333333)或白色(#ffffff)描边。
  • 桌面端横向内边距不要收紧到80px以下;100–196px呼吸空间让设计亲密而非拥挤。
  • App Store徽章的琥珀边框不要用于其他任何元素;它刻意是系统唯一的彩色描边元素。