# Media kit

This page gives the logos, the colors, and the fonts of Autoware. Use them for slides, posters, diagrams, and web pages about Autoware.

## Logos

Each logo comes in black, for light backgrounds, and in white, for dark backgrounds. The SVG files scale to any size. The PNG files are 2048 pixels on their longer side, with a transparent background.

Download all logos (ZIP)

**Stacked** The main logo of The Autoware Foundation. Black: [SVG](<../../../_media/3c4696a8825a73fc07ef.svg>) White: [SVG](<../../../_media/6ecebd9ac7a6cef1c789.svg>)

**One line** For wide and low spaces, for example a banner or a footer. Black: [SVG](<../../../_media/13b588cef7213bf6ef74.svg>) White: [SVG](<../../../_media/bfe894d4f9d894c851f7.svg>)

**Vertical** The name is centered below the mark. Black: [SVG](<../../../_media/e3cbd16369e496293c2b.svg>) White: [SVG](<../../../_media/7ea62a619a487e6e38ac.svg>)

**Autoware, horizontal** The mark with the name Autoware beside it. Black: [SVG](<../../../_media/0642bfa3d4a41d05674f.svg>) White: [SVG](<../../../_media/f14fab85cd81831ec825.svg>)

**Autoware, vertical** The mark with the name Autoware below it. Black: [SVG](<../../../_media/0d828ebd257e7cbe9844.svg>) White: [SVG](<../../../_media/799cec720c66e8f97699.svg>)

**Mark** For small spaces, for example an icon or a profile picture. Black: [SVG](<../../../_media/d3d9a8b84d16f8372496.svg>) White: [SVG](<../../../_media/c1e0590c5aa8e78731de.svg>)

- Keep the proportions of the logo. Do not stretch, rotate, or crop it.
- Keep free space around the logo, so that no other element touches it. The free space is two times the gap between the mark and the name.
- Use the black logo on light backgrounds, and the white logo on dark backgrounds.
- Do not change the color of the logo, and do not add effects such as shadows or gradients.

## Colors

### Brand colors

Each color has one job. Use indigo as the main color, and the other colors for their meaning.

Indigo

`#3f2ee3`  
RGB 63, 46, 227  
The brand color. Links, buttons, and accents on light backgrounds.

Cyan

`#00c8ff`  
RGB 0, 200, 255  
Links and accents on dark backgrounds. Information.

Green

`#00e678`  
RGB 0, 230, 120  
Success and tips.

Crimson

`#dc143c`  
RGB 220, 20, 60  
Warnings and danger. Put white text on it, not black.

Navy

`#00002a`  
RGB 0, 0, 42  
Dark backgrounds.

Mist

`#f2f5ff`  
RGB 242, 245, 255  
Light surfaces, for example code blocks.

### Gradient

The gradient goes from indigo to cyan to green. Use it only for thin lines and small accents. Text and large areas stay on flat colors.

```css
linear-gradient(90deg, #3f2ee3, #00c8ff 55%, #00e678)
```

### Contrast

Text must have a contrast ratio of 4.5:1 or more with its background, and large text and icons 3:1 or more. These limits come from the [Web Content Accessibility Guidelines 2.2](<https://www.w3.org/TR/WCAG22/#contrast-minimum>), level AA. The table gives the contrast of each brand color on white and on navy.

| Color | On white | On navy | Use as text |
| --- | --- | --- | --- |
| Indigo | 7.7:1 | 2.6:1 | On light backgrounds only |
| Cyan | 2.0:1 | 10.4:1 | On dark backgrounds only |
| Green | 1.7:1 | 12.2:1 | On dark backgrounds only |
| Crimson | 5.0:1 | 4.1:1 | On light backgrounds, or large text |
| Navy | 20.3:1 | 1.0:1 | On light backgrounds only |
| Mist | 1.1:1 | 18.7:1 | On dark backgrounds only |

### Colors for icons and borders

Cyan and green are too light on a white background. Indigo and crimson are too dark on navy. For icons, borders, and large text, this site uses a darker or a lighter version of each color. All of them have a contrast of 3:1 or more on their background.

| Color | On light backgrounds | On dark backgrounds |
| --- | --- | --- |
| Indigo | `#3f2ee3` | `#8a7dff` |
| Cyan | `#0098c7` | `#00c8ff` |
| Green | `#00a352` | `#00e678` |
| Crimson | `#dc143c` | `#ff7076` |
| Grey | `#6b6f8a` | `#9a9dbb` |

## Fonts

Autoware uses three fonts. All of them are free on Google Fonts.

Autoware headline

**[Outfit](<https://fonts.google.com/specimen/Outfit>)**  
Headings. Use Outfit Bold for headlines and Outfit Medium for subheads, both in capital letters.

Open-source software for autonomous driving

**[Montserrat](<https://fonts.google.com/specimen/Montserrat>)**  
Text. Use Montserrat Medium for introductions and Montserrat Regular for paragraphs.

Open-source software for autonomous driving

**[Noto Sans](<https://fonts.google.com/specimen/Noto+Sans>)**  
Other alphabets, for example Greek and Cyrillic. Other Noto fonts cover Chinese, Japanese, and Arabic.

This documentation site uses Montserrat for text and Outfit for headings and diagrams. Code uses Roboto Mono, because the guideline names no font for code.

## Use the colors in this site

The colors are CSS custom properties in [`docs/assets/css/theme.css`](<https://github.com/autowarefoundation/autoware-documentation/blob/main/docs/assets/css/theme.css>), for example `--aw-indigo`. Use these properties, not the hex values, so that a page also follows the dark mode. The diagrams have rules of their own in [`tools/diagrams/README.md`](<https://github.com/autowarefoundation/autoware-documentation/blob/main/tools/diagrams/README.md>).