# AI2 Labs brand guidelines

Internal exploration. Flat by default: no gradients, shadows or glows anywhere.

## The mark: Trail

An orbit ribbon thins along its top. Seven dots grow along it into the satellite. The dots are the AI2 team. The growth is momentum. The satellite is the eighth and largest dot: the idea that goes from 0 to 1.

Parts: ribbon, seven dots, satellite. The dots grow geometrically with equal gaps. The gap from the last dot to the satellite is the same.

## Mark variants

The mark is single color. Ink on light grounds, paper on dark grounds. There is no accent variant.

| File | Use |
| --- | --- |
| `mark-primary.svg` | Trail in ink (#1F1F1F) on light grounds. Default at 48 px and up. |
| `mark-reverse.svg` | Trail in paper (#FFFFFF) on dark grounds. |
| `mark-compact.svg` | Ink. Ribbon and satellite only, no dots. Use below 48 px. |
| `mark-compact-reverse.svg` | Paper. Compact for dark grounds, below 48 px. |

Pairings: the ink mark goes on paper, surface and blue-soft. The paper mark goes on ink, navy and blue. Never put the ink mark on navy or blue.

## Wordmark

`brand/wordmark/wordmark.svg` (ink) and `wordmark-reverse.svg` (paper). "AI2 Labs" is outlined, shaped from Google Sans Flex Medium with HarfBuzz kerning and -1.5% tracking. At a 64 px type size it is 233.12 wide with a cap height of 45.82. Never retype it.

## Lockups

`brand/lockup/` holds horizontal and stacked lockups, each in ink and reverse. Never build one by hand.

- Mark height equals the type size.
- The gap between mark and wordmark equals one word space (12 px at a 64 px mark).
- Horizontal: mark 64 x 64 at x = 0, wordmark at x = 76, vertically centered on the mark. 309 x 64 at 1x.
- Stacked: mark 80 centered above the wordmark, gap 20, wordmark 233.12 x 47.55. 233.12 x 147.55 at 1x.
- Minimum width: horizontal 232 px, stacked 140 px (the mark stays at 48 px or more). Below that, use the wordmark alone.
- Use the compact mark alone. Do not use it inside a lockup.

## Clear space

x = the satellite diameter (45/256 of the mark width). Keep at least x clear on all sides. Nothing enters the clear space: no text, edges or other graphics.

## Minimum sizes

| Variant | Digital | Print |
| --- | --- | --- |
| Trail (full mark) | 48 px | 13 mm |
| Compact mark | 16 px | 5 mm |

From 16 to 47 px, use the compact mark. Below 48 px the seven dots close up.

## Color

| Token | Value | Role |
| --- | --- | --- |
| ink | #1F1F1F | Text, mark |
| paper | #FFFFFF | Backgrounds, reverse mark |
| surface | #F6F7FB | Tiles, panels |
| line | #DADCE0 | Rules, borders |
| grey | #5F6368 | Secondary text |
| blue | #4285F4 | Primary accent |
| red | #EA4335 | Secondary (illustration only) |
| yellow | #FBBC04 | Secondary (illustration only) |
| green | #34A853 | Secondary (illustration only) |
| blue-soft | #DCE8FF | Tints |
| navy | #1B2A6B | Deep accent |

Ratio: paper 70 / ink 20 / blue 10. The four Google colors appear together only in illustration.

## Typography

Google Sans Flex throughout. Medium for display, headings, title and label. Regular for body and caption. Fallbacks: Google Sans for display, Google Sans Text then Google Sans for text.

| Style | Size | Weight | Notes |
| --- | --- | --- | --- |
| Display/56 | 56 | Medium | |
| Heading/40 | 40 | Medium | |
| Heading/28 | 28 | Medium | |
| Title/20 | 20 | Medium | |
| Body/16 | 16 | Regular | |
| Body/14 | 14 | Regular | |
| Caption/12 | 12 | Regular | |
| Label/11 | 11 | Medium | Uppercase, +6% tracking |

Line heights and families are defined in `tokens/tokens.json`.

## Dark mode

| Role | Value |
| --- | --- |
| Background | #1F1F1F, or #111111 for true dark surfaces |
| Text | #FFFFFF |
| Secondary text | #9AA0A6 |
| Dividers | #2E3035 |
| Cards | #26272B |
| Accent | #4285F4 on one element per screen (a button, a link, a highlighted number) |

Use the reverse mark and lockups. Keep the four-color palette out of UI; it may appear inside imagery only. Token overrides live under `[data-theme="dark"]` in `tokens/tokens.css`.

## Graphic device: Trajectory

The Trail in motion: a trail of dots that grows along a curve and arrives as the satellite. Use it to lead the eye toward a headline or a result. A second use is the Trail cropped large and bleeding off the edges of a layout. Keep it flat, in ink or paper, with blue for one element at most.

As a pattern, use a sparse field of single dots with generous space. Never tile the mark.

## Misuse

- Do not color the mark in more than one color, and do not use colors other than ink and paper.
- Do not put the ink mark on navy or blue.
- Do not retype the wordmark or build a lockup by hand.
- Do not tile the mark as a pattern.
- Do not rotate, skew, stretch or outline the mark.
- Do not add gradients, shadows, glows or textures.
- Do not use the Trail below 48 px / 13 mm; use the compact mark.
- Do not place the mark on low-contrast or busy backgrounds.
- Do not add, remove, resize or move the dots, and do not move the satellite.
- Do not add the old rear orbit back.
- Do not put words or lettering inside the mark.
- Do not enter the clear space.

## Stickers

`brand/stickers/` holds eight playful stickers built on the Trail. Each sticker has a full version on white (`NN-name.png`) and a transparent version (`NN-name-cut.png`). `sheet.png` shows the full set. `scripts/stickers.py` makes the set again.

- Keep the Trail recognizable in every sticker: the tilted ring, seven dots that grow in size, and the large satellite at the upper right.
- Stickers are illustration. They may use the four Google colors (blue, red, yellow, green) with ink and paper.
- Stickers carry no text, letters, numbers or logos.

Production specs:

| Spec | Value |
| --- | --- |
| Cut | Die-cut, with a 2 mm white contour around the art |
| Resolution | 300 dpi at final size |
| Final size | 70 to 76 mm |
| Material | Matte, holographic or clear vinyl |