Identity
Identity
The seal, the five colours, and the two typefaces the site is built from. The files are below, free to take.
One archive — marks, lockups, icons, share card, and a plain-text sheet of the colours and type.
The mark
The seal
An engraved seal: laurel, three stars, a temple. The navy circle knocks the temple out of itself, so anything placed behind the mark shows through the columns — put white there.
-
Primary mark
The seal with white behind the circle. This is the masthead and favicon artwork. PNG, 684px.
Download PNG -
Seal, navy
Full colour. For paper backgrounds. The temple is knocked out, so put white behind it.
Download SVG -
Seal, reversed
Single colour white. For navy and other dark backgrounds.
Download SVG -
Seal, bronze
Single colour bronze. An accent, used rarely.
Download SVG -
Seal, ink
Single colour dark. Used for the ghosted watermark on paper.
Download SVG -
Seal, navy (raster)
Transparent PNG of the navy seal, where an SVG will not do. 1080px square.
Download PNG
Lockups
Seal and wordmark
For collateral where the name has to travel with the mark. Not used inline on the site itself.
-
Lockup, navy
Seal and wordmark together. The default.
Download SVG -
Lockup, navy alternate
A second navy arrangement.
Download SVG -
Lockup, bronze
For bronze-accented collateral.
Download SVG -
Lockup, black
Single colour. For one-colour print and fax-grade reproduction.
Download SVG -
Lockup, reversed
Single colour white, for dark backgrounds.
Download SVG
Colour
Five colours
The whole palette. Every intermediate tone on the site is one of these five at reduced opacity — there is no sixth colour.
-
Paper
#F6F4EF--color-paperThe page. Every surface starts here.
-
Ink
#0F1720--color-inkBody text and headings.
16.42:1 on paper
-
Navy
#0B2D5B--color-navyThe dark bands, the solid button, focus rings, the seal.
12.40:1 on paper
-
Bronze
#8A6A3F--color-bronzeEyebrows, numerals, the ornament, rare hairline emphasis.
4.53:1 on paper
-
Rule
#D8D6D2--color-ruleHairlines and borders. Never text.
1.32:1 — not for text
Tones
- text-ink/65
- The lowest tone allowed for text on paper. 5.43:1.
- text-ink/60
- Placeholder em-dashes only. 4.61:1.
- text-paper/80
- Secondary text on a navy band. 8.43:1.
- text-paper/70
- The floor for body text on navy. 6.81:1.
Type
Two typefaces
EB Garamond sets the headings, Inter sets everything read at length. Both are open source and served from the site itself.
-
EB Garamond
Headings, numerals, small caps, the wordmark.
Variable 400–800. The site uses 460–600.
Open source (SIL OFL). Self-hosted — the site makes no font requests.
-
Inter
Body copy, ledes, captions, button labels.
Variable. The site uses 400–600.
Open source (SIL OFL). Self-hosted.
Scale
- display-xl
- 52 → 124px
- Serif
- The home hero. One per site.
- display-lg
- 42 → 86px
- Serif
- Interior page headings.
- display-md
- 34 → 58px
- Serif
- Major sections, pull quotes.
- display-sm
- 28 → 42px
- Serif
- The default section heading.
- heading-lg
- 23 → 31px
- Serif
- Entry names, card titles.
- heading-md
- 20 → 24px
- Serif
- Small card titles.
- lede
- 18 → 22px
- Sans
- The standfirst under a heading.
- body
- 16px
- Sans
- Default body copy.
- body-sm
- 14px
- Sans
- Captions, metadata, footer.
- eyebrow
- 12px, 0.16em
- Sans
- Labels and button text.
Using it
How the mark is used
- Do not recolour the seal. The four tints above are the whole set.
- Do not stretch, rotate, crop, or add effects to the mark. No shadow, no gradient, no outline.
- Keep clear space around the mark of at least half the width of its circle.
- Bronze is never used for text on navy — it falls to 2.74:1. On navy the mark is white.
- The smallest the seal is used is 32px. Below that the laurel closes up.
- The establishment line reads Est. MMXXV. It dates the site, and is not a company founding date.
Files
Take the whole set
Marks, lockups, icons, the share card, and a plain-text sheet of the colours and the type — in one archive, built from the files this site serves.
