The colours were measured, not picked
Your logo has exactly two colours: black and a red we read straight from the file, pixel by pixel — #BD2026. We did not choose a red that resembles yours; we used yours. Everything on the site is built from those two, plus greys for breathing room. That is why the site looks like the academy and not like a template.
brand
logo red — fills buttons and bars
accent
red when the red is the text
ink
main text
ink-muted
secondary text
bg
page background
surface
card, panel
surface-raised
element above a card
border-interactive
form field border
Why there are two reds
Your red on a dark background is beautiful and hard to read: it reaches 3.18 to 1 in contrast, and the accessibility standard asks for 4.5 to 1 in ordinary text. So the brand red stays where it is strongest — filling buttons and bars, with white on top — and a second red, lighter but the same hue, is used when the red itself has to be the text. Two reds so nobody has to squint.
White on the brand red. This is how it appears on buttons and bars.
The second red, when the red has to be the text. The brand one would give 3.18 and fail.
Dark and light
Dark is the default: a martial arts academy reads as dark, and most people open a website at night, on the phone, in bed. But some read better on light, and phones switch by themselves after sunset. The site follows the reader's system and remembers a manual choice. Every colour was checked in both.
The typeface follows the logo
The lettering in your logo is a heavy condensed face in capitals. Headings use Oswald, the closest condensed family with a complete range. Body text uses Inter, which has to hold up in a long paragraph and in a price table without tiring the eye. Both are served from the site itself — no third-party request, and no text jumping around as fonts load.
Brazilian Jiu-Jitsu
Section heading
Body text. Classes for every age and level, in an academy that puts people first. This paragraph exists to show how reading behaves across a long line.
Movement with a limit
Content rises into place as you scroll, and the video opens the page: a still website sells a still academy. But whoever turns on "reduce motion" in their system usually has vestibular sensitivity — strong movement causes real nausea, not mild annoyance. With that setting on, everything appears without displacement and the video does not play. The site is bold by default and sober for whoever needs it.
How we know it works
Contrast is not eyeballed here. A script measures every colour pair in both themes and fails the build if any drops below the standard — so "accessible" is a command anyone can repeat, not a check made once that quietly ages. It runs against the colours in the code, so changing a colour and forgetting the check is not possible.
The pieces the site is built from
Buttons, cards, badges and form fields, all from the same set. Building pages from shared pieces is what keeps the twentieth page looking like the first.
Beginners welcome
Most people arrive having never trained. The first class is built for exactly that.
Children and adults
Separate groups by age, with instructors who work with children every week.
A safe academy
Published safeguarding policy and instructors who know each student by name.