Default card
Background = card token, 1px subtle border, 1.5rem padding.
Design system
We work with a small palette, two type families, and a handful of shared building blocks. Every page on the site, whether it is a sport guide, an event listing, or a club profile, is made from the same pieces. That keeps the experience calm and recognisable, and it makes the site easy to add to without it drifting into chaos over time.
Our colours come from the desert and the sea. A deep navy reads as the main background, with warm sand and off-white for foreground text, and a single bright yellow for moments that need to stand out: a button, a date pill, a highlighted word. We use the yellow sparingly. If everything is highlighted, nothing is.
We pair two fonts. Bebas Neue for display headings, set in upper case, gives the site a confident, sporting feel. Inter handles body text, navigation, and small print. It is easy to read on phones and works well in English and in transliterated Arabic names.
Headings are short. Body text aims for a B1 to B2 reading level so the site is comfortable for visitors who do not read English as a first language. If a sentence is over twenty-five words, we look for a place to split it.
The voice is honest and helpful. We describe what is actually there and trust readers to decide. A few rules we apply across every page:
The site is built from a small set of shared pieces: event cards, club cards, headings with an eyebrow above them, filter pills, hero banners, and editorial bodies like this one. Every event card on the site, no matter which page you find it on, is rendered by one piece of code. The same goes for clubs, filters, and date pills. When we change one of these pieces, every page that uses it changes too. That is why the site stays consistent as it grows.
Pages on this site arrive at your browser already complete. There is no heavy app loading in the background, no flash of empty cards, no script that has to finish before you can read. That makes the site fast on a phone, friendly to screen readers, and visible to search engines exactly as you see it.
The section beneath this article shows the colours, fonts, buttons, badges, and cards we use, all on one page. It is our reference when we add something new and want to make sure it fits.
Phase 2: design system
Every token, primitive, and primitive modifier rendered for visual review. Compare against the Lovable reference for sign-off (Gate 2).
Heading XL
Heading (default)
Heading MD
Heading SM
With accent serif italic
Eyebrow default
Eyebrow primary
Eyebrow accent-warm
Lede: premium directory for sports events, races, and athletic communities since 2024.
Body 16px / 1.55, the default body line set on <body> in base.css. Long-form copy uses the editorial body primitive instead.
Editorial accent: italic serif
Background = card token, 1px subtle border, 1.5rem padding.
Surface-1 with inner highlight + drop shadow. Hover lifts.