Hover or focus the mark: the halves part and click back.
The idea
The B is two identical halves stacked, one cobalt and one tangerine. Neither half is the letter alone; it only becomes a B when the two sit together.
“A brace of” means a pair. Brace is two founders, Joe and Joey, who own it 50/50, so the mark is drawn as a pair: the same D shape twice, exactly equal, with a deeper strip of indigo where they overlap. That strip is the part they share.
It also says something about the work. Brace takes the separate pieces of a business, the store, the site, the reporting, the ads, and makes them fit. The halves drop in, squash, bounce and lock together, and the motion feels like things clicking into place rather than being assembled.
Lockups
The symbol is the B of Brace, so there’s no stacked lockup: with the symbol over “race” the word splits in two. Square spaces use the symbol alone.
Scaling
Big, it shows both halves and the strip where they meet. Small, it fuses into one single-colour B, counters kept, so it still reads at 16 pixels.
Hero, 560px and up.
The full drawing, at the size the motion is designed for.
Motion
Physics with a bit of character: the halves fall, squash on landing, bounce and settle into each other. The word pops in after, one letter at a time.
Hover or focus: part and click back
Storyboard
- The tangerine half falls in, stretching as it speeds up.
- It lands and squashes from its base, to 112% wide and 80% tall.
- One bounce, a smaller second landing, then it settles.
- The cobalt half drops on top of it.
- Both halves squish together, the indigo strip appears where they overlap, and a small jiggle settles them.
- The word pops in letter by letter, each overshooting by 12% before it settles.
- The halves part by 10 units, hold, then click back with a small squash.
- The halves orbit while the page loads (1.1s a turn), slam together in 300ms, the B swells, fills the screen, and the screen parts, cobalt up and tangerine down, in 720ms.
In use
Email signature
The logo is the exported PNG at 2x, because email clients don’t show SVG.
Hi,
Thanks for the time today. I’ll write up what we covered and send it over, with the next steps for each part.
Joe
Hi,
That’s sorted on our side. Let me know if anything looks off and I’ll take another look this week.
Joey
Website header
Social avatar and app icon
The pattern and shape system
The D is a module. Tiled, rotated and paired, it makes patterns, waves, dividers and bullets, so the brand can fill a page without anything else.
Grid, rotated tiles
Waves, rotated Ds
Divider strip
Pairs back to back. Use it between sections, along a footer, on packaging tape.
List bullets
Sticker sheet, palette pairings only
System
| Text on background | Ratio | Normal text | Used for |
|---|
Notes
What scales well
- The silhouette is simple: two shapes, no thin parts. At 16px it fuses into a one-colour B whose counters still show.
- The D module carries the brand on its own, in patterns, dividers and bullets, with no logo in sight.
- The motion is cheap to build: transforms and opacity only, so it runs smoothly on phones.
The honest risk
- With equal bowls, the symbol alone sits close to two stacked Ds. The counters and the tight waist pull it back to a B, but it’s a B with an unusual symmetry.
- Three colours in the mark means three inks in print. The one-colour version swaps the strip for a gap of the same shape.
- Tangerine fails contrast as text on cream (2.70:1). It stays a shape colour, never body text.
- Unbounded is very wide, so the horizontal lockup needs room in tight headers.
To finalise
- Pick the overlap strip or the gap as the default join.
- A type designer to check the redrawn b against the rest of Unbounded.
- Print references for cobalt and tangerine, which are both outside what CMYK prints well.
- Brace’s domain, for the signatures.
- A UKIPO trade mark search on the name and the mark.