Brand

The AwaitIO brand

The logo, the name, the colors and the type, with files to download. The mark is a ring of pixels that fills while it waits, with the orange dot at its end: an await in progress.

Logo

Use the logo with the wordmark wherever there is room, the icon alone where there is not. Download the SVG for the web and print, the PNG where SVG is not accepted.

AwaitIO

Logo

The default: icon and wordmark, on sand or light backgrounds.

svg png

AwaitIO

Logo on dark

For dark backgrounds; the ink turns cream, the dot stays orange.

svg png

Icon

Favicons, avatars and app icons.

svg png

Icon on dark

The icon for dark backgrounds.

svg png

Clear space and minimum size

Keep free space around the logo at least as wide as the dot is tall, a quarter of the icon. The icon stays legible down to 16 px, the favicon size; below 24 px leave out the wordmark.

AwaitIO

64 px

32 px

24 px

16 px

States

The mark doubles as the loader of the app and the favicon: it waits with the dot, fills while a step runs and turns green with a check when the step is done. Green appears nowhere else.

The loop: waiting, running, done

Waiting

Running

Done

Icons

Every icon is drawn in the same square pixels as the mark and the sun. Large icons of cards and sections use the 32 × 32 grid with the gap showing, mid-sized icons of lists and buttons the 24 × 24 grid, small icons next to text the 16 × 16 grid.

Arrow

Blocks

Building

Chart

CheckBadge

Check

CircleCheck

CodeFolder

CrossBadge

Cross

Crowd

Cursor

Discord

GitHub

Headset

Heart

Layers

Layout

Lock

PartialBadge

Pause

Play

Plus

Replay

Team

Terminal

TypeScript

User

Name

AwaitIO is one word with a capital A, I and O, everywhere people read it: in text, in the UI, in titles and in slides.

AwaitIO

DoAwaitIO in text and titles

npm install awaitio

Doawaitio only in code, npm and the domain

Await IO

Don’tTwo words

Awaitio · AWAITIO

Don’tLowercase or all caps in prose

Description

The short description for bios and profiles. Use it as it is, in full, so AwaitIO is described the same way everywhere.

Internal tools. Just code. Write a TypeScript function, get an admin screen for your team. No drag-and-drop. Free for up to 3 users.

132 characters, fits the 160 of an X bio

Colors

Ink on warm sand, with the sun orange as the only accent and green only for a finished step. Click a value to copy it.

Ink

Text, the ring of the logo, code windows, dark backgrounds and primary buttons.

Sun

The dot in the logo and the one accent: the sun, highlights, button shadows.

Sand

The page behind everything.

Surface

Cards and windows on the sand.

Band

The strip under the hero horizon.

Done

Only a finished step: the green ring and check.

Clay

Body text next to headings.

Line

Borders and dividers inside cards.

Typography

IBM Plex Mono for the wordmark only, Silkscreen pixels for section headings, Geist Sans for everything people read and Geist Mono for code and small labels.

WordmarkAwaitIOIBM Plex Mono, "Await" semibold and "IO" regular, tracking 0.08em, one color.'IBM Plex Mono', 600 + 400

Silkscreen · section headingsHow to get a licensePixels like the ring of the logo, only for headings of sections, never for long text.'Silkscreen', 400

Geist Sans · headings and textYour code awaitsThe browser answers, and your function goes on.'Geist', ui-sans-serif, system-ui, sans-serif

Geist Mono · code and labelsawait io.input.text()const email = await io.input.text('Email');'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace