Set, not drawn
The primary mark is typographic. It is Alliance No 1 with two weights, one colour change and a single clip — which means it can be set at any size, in any colour, in live text, without ever needing an asset.
The wordmark
The descriptor is mono, uppercase, tracked at 0.14em, separated by a vertical hairline and set in --dim. It is chrome sitting beside the mark, not part of it — and it is the first thing dropped, at 900px.
Construction
--text; MRO at weight 400 in --cyan. That weight step is the whole hierarchy — no size change, no space between the words.-0.03em across the lockup, relaxed to -0.01em on MRO. The heavier weight needs marginally more room or it sets tighter than the word before it.align-items: baseline, never center. MRO is a heavier span with no descenders, so centring each flex item by its own box height lifts it visibly off the line..mark-j { clip-path: inset(0 0 8% 0) }. Alliance's J has a long descending tail that drops the whole lockup and pushes the nav band out of its 64px. Clipping 8% off the foot squares it to the baseline. It is the one construction detail that is not obvious from looking at it.<a href="/" class="wordmark">
<span class="mark-j">J</span>ourney<span class="mark-name">MRO</span>
</a>
.wordmark {
display: flex;
align-items: baseline; /* not center — see above */
gap: 0;
font-family: var(--font-heading);
font-weight: 300;
font-size: 1.54rem;
letter-spacing: -0.03em;
color: var(--text);
}
.wordmark .mark-j { display: inline-block; clip-path: inset(0 0 8% 0); }
.wordmark .mark-name { font-weight: 400; color: var(--cyan); letter-spacing: -0.01em; }Sizes & variants
On the accent, or on any single-colour reproduction — an embroidery, a stamp, a fax of a purchase order — the mark knocks out entirely to --bg. The weight step still carries it; the colour change was never load-bearing.
Clear space
The clear space is the cap height of the J on every side. In the nav that resolves to the gutter on the outside and 1.6rem to the first nav item — which is why the nav's gap is what it is.
Drawn marks
Three vector assets exist alongside the typographic wordmark. They are for places where live text will not do — a favicon, an email signature, a document header rendered by something that does not have the font.
Favicon
A single J on --panel-2, set rather than drawn, so it stays in step with the wordmark. Twelve lines of SVG and no raster fallback beyond the .ico.
16
32
64
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
<rect width="128" height="128" fill="#0f172a"/>
<text x="64" y="66" fill="#f8fafc"
font-family="'Alliance No 1', ui-sans-serif, system-ui, sans-serif"
font-size="88" font-weight="400" letter-spacing="-0.03em"
text-anchor="middle" dominant-baseline="central">J</text>
</svg><text> depends on the font being installed. It is not, on a visitor's machine — the browser falls back to the system grotesque, which at 16px is indistinguishable. That is an acceptable trade for a favicon that stays in step with the wordmark. If it ever needs to be exact, outline the glyph and keep the same box and colours.Misuse
Add a space between Journey and MRO. They are one word; the weight step is what separates them.
Set the whole mark in the accent. MRO in cyan against Journey in --text is the entire idea.
Centre-align the flex items. The J tail and the MRO cap height will not agree, and the mark will sit off its line.
Substitute another grotesque. Alliance's J is the reason the clip exists; a different J needs different treatment or none.
Put the mark on a photograph or a gradient. It has no container and no outline — it needs a flat surface.
Rotate, outline, emboss, or add a shadow. There are no effects anywhere in this system.
.woff2 files in assets/fonts/alliance/ are copied from journeymro_site and carry that project's licence. Check it covers any new domain before shipping there.