gaffr Style Guide
A living reference of every component, colour, and state in the gaffr design system.
1. Colours
2. Typography
Heading One h1 · Inter 800
Heading Two h2 · Inter 700
Heading Three h3
Heading Four h4
Heading Five h5
Heading Six h6
Gradient Heading .al-gradient-text (cyan → gold)
This is a lead paragraph — used for intros and cinematic hero copy.
This is regular body copy set in Inter. gaffr organises 5-a-side, netball, and basketball games, letting players build their card, rate the opposition, and run their team like a manager.
Bright text (.al-text-bright) is used for high-emphasis headings and standout figures.
Primary-coloured text (.al-text-primary) highlights links and live states.
Gold text (.al-text-gold) flags MOTM honours and top-tier callouts.
Muted text is used for secondary information such as timestamps and captions.
Monospace text (JetBrains Mono) is used for scores, ratings, and tabular numerics: 24 · 7.8 · 82
Uppercase label — letter-spacing: 0.04–0.06em
3. Buttons
4. Forms
5. Badges & Status Chips
6. Player Cards
Mini cards hide the club row and attribute grid to stay compact for lists and rating flows. Hero cards scale up to 300px for profile pages and MOTM reveals.
7. Tables (Manager Console)
| # | Team | P | W | D | L | GD | Pts | Form |
|---|---|---|---|---|---|---|---|---|
| 1 | FC United | 18 | 14 | 3 | 1 | +31 | 45 | WWDWW |
| 2 | Athletic Lions (You) | 18 | 12 | 4 | 2 | +22 | 40 | WDWWL |
| 3 | Kings SC | 18 | 10 | 5 | 3 | +14 | 35 | DWWLW |
| 4 | Rovers FC | 18 | 9 | 4 | 5 | +6 | 31 | LWDWL |
| 5 | Riverside Rangers | 18 | 7 | 4 | 7 | -2 | 25 | LLDWD |
| 9 | Downtown Dynamos | 18 | 3 | 2 | 13 | -24 | 11 | LLLDL |
| 10 | Harbour Hornets | 18 | 1 | 3 | 14 | -33 | 6 | LLLLD |
Cyan bar = promotion zone, gold = play-off zone, red = relegation zone. Table collapses to stacked cards below 768px.
8. Fixtures
9. Form Indicators
10. Animations
Click each button to preview the full-screen animation sequence. These trigger the JS helpers exposed in theme.js. Only three moments in the product get this cinematic treatment: card reveal, MOTM announcement, and tier-up.
11. Alerts
12. Lists
- Weekly 5-a-side — Riverside Park Sat 10:00
- Netball Ladder Night Pending
- Basketball Pickup — Central Hall Paid
13. Surfaces & Utilities
.al-card / .al-card-header / .al-card-body — elevated slate surface with subtle border.
.al-shadow-glow + .al-border-accent add a cinematic cyan halo for emphasis.