Brand
The mark, how it is built, and the files IO Patina LLC publishes for use.
The symbol and the primary lockup, drawn from the grid at every size. Both are vector, not an image of one.
Construction
Spokes are drawn all the way around the circle, and each one’s angular width changes with its bearing. Where that width reaches the full pitch, neighbouring spokes meet and the ring goes solid; where it falls to half, they part into the fan. The crescent and the fan are therefore the same object seen at two angles, which is why the transition between them has no seam.
| Measure | Value | Note |
|---|---|---|
| Ring outer diameter | 100 | the grid — every other number is a percentage of it |
| Void diameter | 61.18 | circle-fit residual 0.84px on the reference |
| Void offset | 2.53 left | the void is not concentric, and that is the design |
| Bar width | 12.99 | flush with the ring, top and bottom |
| Bar-to-ring gap | 12.30 | clear space inside the mark |
| Spokes, full circle | 114 ± 3 | pitch 3.10°–3.23° by autocorrelation across four radii; the master is too coarse to count them exactly |
| Spoke width | 50% | of the pitch, out in the open fan |
| Solid arc | 195°–330° | measured; centred just below nine o’clock |
| Overall width | 126.67 | including the fan’s reach past the ring |
Optical sizing
A spoke and its gap need roughly three pixels of arc to read as two things. Rather than draw 114 spokes and let the rasteriser destroy them, the mark carries four cuts. The ring, the off-centre void and the bar-to-ring gap are identical in all four — only detail the size cannot hold is dropped.
All four are drawn here at the same size so the difference is visible. Each is normally seen only at the size it is cut for.
Colour
Every pair below is measured against WCAG 2.2. Three of the kit’s five colours do not reach 4.5:1 on Paper as stated — Stone Gray at 2.81:1, Portal Gold at 1.85:1 and Mist at 1.10:1 — so each is used where it passes and taken down the same hue where it does not. The substitutions are recorded in the design system.
Deep Ink
#0F1114
Headlines, primary buttons, dark ground
16.76:1 on Paper
Paper
#F3F1ED
Page ground
16.76:1 on Deep Ink
Portal Gold
#C8B092
Accent on dark surfaces only
9.08:1 on Deep Ink
Bronze
#7C5F3E
Links and marks on light surfaces
5.22:1 on Paper
Graphite
#4A4C4E
Body copy
7.65:1 on Paper
Stone
#6B6D6B
Micro-labels — the lightest neutral
4.63:1 on Paper
Devices
The mark is a precision object; a page that merely carries it reads as a page with a sticker on it. These four devices are the mark’s own measurements used as page structure, so the identity and the website stop being two objects that happen to share a logo. Every IO Patina property draws from the same set — see the common theme in theme/.
Device 01 · The bar
Marks every section heading. The most recognisable element of the identity, on every page, many times, at no cost.
5px rule · full height of the rail · accent colour
from the 12.99-unit stem
Construction
One rule, not two shapes.
Colour
Six values that carry text.
Device 02 · The spoke rule
One per page, at the page’s primary boundary. Every other divider stays a hairline — a drawn rule only keeps its weight if it is the only one.
pitch 6px · duty 50% · height 10px · fades right
from the fan’s pitch
Device 03 · Metal
A surface, not a highlight. One per page, behind the hero or a dark band, never behind text that has to be read.
bar wash as a 13px page edge · ring wash struck from the top right
from the published gradients
Device 04 · The off-centre void
The layout copies the ring’s asymmetry: the text column is wider than the record column, and the Display cut runs off the page.
columns 1.35 / 1 · the mark bled past the right edge at 16%
from the void’s 2.53-unit offset
Budget per page: one metal surface, one Display cut of the mark, one dark band, and as many bars and spoke rules as the content has sections. Exceeding it is what turns an identity back into decoration.
Typeface
All three ship from this domain as subset woff2. Nothing on the site requests a font from anywhere else, which is also why the content security policy can forbid third-party origins outright.
Ideas, carefully made.
Variable, 100–900. Section headings, navigation, buttons, and everything read as running text. Also the source of the wordmark’s outlines.
Ideas, carefully made.
Page titles and statements, 30–62px. Never below 26px, where the serif stops being a voice and becomes a texture.
Ideas, carefully made.
Eyebrows, record rows, and every digit on the site, so that anything measured reads as measured.
Files
Each is generated from the same geometry module the site draws its header with, so a file and the live mark cannot disagree. All are vector.
Using the mark
Leave at least half the ring’s diameter free on every side. The published files already carry it in their viewBox, so placing them edge to edge is enough.
The crescent flowing into the fan is the mark. A generic ring is a different logo.
Use a published file. The mark is wider than it is tall, and scaling one axis breaks the circle.
The fan cannot resolve at that size and turns to noise. The favicons and app icons already carry the right cut.
Permission
The IO Patina mark and wordmark are trade marks of IO Patina LLC. The files above are published so that anyone writing about or linking to the company can represent it correctly.
They may be used to refer to IO Patina LLC and its products. They may not be used to suggest endorsement, partnership, or affiliation that does not exist, and they may not be incorporated into another organisation’s own marks.
For any other use, or for a lockup this page does not publish, write to legal@iopatina.com.
