Built for the next round.
The living Ball Quiz design system. Light album paper, real football identities and one clear next action.
See the platformGive your football brain a run-out.
One mark. One football world.
A football inside a Q. Use the shared mark at every size; the club badges belong to the clubs.
Standard wordmark · navigation, footer and product screens.
Football is the subject. The quiz is the action. Real crests and flags help people recognise the clubs; the Ball Quiz mark identifies the platform.
Use the original geometry, clear space and strong contrast. Do not replace club badges with generated logos.
Album paper. Cobalt play.
Cobalt leads to play. Lime gives the collection its character. Correct and incorrect answers have words, icons and their own semantic colours.
Paper
#fbfcf8--desk-paperThe page canvas
Surface
#f0f2e9--desk-surfaceSettings and quiet panels
Ink
#17241e--desk-inkHeadlines and reading
Muted
#56635a--desk-mutedSupporting information
Rule
#d9dfd5--desk-lineSeparation without boxes
Cobalt
#2449d8--desk-accentActions and keyboard focus
Album
#d8ec78--bq-limeBadge collections and the mark
Blue surface
#e9eefb--bq-blue-surfaceCollection previews
Answer success: #047857 on #e5f2e8, with #065f46 text. Answer error: #b4232c on #fbeeee. Never communicate a result with colour alone.
A football voice. A readable answer.
Self-hosted Barlow Condensed Bold carries display and headings. Inter carries instructions, choices and data. No remote font requests.
Think you know
football?
Display · Barlow Condensed · responsive 54–88 px.
A whole world of badges.
Section heading · condensed, direct, never truncated.
Look for a familiar colour, a local symbol or a name hidden in the crest. Choose your answer, then learn the club behind the badge.
Reading · Inter · comfortable 65–75 character measure.
120 points · 7 / 10 answers
Sample data · tabular numbers; answers and inputs stay at least 16 px on mobile.
Say what the next action does.
One primary action, visible labels, 44 px minimum targets and a cobalt focus outline. These examples affect this preview only.
Try the action, or press Tab to inspect keyboard focus.
A short round with visible progress.
Enter an email address such as [email protected].
The game stays clear at every state.
These are demonstration answers and sample scores. No attempt is created, and no result goes to the leaderboard.
The same score-bar component serves badge, country and map rounds. The server owns real scores and progress.
Answer choices
Pending and completed answers are disabled. Every result is named, and full club names wrap.
Feedback and recovery
Example feedback: Ajax is based in the Netherlands.
Play a real roundOffline example: reconnect to submit your answer.
Collections with real clubs inside.
One shared component presents region, league and country collections. These examples use real available pools and actual eligible badge counts.
Europe
Take a badge tour of European football. Familiar giants and lesser-known clubs share the board, with a new detail to recognise in every crest.
1,256 club badges
Region collection · same link, club count and fallback as the homepage.
Premier League
League collection · same link, club count and fallback as the homepage.
England
231 badgesCountry collection · same link, club count and fallback as the homepage.
League pools can include recorded participants from past seasons. A sample collection is not a current-season membership claim.
Shared rules. Fewer one-off decisions.
Build with the shared shell and components. Keep identity, controls and recovery consistent across the whole platform.
Space and shape
Use the 4, 8, 12, 16, 24, 32, 40, 48 and 64 px spacing scale. Controls use an 8 px radius. Collection and game panels use 12–16 px. Flat rules organise ordinary rows.
Responsive by purpose
The container stops at 1280 px. Reflow desktop columns for mobile; do not shrink the game. Answer targets stay at least 56 px tall, long names wrap and a useful primary action remains visible.
Motion with a stop button
The football ribbon is the homepage's authored motion. It pauses for reduced motion, hidden tabs, offscreen content, hover and focus. Game controls never move underneath a player.
Honest football information
Unknown is not zero. An empty state explains how to continue. Real question badges never reveal club names before submission. Examples and demo values are always labelled.
| Source | Owns |
|---|---|
DESIGN.md | Visual contract and implementation evidence |
resources/css/ball-quiz.css | Brand tokens, public layouts and component states |
components/ball/ | Brand mark, section headings, score bars and collection links |
components/desk/ | Shared crests, reading headings and empty states |
layouts.app | One navigation, footer and Livewire shell |
This developer-facing page is marked noindex and does not serve advertising.