# Shmor brand kit

The Shmor logo: a rounded bookmark with three voice-note bars cut out of it ("you said it, Shmor saved it"), next to the name "Shmor" set in Newsreader SemiBold. The tagline, **Networking admin ELIMINATED**, sits below it in the tagline lockup. Download it from https://useshmor.com/brand or use the files here.

The files are generated by `apps/web/scripts/brand-kit.ts` (`pnpm --filter @shmor/web brand:kit`) from the geometry in `apps/web/lib/brand/logo.ts`. Do not edit them by hand; change the geometry and rerun the script.

## What is in the kit

| Folder | What | Sizes |
| --- | --- | --- |
| `svg/` | Mark and horizontal lockup, transparent background, lettering outlined (no fonts needed) | Vector |
| `svg/` | Lockup with tagline (`shmor-lockup-tagline-*`), transparent and on white, light grey, Shmor green and ink | Vector |
| `png/` | Mark, transparent background | 64, 128, 256, 512 and 1024 px square |
| `png/` | Lockup, transparent background | 600, 1200 and 2400 px wide |
| `png/` | Lockup on white, light grey, Shmor green and ink, with padding | 1200 px wide |
| `png/` | Lockup with tagline, transparent background | 600, 1200 and 2400 px wide |
| `png/` | Lockup with tagline on white, light grey, Shmor green and ink, with padding | 1200 px wide |
| `avatars/` | Square profile images (social profiles, Slack, app stores, Google): the mark on a solid background | 400, 800 and 1024 px |
| `avatars/` | The same, marked `-circle`: the mark sized to survive a circular crop | 400, 800 and 1024 px |
| `social/` | Banners with the lockup with tagline, light and dark | X 1500 x 500, LinkedIn 1584 x 396 |
| `email/` | The email header logo at 2x, on the email background | 230 x 56 (shown at 115 x 28) |

Colour names in the file names:

- `green`: Shmor green mark, ink lettering. For white and light backgrounds.
- `bright`: bright green mark, white lettering. For dark backgrounds.
- `white`: all white. For Shmor green, ink, photos and other dark or colourful backgrounds.
- `black`: all ink. For single-colour use on light backgrounds.

`-on-white`, `-on-grey`, `-on-green` and `-on-dark` name the background; files without one are transparent. `lockup-tagline` files are the logo with the tagline below it; `lockup` files are the logo without it.

## Colours

| Name | Hex | RGB | Use |
| --- | --- | --- | --- |
| Shmor green | `#0a7d4f` | 10, 125, 79 | The mark on white and light grey; the product's accent |
| Bright green | `#34c088` | 52, 192, 136 | The mark on dark backgrounds |
| Ink | `#0e1116` | 14, 17, 22 | The lettering on light backgrounds; dark backgrounds |
| Light grey | `#f6f7f9` | 246, 247, 249 | Quiet backgrounds |
| White | `#ffffff` | 255, 255, 255 | Backgrounds; the logo on green or ink |

The tagline is a softer ink beside the two-colour logos: `#3a404a` with the `green` logo, `#c2c8d1` with the `bright` logo. With the one-colour logos (`white`, `black`) it takes the logo's colour.

## Using the logo

- **Clear space:** keep at least the height of the shortest bar (the left one, about a quarter of the mark's height) clear on every side. Nothing else (text, edges, other logos) goes inside it.
- **Minimum size:** the mark at 16 px tall, the lockup at 80 px wide. Below that the bars close up. The lockup with tagline at 150 px wide (the tagline is then about 10 px); below that, drop the tagline and use the lockup.
- **Which version:** use the lockup with tagline where there is room for the tagline to read (site headers, footers, banners, share cards); the lockup where there is room for the name; use the mark alone where space is square or tiny (avatars, favicons, app icons) or where the name is already next to it.
- **Backgrounds:** green on white or light grey; bright green or white on ink and other dark colours; white on Shmor green.

## The tagline

- **Exact casing, always:** "Networking admin ELIMINATED". "Networking admin" in sentence case, "ELIMINATED" in capitals. Never all capitals, all lower case or title case.
- **Always below the logo:** use the `lockup-tagline` files. The tagline starts at the logo's left edge, below the mark, in Inter Tight Medium with slight letter spacing, at 0.36 of the size of the name. Do not set it beside or above the logo, move it, resize it against the logo, or retype it in another font.
- In running text (articles, listings, alt text), write it the same way: Networking admin ELIMINATED.

## Please do not

- Recolour the logo outside the palette above, or use gradients, shadows, outlines or glows.
- Stretch, squash, rotate or skew it, or change the space between the mark and the name.
- Retype "Shmor" in another font, or rearrange the mark and the name.
- Fill the bars in, change their number, or use the bookmark without them.
- Put it on a busy photo or a background where it does not stand out.
- Use it in a way that suggests Shmor endorses or partners with you, unless we have agreed that.

The name "Shmor" is set in Newsreader by Production Type, and the tagline in Inter Tight by Rasmus Andersson, both licensed under the SIL Open Font License 1.1. Shmor is a product of Metamindz Limited. Questions: hello@metamindz.co.uk.