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