Ideas from
0 to 1.

The Trail is the AI2 Labs mark. Seven dots are the team. They grow along an orbit and become the satellite: an idea that ships.

Get the assets Read the rules

One gesture, three ideas.

Labs is where builders at AI2 take ideas from zero to one. Read the mark from left to right. Select a line to see its part.

Three parts. One color.

Always use the files. Do not redraw the mark, move a dot or add a color. Use ink on light grounds and paper on dark grounds.

SatelliteThe idea. The eighth and largest dot.
RibbonThe orbit. Full weight around the loop, thin along the top.
DotsThe team. Seven dots that grow with equal gaps.

Variants

Trail, inkSVG
Trail, paperSVG
Compact, inkSVG
Compact, paperSVG

The mark and the name.

The wordmark is outlined Google Sans Flex Medium. Use the lockup files as they are. Do not rebuild or retype them.

Mark height = type sizeA 64 px mark goes with 64 px type.
Gap = one word space12 px at a 64 px mark. Stacked: mark 80, gap 20.
Minimum widthHorizontal 232 px. Stacked 140 px. If smaller, use the wordmark alone.

Room around it. Big enough to read.

Keep one satellite diameter clear on all sides. Use the Trail at 48 px and up. Below 48 px the dots close up, so use the compact mark.

x

x = satellite diameter (17.7% of the mark). Keep everything outside the dashed line.

96 pxUse the Trail
1648200 px
128
96
64
48 · Trail
32
24
16 · Compact

Six ways to break it.

The Trail works when its rhythm is correct: steady growth, equal gaps, one color and clear space around it.

Do not rotate the mark.
Do not stretch or skew the mark.
Do not recolor the mark. Use ink or paper.
Do not outline the mark.
Do not put the ink mark on blue or navy.
Do not put text in the clear space.

Mostly paper. Some ink. A little blue.

Select a color to copy its value. The mark uses ink or paper only. Use blue on one element per screen. Red, yellow and green are for illustration.

Ratio by areaThe dark theme swaps paper and ink. The mark follows.

Google Sans Flex.

Use Medium for display, headings, titles and labels. Use Regular for body text and captions. Select a line to type your own words.

Display 5656 px · 500 · 1.1Ideas from 0 to 1
Heading 4040 px · 500 · 1.15Build it, then ship it
Heading 2828 px · 500 · 1.2Seven dots, one idea
Title 2020 px · 500 · 1.3The team builds momentum
Body 1616 px · 400 · 1.5Builders at AI2 Labs take hugely impactful ideas from zero to one and ship them.
Body 1414 px · 400 · 1.5Use the files in the pack. Do not redraw the mark.
Caption 1212 px · 400 · 1.4Trail at 48 px and up. Compact mark below 48 px.
Label 1111 px · 500 · 1.3AI2 Labs

Everything in the pack.

All files come from one source in the repository. Use SVG for screens and print. Use PNG when a tool needs pixels. Use PDF for print.

Motion

The Trail reveal as animated SVG, video and GIF.

trail reveal ink
trail reveal paper

Icons

Favicons, app icons and a web manifest. The compact mark below 48 px, the Trail above.

icon 1024
icon 1024
apple touch icon
apple touch icon
maskable 512
maskable 512
favicon 48
favicon 48

Social

Avatars, link previews and profile banners.

og image
og image
og image dark
og image dark
avatar ink
avatar ink
avatar paper
avatar paper

Slides

Cover, section, content and end slides at 1920 × 1080, light and dark.

slide cover light
slide cover light
slide cover dark
slide cover dark
slide content light
slide content light
slide end dark
slide end dark

Backgrounds

Video-call, desktop and phone backgrounds.

video call light
video call light
video call dark
video call dark
desktop dark
desktop dark
phone dark
phone dark

Stationery

Business card and letterhead, print-ready PDF.

business card front
business card front
business card back
business card back
letterhead letter
letterhead letter

Email

An HTML email signature that works in Gmail.

signature preview
signature preview

Stickers

surf cat
surf cat
seven builders
seven builders
stepping stones
stepping stones
liftoff
liftoff
mission patch
mission patch
yarn nap
yarn nap
pull toy
pull toy
level up
level up
chrome bubble
chrome bubble
acid burst
acid burst
ceramic drip
ceramic drip
groovy badge
groovy badge
pixel trail
pixel trail
riso print
riso print
holo card
holo card
glow orbit
glow orbit
moon stamp
moon stamp
trail washi
trail washi
holo pool float
holo pool float
gummy dome
gummy dome
wax seal
wax seal
ramen orbit
ramen orbit
paper boat ships
paper boat ships
chick parade
chick parade
seven matches
seven matches
ant team
ant team
mission patch
mission patch
coins
coins
liftoff
liftoff
comet smile
comet smile
ringed planets
ringed planets
seven plus one
seven plus one
acid burst
acid burst
groovy badge
groovy badge
holo trail
holo trail
yolk escaped
yolk escaped
bigfoot
bigfoot
snail ships
snail ships
orbital oyster
orbital oyster
orange peel
orange peel
matchbox moth
matchbox moth
bad landing
bad landing
fireflies
fireflies

Core files and tokens

Mark

Lockups

Wordmark

Tokens

Use the tokens

Color, type and spacing as CSS custom properties. The dark theme is under [data-theme="dark"].

<link rel="stylesheet" href="tokens/tokens.css">

.title {
  font-family: var(--ai2-font-display);
  font-size: var(--ai2-type-title-20-size);
  font-weight: var(--ai2-type-title-20-weight);
  color: var(--ai2-color-ink);
}
// tailwind.config.js
module.exports = {
  presets: [require('./tokens/tailwind.preset.js')],
}

Read all rules in docs/guidelines.md. Design file in Figma.