The logo
Two versions, one drawing. White letters on ink, or ink letters on bone or white. On a light ground the bands and the stone get an ink outline, because volt alone disappears against it.
- The Y
- Unbounded's own Y, untouched. It is the slingshot.
- The stone
- A volt circle centred on the vertex of the fork, 16.4% of the letter height across.
- The bands
- 5.6% of the letter height wide, parallel to the inside edges of the arms, from the stone to the tips, cut flush with the tops of the letters.
- The gap
- A hairline, 2.2% of the letter height, between each band and its arm and around the stone: the ground itself on ink, an ink outline on light grounds.
- Spacing
- The letters keep Unbounded's own widths, with L and Y set 40 units (of 1,000) closer. Keep clear space of at least half the letter height on every side.
- Size
- At least 200 pixels wide on screens and 35 mm in print. Smaller, and the hairline gap fills in: use the icon.
- Use the files. Don't retype the name, even in Unbounded: the bands and the stone aren't in the font.
- Keep the band and the stone volt. Don't change the colours, add effects, or stretch it.
- White letters go on ink; ink letters go on bone or white. Not on photos or busy grounds.
The icon
Where the name won't fit: an app icon, a profile picture, a favicon. It is concept 5's slingshot in the logo's colours, white on ink with the band and stone in volt, or reversed, ink on volt.
- 180 px
- 120 px
- 64 px
- 44 px
- 32 px
- 20 px
Files
- Logo for dark groundsSVG, white letters, transparent ground
- Logo for light groundsSVG, ink letters, transparent ground
- App iconSVG, 1024 square
- App icon, reversedSVG, 1024 square
- Logo in motion, on inkAnimated WebP, 1800 by 600, 3-second loop
- Logo in motion, on boneAnimated WebP, 1800 by 600, 3-second loop
- Icon in motionAnimated WebP, 512 square, transparent corners
Colour
Four colours, used about in these proportions. Volt is only ever the sling: the band, the stone, and the ground of the reversed icon.
- Ink#111014RGB 17 16 20
- Bone#F1F0ECRGB 241 240 236
- White#FFFFFFRGB 255 255 255
- Volt#D9FF3DRGB 217 255 61
White on ink reads at 19:1, and volt on ink at 16.5:1. Volt on white or bone is barely there (1.2:1 and 1.0:1), which is why the light logo outlines it in ink.
Type
Unbounded ExtraBold
The logo is drawn from Unbounded at weight 800, a wide, rounded sans by NaN, free from Google Fonts under the SIL Open Font License. Its Y has straight arms that meet at a sharp vertex, which is what lets the bands run along them and the stone sit on the point.
Slyng Condensed and Slyng Text
Pull back for more
The site sets its headings in Slyng Condensed and everything you read in Slyng Text, cut from TeX Gyre Heros Condensed and TeX Gyre Adventor.
Motion
When the logo moves, it fires. A three-second loop that starts and ends in the logo pose, so it can stop after any loop and leave the logo standing.
- Hold0 to 0.5 sThe logo, still. In the last moments the stone trembles.
- Release0.5 to 0.6 sThe band snaps up, straight across the tips.
- Flight0.6 to 0.7 sThe stone flies out of the top, getting smaller.
- Ring out0.6 to 1.8 sThe empty band rings around straight and settles.
- Reload1.8 to 2.3 sA new stone drops in, and the band catches it in a shallow V.
- Draw back2.3 to 2.8 sThe pouch slides down the arms until the stone sits on the vertex.
- Hold2.8 to 3 sAnd it loops.
How it got here
Every draft, in the order it was made, over six rounds. Each round ends with what changed next; the stone marks what was picked.
Round 1: Eight ways in
The brief was the name with its Y as a slingshot. Eight concepts, each with its own typeface and colours.
Next: concept 5, the app icon, in the colours of concept 8.
Round 2: The icon in Zap's colours
Concept 5's slingshot in white on ink with the band and stone in volt, and reversed in ink on volt. Lockups with Lexend and Unbounded; on ink, the bare slingshot stands in front of the word. And the first motion: pull back, let go, ring out, reload.
- Loaded
- Drawn back
- Released
- Empty
- Reloading
Next: make the icon the Y of the wordmark.
Round 3: The icon as the Y
The whole app icon set into the word as its Y, in Unbounded and in Lexend, with the pull and release playing inside it.
Next: not the whole icon, only the bare slingshot, the way it stood in front of the word on ink. The motion stays.
Round 4: The bare slingshot as the Y
The clean slingshot stands in for the Y. Without the icon's square around it, the stone leaves through the top of the frame and the next one drops back in the same way.
Next: a Y drawn in the same style as the other letters, the band lined up with its arms, and a dark animation without the shimmer.
Round 5: Unbounded's own Y
Two takes. Unbounded's own Y, untouched, with the band along the inside of its arms and the stone in the fork; and the rounded slingshot, drawn to the weight of the letters. The motion is now rendered as whole, opaque, lossless frames, which is what stops the shimmer on ink.
Next: the own Y on ink was the closest. The stone moves down onto the vertex, the bands run along the edges of the Y all the way to the tips, and the motion goes back to the earlier sequence.
Round 6: The logo
The stone sits on the vertex. The bands run up the inside of the arms, a hairline from the edge, and stop flush with the tops of the letters. The motion is the earlier pull and release again, and every loop ends in the logo pose.
Picked: this is the logo, the one at the top of this page.