Brand foundations
The Outside The Box look and feel.
Colours, type, logo, components and motion, all taken from the Outside The Box pitch deck and turned into a system for the website.
01 · Logo
The bracket box.
A thin bracket frame with OUTSIDE set in light capitals and The Box in a flowing signature script. Always give it room to breathe.
02 · Colour
Colour palette.
Sampled directly from the deck. Click any swatch to copy its hex value.
Contrast pairs
| Pairing | Ratio | WCAG |
|---|---|---|
| Ink on coral | 6.8:1 | AA |
| Ink on cream | 11.2:1 | AAA |
| Ink on sky | 7.8:1 | AAA |
| Cream on deep slate | 6.3:1 | AA |
| Slate on cream | 3.9:1 | Large text only |
03 · Typography
Type.
Inter Tight for bold, tightly tracked headlines (a match for the deck's heavy grotesk). Inter for body copy. Mrs Saint Delafield as a script accent that echoes the logo.
Display XL
Outside The Box.
Heading
Core Services.
Subheading
Social media management
Body large
Planning, captions, design, scheduling and ongoing management.
Body
Original content written and designed in your tone of voice.
Script accent
The Box
04 · Components
Scrapbook components.
White cards, a 2px ink outline and a hard offset shadow. A slight tilt that straightens on hover.
Buttons
Labels and lists
Eyebrow label
- Deck arrow list item
- Consistent, recognisable channels
Stat pills
Decoration
Social post card
Tap the heart.
outside_the_box_marketing
842 likes
Content day in full swing
05 · Motion
Playful, never distracting.
Springy pops, gentle floats, hearts piping out of the box. Everything respects reduced motion settings and switches to a calm, static version.
06 · Voice
Tone of voice.
Warm, confident and down to earth. A real person talking, not an agency brochure.
Do
Short sentences. British spelling. Say what you do plainly. End headlines with a full stop.
Do
Use real names, real places and real clients. Hertfordshire, Stevenage, Gilbert & Gregson.
Don't
Use em dashes in website copy. Use commas, full stops or 'and' instead.
Don't
Invent results, reviews or follower counts. Only state what is true.