Ayaka B. Ito 网站预览
Ayaka B. Ito 网站预览

Ayaka B. Ito

白色基底、大字排版与细线分隔。

页面以白色为基底,搭配近黑色文字。字体采用 Hanae、Open Sans。视觉特点包括大字排版、细线分隔、错落拼贴、衬线字形。适合参考的场景:设计产品官网、作品展示页。

查看原始网站

使用规范

建议采用

  • 所有编辑与结构类文字均使用 Hanae —— 这个定制衬线体即为品牌本身。Open Sans 仅作为辅助角色出现,从不作为关键页面的主字体。
  • 让板块背景为全页填充的色彩平面(如 Ember Rust、Ochre、Deep Teal 等),以标示项目边界——绝不使用卡片、阴影或边框来分隔板块。
  • 对展示标题实施激进的正字间距:62–68px 时为 ~0.4em,随字号减小至 25px 时为 ~0.1em,体文本尺寸时转为负值。这种字间距的递变是该字体呈现编辑风格的关键。
  • 使用 Blush(#ddbad0)作为所有规则、分隔线及交互轮廓的默认细线边框颜色——它融入温暖色调,与所有大地色底面形成和谐呼应。
  • 所有交互元素(按钮、输入框、语言切换)的圆角统一设为 120–180px —— 胶囊形态强化了系统的柔软、温暖、触感特征。
  • 保持导航与UI元素的极简性:仅保留裸文本链接、极小的括号式标签系统,最多一个胶囊形切换控件。让排版与色彩平面承担层级关系。
  • 为 Hanae 启用 dlig、liga 和 swsh 字体特性——浮线与可选连字赋予了该字体特有的铭文风格。

建议避免

  • 不要添加阴影、卡片抬升或圆角面板来分隔内容——层级关系来自全页色彩变化与字体大小的对比,而非表面浮起。
  • 不要将 Blush(#ddbad0)或任何有色彩的色值用作填充按钮背景——该系统没有填充型行动号召(CTA)模式;操作仅以裸文本或轮廓胶囊形式呈现。
  • 不要在 Hanae 字重超过 500 时加粗——该衬线体的权威性来自其字重与极端正字间距的结合,而非厚重字重本身。
  • 不要将正文使用无衬线字体——即使是次要文本也应保持在 Hanae 中,以维持编辑语感。Open Sans 仅作为罕见的辅助,而非替代。
  • 不要将长段落正文居中对齐——首屏引言采用宽字间距作为风格,但多行阅读文本应保持左对齐以保证可读性。
  • 不要引入冷灰或纯中性灰作为背景色——色彩调性保持温暖(Bone White → Linen Mist → Paper Cream)以契合亚麻纸的质感氛围。
  • 不要裁剪或圆角杂志页缩略图——应以原始矩形块形式呈现,可能轻微旋转重叠,以保留印刷品的实体感。