Glyphy 网站预览
Glyphy 网站预览

Glyphy

暖白色基底、大字排版与网格布局。

页面以暖白色为基底,搭配近黑色文字。字体采用 Arial、Neue Machina。视觉特点包括大字排版、网格布局、细线分隔。适合参考的场景:设计产品官网、作品展示页。

查看原始网站

使用规范

建议采用

  • 五种日落色严格按Amber Pulse → Ember Glow → Signal Red → Merlot Depth → Plum Shadow的顺序堆为满宽分类横带;不要重排或替换色相。
  • 首屏文字标志和任何64px+展示标题都使用Neue Machina 120px和0.75行高;压缩行高使其具有纪念碑感。
  • 每个英文分区标题都配微小Pixel M Plus日文眉题,字号12-14px,位于标题上方4-8px。
  • 所有胶囊按钮采用28px border-radius,所有卡片、导航和正文容器14px;两种圆角就是唯一的圆润语言。
  • 卡片内边距设为横向27px、纵向24-40px,保持宽松而不紧迫,匹配宽敞密度。
  • 符号网格单元通过1px的Driftwood(#c7c3b4)细线分隔,形成连续网格;绝不要添加会破坏样本页感的卡片容器或间隙。
  • 所有卡片和按钮轮廓采用14px圆角和1px的Ink边框;保持平面,没有阴影,填充仅使用奶油画布或五种横带色。

建议避免

  • 不要添加投影、抬升或模糊效果;设计刻意保持平面,只依靠细线和色带分隔。
  • 不要引入五色日落调色板之外的额外彩色;网站99%无彩色,彩色只作为这些满宽分类条纹出现。
  • 超过40px的展示字号不要使用System85或Arial;Neue Machina承担全部64px+文字,在展示字号中混用字体会破坏纪念碑感。
  • 卡片圆角只采用14px;28px会像按钮,0px则与胶囊按钮语言冲突。
  • 页面画布只采用Buttercream(#fef9e6),任何其他背景色,即使“白色”,都会破坏暖调系统。
  • 分类横带内容不要居中;左对齐名称加右对齐胶囊按钮,是标志性节奏。
  • 正文行高不要高于1.2,展示文字不要高于1.0;紧密字间距是视觉身份的一部分。