One violet brush stroke paints the B. Instrument Serif Italic finishes the name.
Painted by hand, in one go.
The mark is a capital B painted in a single violet brush stroke, with no lift from the first touch to the flick.
That is the argument for Brace in one gesture. The work is done by people, by hand, with care, and it isn't a template. You can see the hand in it: heavy paint where the brush lands, paper showing through where it runs dry, a pause at the waist before the bigger curve, and drops thrown off the end.
The name is set in Instrument Serif Italic, and the painted B is its capital, so the lockup reads as one word, Brace. The serif is sharp and still, which lets the paint carry all the energy. Both lean forward at about the same angle, so they move as one.
Because it is a stroke, it can be drawn on. It paints itself on load, the highlight runs along it on hover, and on the load screen the flick keeps going into a brush sweep that wipes the screen.
Lockups
The painted B is the capital of the word, so the main lockup is the name itself. Every lockup below uses the outlined artwork from the asset files.
Scaling
The mark changes on purpose with size. Texture and droplets come in as it grows. Below 24px the brush texture would turn to mush, so it becomes a solid B, drawn for pixels, that keeps the brush's lean and loaded stem.
Motion
The brush paints the B in stroke order, at the speed of a hand. These three are the animation itself, held at fixed moments.
Hover. The wet highlight runs along the stroke in drawing order, as if the paint were still wet. Focus does the same with a keyboard.
Storyboard
- 0.00–0.12sBrush landsThe loaded brush touches down top left and leaves a heavier blob.
- 0.12–0.51sStemPulled straight down, slow and heavy, the way a hand starts.
- 0.51–0.78sUp-strokeWithout lifting, the brush turns and runs back up beside the stem. Less paint, so it dries out.
- 0.78–1.11sTop bowlRound the top and ease into the waist.
- 1.11–1.23sWaistThe hand hesitates for 120ms, as a real one does before the bigger curve.
- 1.23–1.68sLower bowlThe bigger bowl, with the most pressure on its right side.
- 1.68–1.85sFlickThe brush is thrown out to the lower left, crossing the foot of the stem, and the stroke tapers to nothing.
- 1.80–2.32sDropletsFive drops spring off the end of the flick.
- 1.86–2.76sWordmark"race" rises in after the B, letter by letter, so the painted B becomes the capital of Brace.
Load screen: the B paints at the centre on Paper, then the flick keeps going into one huge brush sweep that covers the screen. As the paint pulls away, it reveals the page. With reduced motion, the load screen is a short fade and everything else shows its final state.
In use
Email clients don't render SVG, so the signature uses the exported PNG at 2x. Everything else here is the live SVG.
Email signature
signature@2x.png, shown at 56px high.
Hi Sam,
Thanks for the time on Friday. I've attached the plan we talked through. Joey will send over the access list separately.
Joe
Hi Sam, here's the access list. Two logins are enough to start.
Joey
Website header
Desktop width, and inside a 390px phone frame.
Social avatar and app icon
Circle crop on Paper, and a rounded square on Brace Violet. Each at two sizes, using the right mark for that size.
The paint-wipe page transition
This direction's own application. Moving between pages, a brush sweep covers the old page and pulls away to show the new one. The same stroke as the load screen, used for every page change.
Showing page 1.
System
Five colours from the brief, plus one Muted tone for small grey text. Every ratio below is calculated from the hex values with the WCAG 2.1 formula.
#6A3BF5The paint. Kept from the current site.
#3D17B8Pooled paint at the edges, hover states, small violet text.
#A58BFFThe wet streak inside the stroke, the hover glint, accents on dark.
#F3EEE6The ground. Shows through where the brush runs dry.
#15121DThe wordmark, text, dark sections.
#5E5868Captions and labels on Paper. On Ink, use
#A9A2B6.Contrast
| Swatch | Pair | Ratio | WCAG | Used for |
|---|---|---|---|---|
| Aa | Ink on Paper | 16.00:1 | AAA | body text, headings |
| Aa | Muted on Paper | 5.92:1 | AA | captions, labels |
| Aa | Brace Violet on Paper | 5.11:1 | AA | links, large type |
| Aa | Deep Violet on Paper | 9.03:1 | AAA | small violet text |
| Aa | Paper on Ink | 16.00:1 | AAA | text on dark sections |
| Aa | Muted on Ink on Ink | 7.51:1 | AAA | captions on dark |
| Aa | Wet Highlight on Ink | 6.81:1 | AA | accent text on dark |
| Aa | Paper on Brace Violet | 5.11:1 | AA | button labels, reversed lockup |
| Aa | Paper on Deep Violet | 9.03:1 | AAA | button hover |
| Aa | Ink on Wet Highlight | 6.81:1 | AA | text on highlight |
Notes
What works, what to watch, and what's needed to finish it.
Scales well
- The silhouette holds at any size. Heavy stem, big lower bowl and the flick read from a favicon to a billboard.
- The stroke is made to be animated. It draws on, glints and turns into a page transition, all from one path.
- One colour works. The dry-brush gaps are cut out, so the mono and reversed versions show the ground through them, with no fake white.
Risks and trade-offs
- Texture costs detail in print. Embroidery, vinyl and small print need the solid version, not the textured one.
- The lockup leans on the B. "race" only reads as Brace because the painted B reads as a capital. If the B is cropped or recoloured badly, the word breaks.
- The signature PNG is transparent. In a dark-mode mail client, the Ink "race" could sit on a dark background. A Paper-backed version is a one-line export if that happens.
- The edge roughness is an SVG filter. Very old renderers drop it and show clean edges, which still looks fine.
To finalise
- Paint it for real. Paint the B with a real flat brush, scan it, and check the curves against this drawing.
- Draw a flat version for print and stitching, from the 24px silhouette scaled up and refined.
- Confirm the domain for the signatures.
- Run a UKIPO trade mark search on the name and mark before print.