Brand kit

YouSpot, in files anyone can use

Press, partners and anyone writing about YouSpot: take what you need. If you are putting the logo next to your own, the rules below are the whole of it. Questions go to support@youspot.com.

Download the kit

One archive with the logos, the app icons, the Illustrator source and the written guidelines. Everything below is also a single file.

Everything

Logos, app icons, Illustrator source and the written guidelines.

Download everything

Logos and icons

Every variation, SVG and PNG, plus the app icons.

Download zip

Guidelines

The design system and the written brand, as markdown.

Download zip

Logos

Pick the build for the ground it sits on. SVG for anything that scales, PNG for anything that cannot take one.

Primary lockup

Primary lockup

The logo as delivered: disc and wordmark as one path in HubSpot Orange. It reads on ivory and on plum, so this is the default everywhere unless the ground fights it.

Lockup, light wordmark

Lockup, light wordmark

Orange disc, white Spot. For dark grounds (plum chrome, photography, a dark deck) where the orange wordmark loses contrast.

Lockup, ink wordmark

Lockup, ink wordmark

Orange disc, ink Spot. For light grounds that need the wordmark quieter than the disc: a document, a slide, a partner page that is already carrying colour.

Icon

Icon

The disc alone, with You knocked out of it. Whatever sits behind the artwork shows through the letters, so use it where the ground is flat and light.

Icon, solid

Icon, solid

The same disc with a white circle behind the knockout, so You reads white on any ground. This is the one for avatars, favicons and anything sitting on artwork.

App icons

App icons

Built from the solid icon: a multi-size ICO for browser tabs and a 180px PNG for the iOS home screen, both flattened onto white because neither surface can be trusted with transparency.

Previous version

The v4 artwork, kept for anything already printed. New work uses the set above.

Lockup (v4)

Lockup (v4)

v4

The previous lockup. Kept for anything already printed; do not start with it.

Lockup, dark ground (v4)

Lockup, dark ground (v4)

v4

The previous lockup for dark grounds.

Icon (v4)

Icon (v4)

v4

The previous icon, knockout build.

Icon, solid (v4)

Icon, solid (v4)

v4

The previous icon with the white disc behind the knockout.

Using the logo

Five ways to keep it recognisable.

Keep clear space

Leave the height of the disc empty on every side. Nothing crops into it.

Pick the build for the ground

Light wordmark on dark, ink wordmark on busy light, primary everywhere else.

Do not recolour it

The orange is the brand. A tinted, greyscale or gradient logo is a different logo.

Do not stretch or rotate it

Scale both axes together, and keep it level.

Do not rebuild the wordmark

The lettering is drawn, not typeset. No font reproduces it, so use the file.

Do not put the knockout icon on artwork

The letters show whatever is behind them. On a photo or a colour, use the solid build.

Colour

Click a swatch to copy its hex. In code, use the token.

Type

Four faces, one job each.

Everything is an object, everything is markdown

Georgiafont-displayDisplay copy: headlines and pull quotesGeorgia, serif

Everything is an object, everything is markdown

System sansfont-sansBody, titles and every interface labelsystem-ui

Everything is an object, everything is markdown

Caveatfont-accentThe handwriting accent, one word at a timeCaveat, cursive

Everything is an object, everything is markdown

Geist Monofont-monoEyebrows, code and anything tabularGeist Mono, monospace

Written guidelines

How it sounds, how it names things, how it is punctuated.

The design system

Principles, the token contract, and where every value actually lives.

DESIGN.mdMarkdown

Brand voice

How YouSpot sounds, with the words it does and does not use.

docs/product/brand/brand-voice.mdMarkdown

Naming guidelines

How features and surfaces get their names.

docs/product/brand/naming-guidelines.mdMarkdown

Writing style guide

Punctuation, capitalisation and the house rules for product copy.

docs/product/brand/writing-style-guide.mdMarkdown

YouSpot-Logotype.ai

The vector source, as delivered. Everything else is derived from it.

IllustratorIllustrator

YouSpot-Icon.ai

The vector source, as delivered. Everything else is derived from it.

IllustratorIllustrator