Design Elements · Logo
Logo
The logo is the signature on everything we make. It comes in three pieces of vocabulary — the symbol, the wordmark, and the full lockup — each in a small set of approved color variants. This page shows which to reach for, how much room to give it, what never to do to it, and includes a tool to export a correctly-sized, on-brand asset for any platform you need.
Anatomy
The primary logo is one locked unit: the symbol (the mark) sitting left of the wordmark (the name). Together they're the lockup. Don't rebuild this relationship by hand — always place a supplied lockup file.
Part one
Symbol
The standalone mark. Used alone where space is tight or the brand is already established — favicons, app icons, avatars.
Part two
Wordmark
The name set in our type. Used where the symbol would be redundant or won't fit a horizontal space.
Together
Lockup
The default. Symbol + wordmark in fixed proportion. This is what goes in headers, footers, and documents.
The three workhorses
Ninety percent of the time you need one of these three. Match the variant to the background: color on light, white on dark or photography, ink for single-color print. Click a filename to copy it.
Color — the default
logo-blue-ink-ol.svg
Ink wordmark + blue symbol. Use on white and light grounds. This is the primary brand logo.
White — dark & photo
logo-white-white-od.svg
All-white lockup. Use on navy, dark grounds, and over photography (with a scrim if the photo is busy).
Ink — single-color
logo-ink-ink-ol.svg
Mono ink (#1A1C30). Use for single-color print, faxes, embossing, or anywhere color can't reproduce.
Full lockup library
All twelve approved lockups, each shown on the background it was built for. The three workhorses above cover most cases — the rest exist for specific two-color and pre-plated situations. Don't make new combinations; use a supplied file.
Plated variants carry their own dark background and built-in padding — drop them onto photography or busy grounds where a plain lockup would need a plate drawn behind it. Each is shown here on a ground that matches its own plate, so the tile reads seamless. One thing to know: the plate ink in these files is #1A1C30 (Tertiary Dark), not the site's canonical Navy #0C0E16 — close, but not the same. Place a plated file on a true-Navy surface and you'll see its plate as a faint lighter rectangle; for pixel-exact work on Navy, prefer a plain white lockup on a Navy fill you control.
Symbol
The mark on its own — for favicons, app icons, social avatars, and any square space where the full lockup won't fit. Use the symbol only once the brand is already established in context (a browser tab, an app grid), never as the primary logo on first contact.
Wordmark
All twelve approved wordmarks, structured like the lockup library — four grounds (on light, on dark, on blue, plated) reading top to bottom, three color treatments per row. The wordmark holds the legible color for its ground: ink on light, white on dark and blue. Teal is reserved for dark and plated grounds — as text it only clears contrast against ink-family backgrounds, so it never sits on white or blue. Every file is clean, transparent artwork — the background is no longer baked into the mark.
De-plated & rebuilt. The -pl files carry their own background; the -ol / -od / -ob files are now clean transparent artwork with no rectangle behind the letters — drop them on any matching ground. Teal note: a teal wordmark is an accent for ink-family grounds only (navy, plate); it fails contrast as text on white (≈2:1) and on blue (≈2.3:1), which is why those rows use blue, ink, and white instead.
Clear space & minimum size
Give the logo room and keep it legible. Clear space equals the height of the “P” in “Proper” on every side — nothing (text, edges, other logos, photo clutter) intrudes into that margin.
120px the wordmark stops being legible on screen. Need it smaller? Switch to the symbol.24px (favicons run 16–32px). Don't shrink the full lockup to fit a square — use the symbol.-plate- files have built-in padding, so give them a bit more width than a plain lockup at the same legible size.These minimums are practical guidance for web-app and screen use, calibrated to the primary variants — the brand guidelines don't specify hard minimums. For print, scale by the same logic (keep the “P” crisp) rather than a fixed measurement.
Don't
The logo is fixed artwork. Never recolor, distort, rotate, or decorate it, and never set it on a busy background without a solid plate. Every example below is wrong.
Export an asset
Generate a correctly-sized, on-brand file — no manual resizing. Pick the asset, a variant, and a size; the lockup and wordmark keep their natural proportions by default, so they don't get squashed into a square. Download a crisp PNG, the SVG, or a favicon ICO. Everything renders live from the approved source files.
Asset
Variant
Size
Padding
Background
Set width and height directly. The lock keeps the current proportion as you scale — so the lockup and wordmark stay true to shape instead of stretching. Fit to artwork snaps to the natural aspect; 512² / 1024² give you a clean square for app icons and avatars. ICO bundles 16/32/48/64 px into one favicon file. Transparent PNGs suit most upload fields; pick a solid background where a platform flattens to white. The new Plate · #1A1C30 swatch lets you recreate the self-plated look on demand — pick a transparent white or teal variant, set the plate ground, and export a plated asset without baking the rectangle into the file.