Ortto 网站预览
Ortto 网站预览

Ortto

午夜纸上蓝图

Ortto 读作产品品质说明:近黑色首屏区域过渡到暖白色编辑区,由单一鲜明的蓝色贯穿,是整个单色系统中唯一的色彩表达。展示标题采用人文主义衬线字体(Ivar Text)在 64–72px 字号并带有负字间距,正文与界面则使用精确的无衬线字体(Haas Grot Text)——这种搭配使营销文案具备印刷新闻的庄重感,同时产品界面呈现出控制面板般的中立性。按钮为胶囊形且填充蓝色,产品截图浮于六层柔和阴影之上,嵌入的应用截图被视为一级内容而非装饰。整体效果是宛如产品手册的营销页面——自信、具体,几乎全为黑白,仅以一道电蓝色点缀。

查看原始网站

使用规范

建议采用

  • #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——整个字体层级中字间距始终紧致或为负值