STYLE GUIDE

Design system

Sports Events Egypt has one visual identity, and this page is where we keep it honest.

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.

Colours

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.

Typography

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.

How we write

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:

  • No em dashes. We use commas, semicolons, or full stops instead.
  • British spelling: organised, kilometres, metres, programme, colours, centre.
  • No brochure words: “world-class”, “premier”, “spectacular”, “extraordinary”, “a rare combination of”. They sell instead of describe.
  • Concrete is better than abstract. “Water hits 29 °C in July” beats “warm tropical waters”.
  • Numbers and facts before adjectives.

Building blocks

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.

Built to be read, not loaded

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 preview below

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

Sports Events Egypt, Style Guide

Every token, primitive, and primitive modifier rendered for visual review. Compare against the Lovable reference for sign-off (Gate 2).

Colour tokens

Background –background 0 0% 4%
Foreground –foreground 0 0% 97%
Primary –primary 46 100% 50%
Primary FG –primary-foreground 0 0% 2%
Accent Warm –accent-warm 40 22% 92%
Card –card 0 0% 7%
Muted –muted 0 0% 10%
Muted FG –muted-foreground 0 0% 68%
Surface 1 –surface-1 0 0% 6%
Surface 2 –surface-2 0 0% 9%
Surface 3 –surface-3 0 0% 12%
Destructive –destructive 0 72% 51%

Typography: display (Bebas Neue)

Heading XL clamp 3→6rem

Heading (default) clamp 2.5→5rem

Heading MD clamp 2.25→3.5rem

Heading SM clamp 1.75→2.5rem

With accent serif italic

Typography: sans (Inter)

Eyebrow default 0.7rem · tracked 0.25em

Eyebrow primary

Eyebrow accent-warm

Lede: premium directory for sports events, races, and athletic communities since 2024. clamp 1.05→1.4rem

Body 16px / 1.55, the default body line set on <body> in base.css. Long-form copy uses the editorial body primitive instead.

Typography: serif (Instrument Serif)

Editorial accent: italic serif

Buttons

Badges

Default Primary Outline Live

Cards

Default card

Background = card token, 1px subtle border, 1.5rem padding.

Elevated + interactive

Surface-1 with inner highlight + drop shadow. Hover lifts.

Form primitives

Utilities

.see-hairline-x


.see-hairline-primary


.see-live-dot (pulses every 1.8s)

Shadows + surfaces

.see-surface-elevated
.see-surface-glass

Sidebar widgets

Rendered against a light band, as they appear on single blog posts. Each widget is anchored by a 3px brand-yellow top bar; the widget body sits on a transparent surface so the page band shows through.