Ortto 网站预览
Ortto 网站预览

Ortto

白色基底、产品图像展示与胶囊形控件。

页面以白色为基底,搭配近黑色文字。字体采用 Ivar Text、Haas Grot Text R。视觉特点包括产品图像展示、胶囊形控件、紧密字距、衬线字形。适合参考的场景:软件产品首页、服务说明页。

查看原始网站

使用规范

建议采用

  • #1070ff Electric Blue仅用于主要操作、激活状态、眉题标签和公告带,没有其他颜色承担功能角色。
  • 将 Ivar Text 衬线字体在 48–72px 与 Haas Grot Text 无衬线字体在 14–16px 配对;衬线与无衬线的对比是系统的标志性排版手法
  • 设置展示标题的负字间距(-0.26 至 -0.48px)和紧密的 1.0 行高,使衬线字体显得锋利、有编辑感,而非空泛
  • 所有按钮和标签均使用 40px 的边距半径,以保持每个交互元素的胶囊形态语言
  • 仅将六层柔和阴影堆叠应用于产品截图卡片和大尺寸浮层表面——绝不应用于按钮、文本或小型 UI 元素
  • 交替使用 Midnight Ink #14171f 面板与 Paper White #ffffff 区域,以形成深色到浅色的编辑节奏
  • 正文保持 16px Haas Grot Text 字号,行高 1.38,字间距 -0.34px,实现紧凑且易读的密度

建议避免

  • 不得引入额外色彩——该系统为单色加唯一蓝色,第二色调将破坏规范
  • 不得在正文、UI标签或导航中使用 Ivar Text——衬线字体仅限于 20px 及以上,绝不可用于功能文本字号
  • 不得使用方形或轻微圆角按钮——所有按钮均为 40px 半径的胶囊形,锐角代表不同产品
  • 不得将柔和阴影应用于文本、图标或小型元素——该效果仅限于大尺寸浮层表面,小尺寸下会显得模糊
  • 不得在深色 Midnight Ink 背景上使用蓝色强调文本而未经对比测试——深色面板的正文文本应使用 #ffffff
  • 不得以满幅彩色区块或装饰性渐变破坏编辑-印刷节奏——色彩仅作为小范围的功能性点缀出现
  • 任何文本的字间距不得大于 0.25px——整个字体层级中字间距始终紧致或为负值