Brace, Direction D: Stretch
BRACE stretches to fill whatever space it’s given. Move the pointer across the word.
The word is the logo
BRACE is set in Anybody, a typeface that can be squeezed narrow or stretched wide without losing weight, and the word is always stretched to fill exactly the space it’s given. Tall and tight in a 200px email signature, long and low across a billboard. Same word, same weight, every time.
To brace is to tense up, ready to move. When the logo moves, the letters start squeezed and shaking, then let go and spring out to full width. The symbol, kept for avatars, app icons and the favicon, is that tensed moment held still: the B at its narrowest, its waist pinched where an ultraviolet bar passes through it.
That’s the pitch in one move. Brace takes the strain, the systems and the admin, so the owner doesn’t have to, and the business opens out. The chrome sits on near-black and is lit from below in ultraviolet, which keeps a thread to the purple on the current site.
Lockups
The word is the logo, so the primary lockup is the wordmark alone. The symbol never sits beside it, which would say the B twice; it’s only for square spaces: avatar, app icon and favicon. There’s no stacked lockup for the same reason.
Scaling
Detail comes in as the mark grows and drops out as it shrinks. Below 32px it’s redrawn on a pixel grid. Chrome only appears once there’s room for its horizon to read.
Motion: tension, then release
The letters are held at their narrowest and shake, then let go. They overshoot their width once and settle, and a sheen runs across the chrome.
Storyboard
- 0.0–1.0sHold. The word sits at minimum width, letters trembling 1–2px, as if held back.
- 1.0–1.9sRelease. The letters spring out past their fitted width, about 25%, and settle in one bounce, the letters spreading slightly as they go.
- 1.5–2.4sSheen. A highlight sweeps left to right across the chrome.
- hoverPull. Letters near the pointer widen; the rest give up width so the total stays the same.
- loadCompress, snap, fly. Small and trembling harder as it loads, then it snaps edge to edge in 0.65s and the camera flies through the A’s counter in 0.9s.
In use
Hi,
This week’s report is ready on your dashboard. Nothing needs your attention. We’ve handled the stock sync and the two refunds.
Speak soon,
Email signature. A PNG at 2x, because mail clients don’t show SVG. The flat wordmark in Void, so it holds on white.
Social avatar and app icon. The symbol stands tall in the circle and the square, with the under-glow behind it.
- Stores
- Automations
- Growth
- Care
Time back. Less admin.
Stores, websites and the systems behind them, run by people you can call.
Website header, desktop. The wordmark alone, fitted to a 150px slot.
Time back. Less admin.
Stores, websites and the systems behind them, run by people you can call.
Website header, 390px phone.
Fit anything
Drag the handle, or focus it and use the arrow keys. The word refits live from very narrow to very wide: width first, then letter spacing once it’s fully stretched, and the size only drops once it’s fully squeezed.
System
Six colours. Chrome is a gradient built from the three greys; ultraviolet is only ever light, the bar and the glow underneath.
| Pair | Used for | Ratio | WCAG 2.2 |
|---|
Notes
Scales well
- The word fills any slot without distortion, because the font changes its width rather than being stretched.
- The symbol is tall and narrow, so it sits comfortably in a circle, a square or a favicon tab.
- At 16px it’s a pixel-fitted B with a bar through it, and it still reads.
- The flat one-colour wordmark carries everyday use: email, invoices, print.
Risk and trade-off
- Anybody is a free Google font. The letterforms aren’t ours, so a competitor could set the same word the same way. The symbol and the fit behaviour are what make it Brace’s.
- Chrome is a screen effect. It turns muddy below 96px and doesn’t print, so the flat versions do a lot of the work.
- The live fit needs the variable font and a little JavaScript. Without it, the outlined wordmark is the fallback.
- The trembling must stay short. Played too long it reads as broken.
To finalise
- Fix the canonical width of the static wordmark (150 now) and tune its spacing and kerning by hand.
- Consider redrawing R and A so the word is more ownable.
- Test the signature PNG in Gmail, Outlook and Apple Mail, light and dark.
- Confirm the domain, then a UKIPO trade mark search on the name and mark before print.