# Brand

Writing about fivebar, or linking to it? Here is its name, its logo and its colours.

Everything here is ready to use: the logo as SVG or PNG for light and dark backgrounds, and the exact colours the site uses, so there’s no tracing a logo from a screenshot or guessing at a colour.

![The fivebar logo: four strokes with a fifth across them](https://fiveb.ar/img/logo.svg)

## The name

fivebar is one word, all in lower case, even at the start of a sentence. It is named after the tally mark, four strokes with a fifth across them, the way a count is kept by hand. Its address is `fiveb.ar`.

## The logo

The logo is that tally mark with the name beside it, as at the top of every page here. Use the mark alone where the name is said already or there’s no room for it, and the mark in a square where an image is drawn square, such as an icon or an avatar.

### Download

| Logo | Light background | Dark background |
| --- | --- | --- |
| Mark and name | [SVG](https://fiveb.ar/img/brand/fivebar-logo.svg), [PNG](https://fiveb.ar/img/brand/fivebar-logo.png) | [SVG](https://fiveb.ar/img/brand/fivebar-logo-white.svg), [PNG](https://fiveb.ar/img/brand/fivebar-logo-white.png) |
| Mark alone | [SVG](https://fiveb.ar/img/brand/fivebar-mark.svg), [PNG](https://fiveb.ar/img/brand/fivebar-mark.png) | [SVG](https://fiveb.ar/img/brand/fivebar-mark-white.svg), [PNG](https://fiveb.ar/img/brand/fivebar-mark-white.png) |
| Mark in a square | [SVG](https://fiveb.ar/img/brand/fivebar-icon.svg), [PNG](https://fiveb.ar/img/brand/fivebar-icon.png) | [SVG](https://fiveb.ar/img/brand/fivebar-icon-white.svg), [PNG](https://fiveb.ar/img/brand/fivebar-icon-white.png) |

The SVGs are sharp at any size. The PNGs have a transparent background, and are 2048 pixels wide for the mark and the name, 1024 for the mark alone, and 512 for the mark in a square.

### Using it

- Use it in ink on a light background, or in white on a dark one, and in no other colour.
- Leave room around it, at least half the mark’s height on every side.
- Keep the mark at least 16 pixels wide, as in a browser’s tab, and the mark and the name no smaller than at the top of this page.
- Don’t stretch it, turn it, outline it or give it a shadow, redraw its strokes, or set the name in another typeface.
- You’re welcome to use it to link to fivebar, or to say that a site is counted by it. Please don’t use it to suggest we made or endorse something we didn’t.

## Colours

Near-black ink on white paper, a navy biro to draw the figures, and a sky blue highlighter behind whatever matters most. The highlighter is only ever a fill behind ink, never the colour of words. Greys between the ink and the paper do the rest, and nothing else is coloured but how fast a page loaded and the errors it answered with.

| Colour | Light | Dark |
| --- | --- | --- |
| Ink | `#141414` | `#ebebeb` |
| Paper | `#ffffff` | `#141414` |
| Biro | `#1b3a8a` | `#93aef5` |
| Highlighter | `#8fd3ff` | `#1a5b85` |

Each has a second value for the dark theme, which a page takes when your browser prefers it.

## Type

Everything is set in [IBM Plex](https://github.com/IBM/plex): Plex Sans for words, at weights 400 and 500, and Plex Serif at 500 for figures and headings. The name in the logo is Plex Sans at 500. Plex is free to use under the SIL Open Font License.