Build the championship before the screens.
Teams, drivers, race results and points share a structured source. That makes the standings and individual pages consistent instead of turning every screen into a separate mockup.
Motorsport / Systems · 2026
IONRUSH
One championship.
An entire world.
An entirely fictional electric racing championship in Morocco, with original circuits, teams, drivers and an illustrated race experience.
IONRUSHVisual language
Inside the project
The whole picture.
A source-reviewed overview of the website, its content and the systems behind it.
- Published pages
- 50
- Distinct photographs
- 40
- Language
- English
- Build
- Python static generator · HTML · CSS · JavaScript
- Hosting
- GitHub Pages
- Media
- 40 WebP assets · Cloudflare R2
- Audience
- A racing enthusiast moving between a race, its circuit, the teams and the championship standings.
- Teams
- 8
- Drivers
- 16
- Circuits / races
- 8 / 8
Colour language
Carbon#101216
Race lime#DFFF38
Ivory#F2F0E9
Coral#FF553D
Original website typefaces
- Barlow Condensed
- DM Sans
- IBM Plex Mono
How these figures were counted
50 static HTML destinations. All 40 distinct WebP photographs are referenced in the published site. Source and published copies are counted once.
Reviewed 23 October 2026. Duplicate source copies, error pages and responsive image variants are excluded. Counts describe the original website, not this case study.
View the reviewed source ↗The starting point
Start with a world.
Give it a reason to exist.
I wanted to see how far one fictional championship could go beyond a dramatic homepage. I built teams, drivers, circuits, a calendar and results around the same set of records, so every part of the site belongs to the same world.
Design decisions
Why it looks
the way it works.
Three decisions that connect the visual language to the experience.
Use contrast to separate story from data.
Carbon surfaces and lime signals carry the race identity. Condensed display type gives the editorial sections energy, while mono labels make dates, positions and technical details easy to distinguish.
Give each race a place in the system.
Eight Moroccan-inspired circuits have their own pages and conceptual route diagrams. Each links back into the race centre and the wider championship.
From design to behaviour
A circuit is part of a larger system.
Switch between three original circuit diagrams. Each is taken from the project's published source and links to its complete circuit page.
Championship standings
Driver and team views present the same fictional points championship from two perspectives.
Explore this feature ↗Circuit explorer
Eight dedicated destinations connect location, circuit character and a schematic route.
Explore this feature ↗Race centre
An interactive replay illustrates synthetic race positions alongside the authored race results. It is a concept animation, rather than live telemetry.
Explore this feature ↗One identity. Different compositions.
Built for the screen
in front of you.
On a phone, the championship keeps its strong contrast while navigation and race data are reorganised for a narrower reading surface. The essential results remain regular HTML.
What I explored
A visual idea,
carried all the way.
The visual energy only works because the underlying relationships hold together. The championship can be explored through a driver, a team, a circuit or a race without losing its logic.