品牌

一条线,一个圆,以及光对金属的影响。

标记、其构建方式以及 IO Patina LLC 发布使用的文件。

符号和主要锁定,从每个尺寸的网格中绘制。两者都是矢量,而不是其中之一的图像。

建筑工程

一种规则,而不是两种形状。

辐条一直围绕圆绘制,每个辐条的角宽度随其方位而变化。当宽度达到全节距时,相邻的辐条会相遇,环会变得坚固;当它下降到一半时,它们就会分成扇形。因此,从两个角度看,新月和扇子是同一个物体,这就是为什么它们之间的过渡没有接缝。

帽格-环外径=100单位
测量价值注意事项
环外径 100 网格——所有其他数字都是它的百分比
空隙直径 61.18 参考上的圆拟合残差 0.84px
无效偏移 2.53 左 虚空不是同心的,这就是设计
条形宽度 12.99 与环、顶部和底部齐平
条与环间隙 12.30 标记内的空白区域
辐条,全圆 114 ± 3 通过四个半径上的自相关来计算螺距 3.10°–3.23°;师傅太粗了,数不清
辐条宽度 50% 球场外,在露天球迷中
实心圆弧 195°–330° 测量;以九点钟以下为中心
总宽度 126.67 包括球迷越过擂台的距离

光学定径

随着标记变小,扇形也变细。

辐条及其间隙大约需要三个像素的弧线才能读取为两个物体。该标记不是绘制 114 辐条并让光栅化器破坏它们,而是带有四个切口。环、偏心空隙和杆到环的间隙在所有四个中都是相同的——只有尺寸无法容纳的细节被删除。

Display 上限 90px 及以上 · 所有 114 辐条
Medium 帽 40–89px · 每三个辐条加宽 — 38 绘制
Quiet 低于上限 40px · 没有粉丝,真实的比例——网站标题
Favicon 16 和 32px 图标 · 没有风扇,条形扩大到 17.5,因此它落在整个像素上

所有四个都以相同的尺寸绘制,因此差异是可见的。通常,每件产品都只能按其切割尺寸来观察。

颜色

六个携带文本的值。

下面的每一对都是根据 WCAG 2.2 进行测量的。该套件的五种颜色中的三种在纸上达不到规定的4.5:1——石灰色为2.81:1,门户金为1.85:1,雾色为1.10:1——因此每种颜色都在它通过的地方使用,在不通过的地方采用相同的色调。替换记录在设计系统中。

  • Deep Ink

    #0F1114

    标题、主要按钮、深色背景

    16.76:1 上 Paper

  • Paper

    #F3F1ED

    页面接地

    16.76:1 上 Deep Ink

  • Portal Gold

    #C8B092

    仅在深色表面上强调

    9.08:1 上 Deep Ink

  • Bronze

    #7C5F3E

    浅色表面上的链接和标记

    5.22:1 上 Paper

  • Graphite

    #4A4C4E

    正文

    7.65:1 上 Paper

  • Stone

    #6B6D6B

    微标签——最轻的中性色

    4.63:1 上 Paper

设备

四个装置,取自标记。

标记是精密物体;仅仅带有它的页面看起来就像是带有贴纸的页面。这四种设备是用作页面结构的标记自己的尺寸,因此身份和网站不再是碰巧共享徽标的两个对象。每个 IO Patina 属性来自同一组 - 请参阅中的共同主题 主题/.

设备 01 · 酒吧

标记每个部分的标题。身份中最容易识别的元素,在每一页上多次出现,而且免费。

5px规则·导轨全高·强调色

来自 12.99 单元阀杆

建筑工程

一种规则,而不是两种形状。

颜色

六个携带文本的值。

设备 02 · 辐条规则

每页一个,位于页面的主要边界。其他所有的分隔线都只有一根细线——一条划定的规则只有在它是唯一的情况下才会保持其重量。

间距 6px · 占空比 50% · 高度 10px · 向右淡出

来自 球迷的球场



设备 03 · 金属

一个表面,而不是一个亮点。每页一个,位于英雄或暗带后面,绝不位于必须阅读的文本后面。

条形清洗为 13px 页面边缘 · 环形清洗从右上角敲击

来自 已发布的梯度

设备 04 · 偏心空洞

布局复制了环的不对称性:文本列比记录列宽,并且显示剪切超出了页面。

列 1.35 / 1 · 标记在 16% 处超出右边缘

来自 虚空的 2.53 单位偏移量

每页预算:一个金属表面、一个标记的显示切口、一个暗带以及与内容部分一样多的条形和辐条规则。超越它才能将身份重新变成装饰。

字体

三张脸,自托管。

所有三个都作为子集 woff2 从此域发布。网站上的任何内容都不会从其他地方请求字体,这也是内容安全策略可以完全禁止第三方来源的原因。

Archivo 界面、标题和正文

Ideas, carefully made.

变量,100–900。章节标题、导航、按钮和所有内容都以运行文本的形式读取。也是文字商标轮廓的来源。

Source Serif 4 仅显示

Ideas, carefully made.

页面标题和声明,30–62px。永远不要低于 26px,衬线不再是声音而是变成纹理。

Martian Mono 标签和数据

Ideas, carefully made.

眉毛、记录行以及站点上的每个数字,以便任何测量的内容都按测量值读取。

文件

已发布的徽标文件。

每个都是从站点绘制其标题的同一几何模块生成的,因此文件和实时标记不会不一致。都是矢量。

使用标记

保持空间畅通

每侧至少留出环直径一半的空间。已发布的文件已将其包含在其 viewBox 中,因此将它们边对边放置就足够了。

不要将环重新绘制为普通圆形

流入扇内的月牙就是标记。通用环是一个不同的标志。

请勿重新拉伸、旋转或重新着色

使用已发布的文件。标记的宽度大于高度,缩放一个轴会破坏圆圈。

下面关于56px,使用一个图标文件

风扇无法解决该尺寸的问题,并且会产生噪音。网站图标和应用程序图标已经进行了正确的剪辑。

许可