Guidelines on how to implement the Salvation visual brand system for cross media applications.
The lockup pairs the looped mark with the wordmark. The mark stands alone wherever the full lockup will not fit, and it keeps its pink on both light and dark surfaces. Monochrome cuts exist for the surfaces that refuse color.
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 imagery. Where color would fight the background, reach for the monochrome cut rather than adding a container.
Near-black is the room; the pink is the one thing lit in it. Text sits on a grey ladder from white down to a quiet mid-tone, so the pink stays the only thing competing for attention.
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.
- Salvation Pink14%
- Ink Black40%
- Pure White24%
- Carbon Card12%
- Absolute Black10%
Inter carries everything, and it stays deliberately light. Headings top out at medium rather than bold, so the interface reads calm at every size.
Hero typeface — display/headline.
Body typeface.
Every step in the system.
Headings
- H1Display heading set in the hero face.72px
- Font
- Inter Medium 500
- Desktop
- 72 / 76 px
- Tracking
- -2.5%
- Case
- Normal case
- H2Section title built from the same hierarchy.36px
- Font
- Inter Medium 500
- Desktop
- 36 / 40 px
- Tracking
- -2.5%
- Case
- Normal case
- H3Body face at the largest editorial step. Use it for opening passages and emphatic statements.20px
- Font
- Inter Medium 500
- Desktop
- 20 / 28 px
- Tracking
- -2.5%
- Case
- Normal case
- H4Body face at the mid-editorial step. Used for sub-headings and lede paragraphs.18px
- Font
- Inter Medium 500
- Desktop
- 18 / 25 px
- Tracking
- -2.5%
- Case
- Normal case
- H5Caption-style heading16px
- Font
- Inter Medium 500
- Desktop
- 16 / 24 px
- Tracking
- -2.5%
- Case
- Normal case
- H6Smallest heading14px
- Font
- Inter Medium 500
- Desktop
- 14 / 21 px
- Tracking
- -2.5%
- 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 Regular 400
- Desktop
- 16 / 24 px
- Tracking
- 0.0%
- Case
- Normal case
- Body SmallBody face at the small annotation scale. Captions, footnotes, table cells.14px
- Font
- Inter Regular 400
- Desktop
- 14 / 20 px
- Tracking
- 0.0%
- Case
- Normal case
Labels / Accent
- CaptionBrand guide / Version 1.012px
- Font
- Inter Regular 400
- Desktop
- 12 / 16 px
- Tracking
- 0.0%
- Case
- Normal case
- ButtonTake action14px
- Font
- Inter Medium 500
- Desktop
- 14 / 20 px
- Tracking
- 0.0%
- Case
- Normal case
- Usage
- Typography pointers for button text.
- LabelSection label14px
- Font
- Inter Medium 500
- Desktop
- 14 / 20 px
- Tracking
- 18.0%
- Case
- All caps
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?
