The identity system for Oh Lord, a branding studio that builds brands which refuse to blend in.
The logo comes as a horizontal lockup, a stacked vertical, and a standalone mark, each in full color and monochrome, for light and dark surfaces. Pick the variant the surface asks for; never rebuild a lockup by hand.
Core logo.
The mono variants are for monotone output: black-and-white print, a single-colour stencil, engraving or embossing, or anywhere the full-colour logo cannot be reproduced.
Clear space.
Give it room
Keep clear space around the logo equal to the height of the mark. Place it on a solid surface, not over busy imagery. When color would fight the background, use the monochrome version rather than adding an outline, a shadow, or a container.
Bone paper and black do the work; the pink is the signature. It is used at small scale and with intent, on calls to action and the one thing on screen that matters most. Spread it everywhere and it stops meaning anything.
Visual balance.
Each part of the circle represents how much of this colour should roughly be used in the system. Creativity is encouraged for special use-cases (promo, posters, etc.) but clean branded work should respect it.
- Signal Pink14%
- Bone Paper33%
- Pure White26%
- Absolute Black22%
- Graphite5%
Used as a central fade at any size, to fill dark voids creatively without occupying a true page element.
One typeface carries the whole system: Inter Tight, from the 220px headline down to the 14px label. The hierarchy is built from size, weight and tracking, not from a second family.
Hero typeface — display/headline.
Body typeface.
Every step in the system.
Headings
- H1Display heading set in the hero face.220px
- Font
- Inter Tight SemiBold 600
- Desktop
- 220 / 220 px
- Tracking
- -2.9%
- Case
- Normal case
- H2Section title built from the same hierarchy.40px
- Font
- Inter Tight SemiBold 600
- Desktop
- 40 / 50 px
- Tracking
- -3.0%
- Case
- Normal case
- H3Body face at the largest editorial step. Use it for opening passages and emphatic statements.30px
- Font
- Inter Tight SemiBold 600
- Desktop
- 30 / 40 px
- Tracking
- -3.0%
- Case
- Normal case
- H4Body face at the mid-editorial step. Used for sub-headings and lede paragraphs.24px
- Font
- Inter Tight SemiBold 600
- Desktop
- 24 / 34 px
- Tracking
- -3.0%
- Case
- Normal case
- H5Caption-style heading20px
- Font
- Inter Tight SemiBold 600
- Desktop
- 20 / 30 px
- Tracking
- -3.0%
- Case
- Normal case
- H6Smallest heading18px
- Font
- Inter Tight SemiBold 600
- Desktop
- 18 / 26 px
- Tracking
- -2.9%
- Case
- Normal case
Body
- Body BaseBody face at the running text scale. Comfortable for paragraphs of up to 70 characters per line.16px
- Font
- Inter Tight Regular 400
- Desktop
- 16 / 26 px
- Tracking
- 0.0%
- Case
- Normal case
- Body SmallBody face at the small annotation scale. Captions, footnotes, table cells.14px
- Font
- Inter Tight Regular 400
- Desktop
- 14 / 24 px
- Tracking
- 0.0%
- Case
- Normal case
Labels / Accent
- CaptionBrand guide / Version 1.014px
- Font
- Inter Tight SemiBold 600
- Desktop
- 14 / 24 px
- Tracking
- 7.7%
- Case
- Normal case
- ButtonTake action16px
- Font
- Inter Tight SemiBold 600
- Desktop
- 16 / 19 px
- Tracking
- 0.0%
- Case
- Normal case
- Usage
- Typography pointers for button text.
- LabelSection label14px
- Font
- Inter Tight SemiBold 600
- Desktop
- 14 / 24 px
- Tracking
- 7.7%
- Case
- Normal case
Every button on every colour of the palette. Each background gets its own set, so contrast holds wherever a button lands. Hover and press to try them live.
Two sets. Marketing icons carry the brand's message; functional icons do the everyday work. Both come in three colours, each matched to its surface.
For interfaces and labels, use the brand’s functional icons.
- Stroke1.5 px
- Grid24 × 24
- Caps & joinsRound
- 162440SizesS · M · L px
Need help implementing this brand?
