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.

Stacked The main logo of The Autoware Foundation. Black: SVG White: SVG

One line For wide and low spaces, for example a banner or a footer. Black: SVG White: SVG

Vertical The name is centered below the mark. Black: SVG White: SVG

Autoware, horizontal The mark with the name Autoware beside it. Black: SVG White: SVG

Autoware, vertical The mark with the name Autoware below it. Black: SVG White: SVG

Mark For small spaces, for example an icon or a profile picture. Black: SVG White: 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.

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, 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
Headings. Use Outfit Bold for headlines and Outfit Medium for subheads, both in capital letters.

Open-source software for autonomous driving

Montserrat
Text. Use Montserrat Medium for introductions and Montserrat Regular for paragraphs.

Open-source software for autonomous driving

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, 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.