--- title: "Brand" description: "The YouSpot logos in every variation and format, the colour and type behind them, and the written guidelines." canonical: https://youspot.com/brand last-updated: 2026-09-13 --- # Brand > Every YouSpot logo, in every format, plus the colour, type and written guidelines. Free to use for press, partners and anyone writing about YouSpot. ## Download the kit - **Everything**: Logos, app icons, Illustrator source and the written guidelines. [Download](https://youspot.com/brand/kit/full) - **Logos and icons**: Every variation, SVG and PNG, plus the app icons. [Download](https://youspot.com/brand/kit/logos) - **Guidelines**: The design system and the written brand, as markdown. [Download](https://youspot.com/brand/kit/docs) ## Logos ### 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. [SVG](https://youspot.com/brand/youspot-logo-v5.svg) · [PNG 1200](https://youspot.com/brand/youspot-logo-v5.png) · [PNG 2400](https://youspot.com/brand/youspot-logo-v5-2400.png) ### Lockup, light wordmark Orange disc, white Spot. For dark grounds (plum chrome, photography, a dark deck) where the orange wordmark loses contrast. [SVG](https://youspot.com/brand/youspot-logo-v5-light.svg) · [PNG 1200](https://youspot.com/brand/youspot-logo-v5-light.png) · [PNG 2400](https://youspot.com/brand/youspot-logo-v5-light-2400.png) ### 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. [SVG](https://youspot.com/brand/youspot-logo-v5-dark.svg) · [PNG 1200](https://youspot.com/brand/youspot-logo-v5-dark.png) · [PNG 2400](https://youspot.com/brand/youspot-logo-v5-dark-2400.png) ### 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. [SVG](https://youspot.com/brand/youspot-icon-v5.svg) · [PNG 512](https://youspot.com/brand/youspot-icon-v5.png) · [PNG 1024](https://youspot.com/brand/youspot-icon-v5-1024.png) ### 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. [SVG](https://youspot.com/brand/youspot-icon-v5-solid.svg) · [PNG 512](https://youspot.com/brand/youspot-icon-v5-solid.png) · [PNG 1024](https://youspot.com/brand/youspot-icon-v5-solid-1024.png) ### 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. [ICO 16/32/48](https://youspot.com/brand/favicon.ico) · [PNG 180](https://youspot.com/brand/apple-touch-icon.png) ## Previous version ### Lockup (v4) The previous lockup. Kept for anything already printed; do not start with it. [PNG 317](https://youspot.com/brand/youspot-logo-v4.png) ### Lockup, dark ground (v4) The previous lockup for dark grounds. [PNG 317](https://youspot.com/brand/youspot-logo-v4-dark.png) ### Icon (v4) The previous icon, knockout build. [PNG 512](https://youspot.com/brand/youspot-icon-v4.png) ### Icon, solid (v4) The previous icon with the white disc behind the knockout. [PNG 512](https://youspot.com/brand/youspot-icon-v4-solid.png) ## Using the logo - **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 | Name | Token | Hex | Used for | | --- | --- | --- | --- | | HubSpot Orange | `brand` | #ff4800 | The logo, and the one accent that carries it | | Primary | `primary` | #ff4800 | Buttons and links; the same orange | | Plum | `chrome` | #3a0b24 | Nav and dark chrome | | Ivory | `background` | #f7efe9 | The page ground | | Ink | `foreground` | #141413 | Body copy | | Surface | `surface` | #f2e7df | Raised panels on the page | | Salmon | `selected` | #f6c3ad | Selection and current state | | Muted | `muted-foreground` | #6b675e | Secondary copy | | Border | `border` | #e4e0d6 | Hairlines and dividers | ## Type - **Georgia** (`font-display`, Georgia, serif): Display copy: headlines and pull quotes - **System sans** (`font-sans`, system-ui): Body, titles and every interface label - **Caveat** (`font-accent`, Caveat, cursive): The handwriting accent, one word at a time - **Geist Mono** (`font-mono`, Geist Mono, monospace): Eyebrows, code and anything tabular ## Guidelines and source - [The design system](https://youspot.com/brand/docs/design-system.md): Principles, the token contract, and where every value actually lives. - [Brand voice](https://youspot.com/brand/docs/brand-voice.md): How YouSpot sounds, with the words it does and does not use. - [Naming guidelines](https://youspot.com/brand/docs/naming-guidelines.md): How features and surfaces get their names. - [Writing style guide](https://youspot.com/brand/docs/writing-style-guide.md): Punctuation, capitalisation and the house rules for product copy. - [YouSpot-Logotype.ai](https://youspot.com/brand/source/YouSpot-Logotype.ai): the Illustrator source, as delivered. - [YouSpot-Icon.ai](https://youspot.com/brand/source/YouSpot-Icon.ai): the Illustrator source, as delivered. ## Questions Email support@youspot.com.