Skip to content
Football Expeditions

UX principles

Cardinal design rules - what we always do, what we never do. Codified here so every design decision is repeatable.

Never translateY on hover/active

Do

Hover state: change fill, opacity, scale (1.05), shadow.

Don't

Hover state: `transform: translateY(-2px)` - element jumps, cheap promo vibe.

Never emoji in UI

Do

Linear icons from lucide-react: <Star />, <Ticket />, <Calendar />.

Don't

Emoji on buttons, badges, headings: ⚽ 🎟️ 📅.

No currency symbols

Do

EUR 250, PLN 1200, GBP 199 - always currency code.

Don't

€250, zł1200, £199 - symbols are visually inconsistent.

Prices always integer

Do

EUR 250 (rounded).

Don't

EUR 249.99 - cheap e-commerce vibe.

Semantic icons

Do

<Lock /> on secured payments, <ShieldCheck /> on entry guarantee.

Don't

<Sparkles /> everywhere. Decorative "magic" icons without meaning.

Never duplicate components

Do

One <Button /> with variants. One <Card />. One scrolling rail (LeagueSlider).

Don't

Three different button components with minor-logic differences in three places.