Mises Institute concept · Brand
Brand guide
The standards the concept site is built to. The palette, one rule governing which colour does what, the type, the spacing, how portraits and photographs are prepared, and the imagery.
One
The palette
Four colours taken from the Institute's own marks, plus gold, plus the neutrals. Gold is the single addition, and the budget is one: a single new colour is a proposal, two would be a rebrand.
Gold earns its place because the crest gives only cool colours or loud ones, and gold is the one warm tone the Institute is identified with. Near black and white are neutrals rather than brand colours, so they do not count against the budget.
One further colour, a deep navy, was used early in the project and has been removed. It should not return.
Two
One job each
Each colour has one job. Before using a colour anywhere, check which job it is doing. If it is doing more than one on a page, the page is wrong.
Display headings, and the furniture: dates, links at rest, every hairline, category marks that are not the primary one.
Never on anything at reading size. Gold is 3.52:1 on white: use it at 24px and above, never below.
Things you can act on: filters at rest and when active, carousel arrows, section links, the read link under the cursor, and one identity mark.
Never carries text that has to be read.
Everything that is read: headlines, bylines, body copy, standfirsts.
Ink is 17:1 on white, soft ink 7:1. Both are safe at any size.
The primary button, and nothing else.
One red element per page at most.
Fills
Cards carry no background fill. Separate them with a fine gold rule on white. No coloured left rule on cards. A vertical rule beside a blockquote is permitted.
Three
Three faces, three jobs
Display · LTC Bodoni 175
Body · Adobe Garamond Pro · 19px, line height 1.68, measure about 69 characters
Labels · Libre Franklin
| Setting | Value | Note |
|---|---|---|
| Body | 19px / 1.68 | 17.5px below 640px |
| Measure | 38rem | About 69 characters |
| Paragraph gap | 1.35em | 26px at body size |
| Above an h2 | 2.1em | 63px, with 19px below it |
| Drop capital | 2 lines | Sized to span exactly two lines of body text, never one and a half |
Headings carry roughly three times more space above than below, so each binds to the text it introduces rather than floating between two blocks.
Four
One spacing scale
Every margin, padding and gap uses one of these eight values. No other numbers. If a gap needs to sit between two of them, use the nearer one rather than inventing a third.
Margins at the edge of the page run from 22 pixels on a phone to 88 on a wide screen, and content never runs wider than about 1,150 pixels.
Five
Portraits
Drawn portraits, not photographs. Line drawing agrees with Bodoni and Garamond in a way a photograph does not, it needs no frame or field because its ground is already white, and it settles the rights question in one move.
Reference set
New portraits must match these: same drawing weight, white ground, head centred, shoulders entering the frame, no background behind the figure.
Find the crown from the first row carrying ink, and the shoulder line from where the ink width jumps. The head box is what sits between them, centred on the ink.
Do not judge the head box by eye.
Square side is head height times 1.30, centred on the head box.
Always check a crop with a circular mask applied. A square that looks generous can still clip a chin once the corners are cut.
176px square for avatars, greyscale JPEG at quality 84, about 7 KB each. Masthead portraits 620px wide at quality 80.
Rendered at 66px in feed cards, 46px in a byline, 108px on an author card.
A byline with no portrait falls back to initials in a navy circle.
Never put a stand-in face under a named writer. Readers take it for a photograph of that person.
A byline reading "A · B" falls back to the name before the interpunct, so a co-hosted podcast shows its first host.
Six
Photographs on dark fields
Reference set
Shown as they appear in use: greyscale, held at 0.32 opacity, left edge dissolved into the field. New banner photographs must sit at this weight, neither brighter nor more contrasty.
Banner photographs are cropped and nothing else. Never brighten or rebalance one: a well exposed picture comes out washed out.
How light or dark a photograph sits on the field is set in the page itself. Tune it there rather than re-editing and re-saving the picture.
Judge a photograph by its brightest areas rather than its average. An average can look correct while the highlights are already blown out.
Then check what fraction of the frame sits above the field level. It should be mostly at or below. Above roughly 40 per cent, hold it back with opacity.
Portraits that sit side by side may be evened out so they agree with one another in size and tone.
That is the only case. Never apply it to a single photograph standing on its own.
Copyright 2026. Provided to the Mises Institute for evaluation. The designs, code and copy remain the property of the author and are not licensed for reuse or reimplementation without a written agreement.
