Logo
Two lockups, chosen by the ground behind them. There is no third version and no recoloring — if neither works on a surface, the surface is wrong.
The two marks
Pick by ground, not by preference. The white mark goes on navy, deep, and blue; the dark mark goes on cream, yellow, and white.
Sizes
The mark has two jobs and two sizes. Below the minimum the wordmark stops resolving, so it is a floor, not a guideline.
| Placement | Width | Note |
|---|---|---|
| App bar / site header | 13rem | Drops to 15.5rem in the footer treatment on small screens |
| Footer | 20rem | The mark is the footer's first element |
| Minimum | 9rem | Below this the wordmark stops resolving |
Clear space
Keep --s-5 (1.5rem) clear on every side at header size, and --s-6 (2rem) at footer size. In the app bar the tagline sits outside that clear space, separated by a rule.
Never
- Recolor either mark, including to yellow. The two files are the only versions.
- Put the white mark on cream, yellow, or white, or the dark mark on navy or blue.
- Place either mark over unmasked photography. Use a surface, or the hero's gradient scrim.
- Stretch, rotate, add effects, or set it below the minimum width.
- Rebuild the wordmark in Oswald. The lockup is artwork, not type.