Brand
The airepeat brand
The logo, mark, colours and type, with files to download. Use them to write about airepeat or link to it.
Logo
A loop that starts again
The mark is a lowercase a drawn as one stroke: the stem rises and curls back over the bowl into an arrow. Work that comes round again, on its own. The wordmark uses the same strokes and round ends.
Your theme
Dark
Sizes: the mark stays clear down to 16px.
Downloads
Logo files
SVG files scale to any size. The one-colour files take the colour of the text around them.
- LogoFor light backgroundslogo.svg
- Logo, darkFor dark backgroundslogo-dark.svg
- Logo, one colourTakes the text colourlogo-mono.svg
- MarkFor light backgroundsmark.svg
- Mark, darkFor dark backgroundsmark-dark.svg
- Mark, one colourTakes the text colourmark-mono.svg
- App iconThe mark on its tileapp-icon.svg
- App icon, PNG512 × 512icon-512.png
Colour
Colours
Indigo and cyan on near-black, dark first with a light theme. In code, use the token names; every text pairing is checked for contrast in both themes.
--brand
Accent: links, highlights, the mark's first stop
- Light
- #4F45DB
- Dark
- #989DFF
--brand-2
Second accent: the mark's second stop, data
- Light
- #00738D
- Dark
- #47D2E8
--brand-muted
Tinted surfaces behind brand text
- Light
- #E8EDFF
- Dark
- #202148
--glow
Soft light behind heroes; never under text
- Light
- #99A3FF
- Dark
- #6159E1
--background
Page background
- Light
- #FFFFFF
- Dark
- #0A0A0A
--surface-elevated
Cards and frames on the public site
- Light
- #F9FAFC
- Dark
- #17181C
--foreground
Text and the wordmark
- Light
- #0A0A0A
- Dark
- #FAFAFA
--grid-line
Grid and dot patterns
- Light
- #E3E4EB
- Dark
- #28282E
Type
Typography
Geist for everything you read, Geist Mono for code, labels and eyebrows. Large headings are set tighter.
text-display-1 · 40–72px · 600 · −4.5%
Launch your stack
text-display-2 · 32–52px · 600 · −3.5%
Launch your stack
text-display-3 · 24–34px · 600 · −2.5%
Launch your stack
Body · text-base / text-lg
Sites, apps and open-source services on servers you own. Short, plain sentences.
Mono · font-mono
deploy sites/marketing --approve
Eyebrow
Section label
Usage
Using the logo
Keep it simple: the logo as it is, with room around it.
Do
- Use the gradient mark on the page background, light or dark.
- Use the one-colour logo where colour isn't available, in the text colour.
- Keep clear space around the logo of at least half the mark's height.
- Keep the logo at 16px tall or more; below 24px, use the mark alone.
Clear space: half the mark's height on every side.
Don't stretch or squash it
Don't rotate it
Don't recolour it outside the brand colours
Don't add shadows, outlines or effects
The name is always written in lower case: airepeat. Please don't use the logo in a way that suggests we endorse or are part of another product.