Brazilian Jiu-Jitsu academy
BJJ House Academy
Willesden, London
The identity system we built for BJJ House — measured from their own logo rather than chosen to resemble it. This is the summary; the living version sits inside their site, where the swatches are painted by the site's own tokens.
Colours measured, not picked
Their logo has exactly two colours: black, and a red we read pixel by pixel from the file — #BD2026. We did not choose a red that resembles theirs; we used theirs. Everything else is grey, for breathing room.
Two reds, and why
The brand red on a dark background reaches 3.18:1 in contrast, and the accessibility standard asks 4.5:1 in body text. So the brand red fills buttons and bars with white on top, and a second red — lighter, same hue — is used when the red itself has to be the text.
Brand red — as a background
RGB 189 · 32 · 38
CMYK —
Accent red — as text
RGB 227 · 86 · 91
CMYK —
Background
RGB 11 · 11 · 12
CMYK —
Surface
RGB 20 · 20 · 22
CMYK —
Raised surface
RGB 28 · 28 · 31
CMYK —
Text
RGB 245 · 245 · 244
CMYK —
Secondary text
RGB 161 · 161 · 166
CMYK —
Every pair is measured, not eyeballed: a script reads the tokens from the site's own CSS and fails the build if any pair drops below the standard. On the page background, white on the brand red gives 6.18:1 and the accent red as text gives 5.39:1, where the brand red gave 3.18:1 and failed. The tightest pair in the system — the accent on a raised surface — is 4.65:1, and that is the one the script was built to catch.
Typography
Oswald
500 · 600 · 700
Headings. The lettering in their logo is a heavy condensed face in capitals, and this is the closest condensed family with a complete range.
Inter
Regular
Body text, which has to hold up in a long paragraph and in a price table without tiring the eye.
Movement, with a limit
Content rises into place as you scroll and video opens the page: a still website sells a still academy. But “reduce motion” is a system setting people turn on for a reason, and for some of them strong movement causes real nausea, not mild annoyance. With that setting on, everything appears without displacement and the video does not play.