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