Home / Brand Guidelines

Brand Guidelines

Our brand, in one place.

Logos, colours and usage rules for partners, clients and the press. Use these files whenever you feature Leadspotion, so our brand looks the same everywhere.

Download the Logo Kit

●●● leadspotion.com/graphic-chart

Brand colours

#1C1F3B

#6370D4

#FFFFFF

Typography

DM Sans Bold, for headings

DM Sans Regular, for body text and interface

SVG · Transparent PNG · PNG with background · 1600 px

Logos

Our logo files

Always use the original files below. Never redraw, retype or recolour the logo.

Logo for dark backgrounds

White wordmark. Use it on Navy, Indigo, Periwinkle or dark photos. This is our main version.

Logo for light backgrounds

Navy wordmark. Use it on white, Pale or other light backgrounds, documents and print.

Monochrome white logo

All-white version. Keep it for coloured backgrounds, busy photos and one-colour printing.

Colour symbol

Use the potion bottle on its own when space is tight: avatars, app icons and favicons.

White symbol

The one-colour symbol for dark backgrounds and photos.

Formats

Which format should I use?

Pick the file type that suits where the logo will appear, and never go below the minimum size.

90 px

Minimum logo width on screens: websites, social media and email.

25 mm

Minimum logo width in print.

½ height

Clear space: keep at least half the logo’s height empty on every side.

Format

Best for

SVG (vector)

Websites, presentations and print. Scales to any size without losing quality. Use it whenever possible.

PNG, transparent

Placing the logo over a colour or a photo in tools that don’t accept SVG, like social posts and email signatures.

PNG, with background

Profile pictures, thumbnails and anywhere you can’t control the background.

PDF or EPS

Professional printing, signage and merchandise. Contact us and we’ll send the right file.

Colours

Our colour palette

Deep navy tones carry the brand. Periwinkle is our accent for actions and highlights. Soft tints keep light sections calm.

Primary

Navy

#1C1F3B

Main dark background, headings and text on light sections.

Secondary

Indigo

#252849

Cards and panels on dark sections.

Accent

Periwinkle

#6370D4

Buttons, links and key highlights.

Accent dark

Deep Periwinkle

#5562C8

Button hover and labels on light sections.

Accent light

Light Periwinkle

#939CEA

Labels and accents on dark sections.

Tint

Lavender

#D6D9EF

Borders, dividers and soft text on dark.

Background

Pale

#F4F5FB

Alternate light section background.

Text

Slate

#4A4E72

Paragraph text on light backgrounds.

Usage

Do’s and don’ts

What we do

Use the original logo files, unchanged.
Use the white logo on dark backgrounds and the navy logo on light ones.
Keep clear space around the logo.
Pair the logo with DM Sans and our palette.
Choose SVG whenever the tool allows it.

Don’t

What we avoid

Stretching, squashing or rotating the logo.
Changing the logo colours or adding effects like shadows, outlines or gradients.
Placing the logo on busy or low-contrast backgrounds.
Retyping “Leadspotion” in another font instead of using the logo.
Using the logo below the minimum size.

Typography

One typeface: DM Sans

A clean, modern sans-serif for every heading, paragraph and button. It’s free on Google Fonts.

DM Sans

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 & @ % $ !

Regular Medium SemiBold Bold

Heading 1
Bold · 62 px

Grow your business

Heading 2
Bold · 48 px

Websites that convert

Heading 3
Bold · 20 px

Search Engine Optimization

Eyebrow
Medium · 12 px · caps

Our services

Body
Regular · 16–18 px

We help small businesses get found online, win more customers and save time with simple digital tools.

Buttons

Button styles

Square corners, DM Sans SemiBold. A filled button for the main action, an outline button for the second one.

On dark sections

Get Started

Learn More

Filled: Periwinkle, darker on hover. Outline: white border, fills white with navy text on hover.

On light sections