Stage 1 · design system
The paint
Every component the rebuild will use, rendered on your own site with your own fonts. Nothing here is live anywhere else yet.
Locked
Buttons are #A20403 with white text — the poster red. Everything is built on this now.
Buttons & fills
Add to cart, Buy now, sale badges, the selected tab. Always white text on it.
Text on dark
Prices, links, eyebrows, whoever is top of the table. The bright red, only ever on the dark ground.
A product row, the way it will actually look:
In stock only
Buttons
Panel vs card
Glass costs GPU. Panels blur — use them for nav, drawers, sticky bars, feature blocks. Cards do not — use them for product grids, where forty blurred tiles would make an Android phone stutter.
Blurs what is behind it
Chrome only. Roughly a dozen on screen at once is the ceiling.
Reads the same, costs nothing
Product grids. Hover it — lift and a red edge, no blur.
Type & data
Eyebrow · Barlow Semi Condensed 600
Real Madrid Home 26/27
Body copy is Barlow 400. Same superfamily, so the two never look like strangers. Numbers are tabular, which is why the column below lines up.
Player version
In stock
| # | Manager | GW | Total |
|---|---|---|---|
| 1 | ATM FC | 89 | 89 |
| 2 | rajaaaa gunnnn | 86 | 86 |
| 3 | INVINCIBLES | 84 | 84 |
| 4 | Kullanari Koottam | 74 | 1074 |
Your product photos are already dark
I sampled 198 product images across your catalogue. Recent stock: zero white backgrounds — all grey or dark. Only your oldest 23/24 shirts still sit on white, 19 of 70 sampled, and those are the ones in Season End Sale anyway. So dark product pages will look right, not washed out.
