# Brand

## The logo

![The Itinera logo, the itinerary: three stations on a short upright route, the first two filled dots and the last a ring, which together also read as a lowercase "i". It is followed by the name Itinera.](https://itinera-dev.org/brand/itinera-logo.svg)

The logo is **the itinerary**: a short straight route with three round stations on it, evenly spaced. The first two stations are filled dots and the last is a ring, the journey's end. It is drawn upright, with the top station set apart from the route, so it also reads as a lowercase "i".

It comes from the Roman *itinerarium*, a list of the stations along a road, in order: what a workflow is, and something read at a glance.

## Downloads

Every form of the logo is an SVG file:

- [itinera-logo.svg](https://itinera-dev.org/brand/itinera-logo.svg): The full logo, the mark and the name, for light backgrounds.
- [itinera-logo-dark.svg](https://itinera-dev.org/brand/itinera-logo-dark.svg): The full logo, for dark backgrounds.
- [itinera-mark.svg](https://itinera-dev.org/brand/itinera-mark.svg): The mark alone, for light backgrounds.
- [itinera-mark-dark.svg](https://itinera-dev.org/brand/itinera-mark-dark.svg): The mark alone, for dark backgrounds.
- [itinera-mark-mono.svg](https://itinera-dev.org/brand/itinera-mark-mono.svg): The mark in black, for one-colour printing.
- [itinera-icon.svg](https://itinera-dev.org/brand/itinera-icon.svg): The icon, the mark on a green square, as in a browser tab.

Use the logo as it is: keep its proportions, keep space around it at least as wide as the mark, and use the dark forms on dark backgrounds. Do not redraw it, recolour it outside these forms or add effects to it.

## Colours

The site has a light and a dark scheme, following the reader's system setting. Every pair of colours the pages use is checked against the contrast WCAG 2.1 AA requires, in both schemes, before the site is published.

| Colour | Light scheme, against its page | Dark scheme, against its page |
|---|---|---|
| Paper, the page | `#fbf9f4` | `#171a19` |
| Raised paper, panels and inline code | `#f2eee4`, 1.10 to 1 | `#212624`, 1.14 to 1 |
| Ink, headings | `#1d1b18`, 16.33 to 1 | `#f3efe6`, 15.27 to 1 |
| Body ink, the text | `#2b2925`, 13.80 to 1 | `#e0dbd0`, 12.70 to 1 |
| Muted ink, captions and labels | `#5e5a52`, 6.52 to 1 | `#aaa498`, 7.07 to 1 |
| Green, the logo and links | `#1f6b5c`, 6.02 to 1 | `#7cc7b4`, 8.92 to 1 |
| Deep green, focus and hover | `#134a3f`, 9.60 to 1 | `#a9e0d1`, 11.91 to 1 |
| Amber, planned and pseudo-Rust | `#8a4b0f`, 6.45 to 1 | `#f0b878`, 9.87 to 1 |

Text needs at least 4.5 to 1 against what it sits on, and other marks, such as the logo and the focus ring, at least 3 to 1.

## Type

The pages load no fonts: they use the reader's own. The text is set in a serif, such as Charter or Georgia, navigation in the system's interface font, and code in the system's monospace font. That way the site is quick, and text appears in a face the reader's device already renders well.

## The name

The name is **Itinera**, with a capital I. Only package names are written in lower case, such as `itinera` on crates.io.

It is Latin for routes or journeys, the plural of *iter*: in Itinera, a journey is one execution of a workflow, from its first step to its result.

---

This is the Markdown copy of https://itinera-dev.org/brand/, made from the same source.