More than a gym: a site for a Brazilian Jiu-Jitsu dojo

A lean, mobile-first website for a BJJ academy in New Plymouth, New Zealand, built around one goal: getting people onto the mats for a first class.

Illustration, not a screenshot.
Client
Eight Seas Jiu-Jitsu
Location
New Plymouth, Taranaki, New Zealand
Year
2026
Services
Web design & development, Brand application, Hosting set-up
Stack
Static HTML, CSS, Vanilla JS, Vercel
Status
Built; launch details to confirm

01 The brief

Eight Seas Jiu-Jitsu (Oito Seas) is a Brazilian Jiu-Jitsu academy upstairs on Liardet Street in central New Plymouth, teaching kids, teens and adults.

The job was a small, fast, mobile-first site with one purpose: help someone who has never trained before work out where the dojo is, which class suits them and how to get in touch. No unnecessary extras.

Five pages: Home, Classes (with the weekly timetable and a first-class FAQ), About, Coaches and Contact.

02 Brand

The name says ocean. The brand says otherwise.

“Eight Seas” suggests sea blue, but the gym’s real identity, across its Instagram, YouTube and printed timetable, is mustard and gold on black and cream, with a jaguar roundel mascot and Mount Taranaki. We built the palette from those real materials rather than the name.

Type pairs Unbounded (wide geometric caps for headings, nav and day names) with Alegreya Sans (a warm humanist body face). Jaguar-rosette textures, small radii, heavy black borders and hard offset shadows give it a printed, sticker-like feel instead of soft gradient cards.

  • Ink#0E0C08
  • Gold#F2B41B
  • Mustard#C5B63A
  • Cream#F6F0DF

Text on yellow is always black. Contrast was checked for every pairing (for example ink on gold at 10.5:1).

03 The timetable

The most-visited part of any gym site, so it got the most engineering.

  • Desktop: a seven-column week grid. CSS subgrid lines classes up by start time across days, with a simple-column fallback.
  • Tablet and phone: two-column day cards, then stacked cards.
  • Today: a small script tags today’s column using New Zealand time and sets aria-current="date". Without JavaScript, nothing is hidden.
  • Categories use shape as well as colour (circle for kids, square for adults, diamond for open mat), so they don’t rely on colour alone.
  • A standing note asks people to message the gym to confirm, because timetables change.
Sketch of the timetable component, redrawn here in the client’s palette.

04 Build

No build step

Plain HTML, one stylesheet and a small vanilla script. Nothing to update, nothing to break.

Accessible by default

Semantic HTML, AA contrast, keyboard-friendly menu, and a layout that holds down to 360px wide.

Motion with restraint

Headline rise, scroll reveals and a keyword ticker, all switched off under reduced-motion settings.

Found on maps

LocalBusiness structured data, per-page titles and descriptions, and an embedded map on Contact.

Hosted on Vercel

Clean URLs, security headers and sensible caching, configured in one small file.

Content kept honest

Unverified stats were left out, and prices and trial terms stay as clear to-dos until the gym confirms them.

05 Left out

Knowing what not to build is half the job. Deliberately out of scope:

  • Blog
  • Shop
  • Member login
  • Payments
  • Booking engine
  • CMS
  • Cookie banners & analytics
  • Testimonial carousel
  • Stats counters
  • Video-heavy sections

06 Outcome

We only publish numbers we have measured. Results for this project will be added once there is real data to report.

TODO(Chris): outcomes, live URL, client quote (with permission), real screenshots

T−00 Launch

Need a site that does one job well?

Tell us what you’re building. The reply comes from the developer who would build it.

Start a project Explore services