---
title: "Champions for Good Club design system"
variant: extended
source: https://www.champions4good.club/
captured_at: 2026-10-12
theme: light
industry: other
generator: Design DNA (https://four.wiralomi.com/style/champions4good-club)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Champions for Good Club · Design System

> A bold, athletic identity built around meaningful connection

**Theme:** light · **Industry:** other · **Source:** https://www.champions4good.club/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Champions for Good Club presents its athlete and business network through oversized condensed typography, vivid accents, and immersive media. A restrained light canvas alternates with deep dark sections to make the club’s mission and stories feel direct and memorable.

## North star

Use oversized athletic typography and immersive media against restrained colour fields, letting each section make one clear visual statement.

## Overview

The visual identity pairs a near-white canvas with deep, warm brown and aubergine section bands, then uses electric lavender, mint, and amber as high-impact signals. The hero is an immersive dark field dominated by gigantic uppercase condensed lettering; its scale and tight vertical rhythm give the page a sporting poster quality. Neue Montreal carries navigation, body copy, and supporting statements, keeping long-form information readable beside the display type. Content alternates between spacious light sections, full-bleed video and photography, and a dark mission block with graphic sport-inspired artwork. Layouts favor strong alignment, broad open areas, and compact groups of supporting elements rather than dense cards. Amber appears in navigation actions and fine outlines, while accent colours make headlines and key graphic elements stand apart. The overall treatment is editorial and high-contrast, with media doing much of the storytelling and little reliance on decorative elevation.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Pitch Ink | `#121212` | `--color-pitch-ink` | neutral | Near-black text on light sections, especially compact body copy and dark mission-related lettering. |
| Gallery White | `#fbfbfb` | `--color-gallery-white` | neutral | Main canvas and background for editorial copy, testimonial content, and the mission statement section. |
| Goalpost Brown | `#291900` | `--color-goalpost-brown` | surface | Warm dark band behind the club-goal section; also informs the contrasting navigation and amber controls. |
| Track Amber | `#ffac47` | `--color-track-amber` | accent | Navigation links, Join action, small brand marks, and fine outlined details against dark backgrounds. |
| Victory Mint | `#94ffe4` | `--color-victory-mint` | accent | Bright headline and text accent measured in the palette; use sparingly for emphasis on dark fields. |
| Stadium Aubergine | `#23002b` | `--color-stadium-aubergine` | surface | Deep purple hero and section field behind the oversized title and lavender sport graphics. |
| Electric Lilac | `#e894ff` | `--color-electric-lilac` | accent | Hero headline, athlete iconography, and graphic emphasis on the dark aubergine canvas. |

### Semantic aliases

`--color-canvas` → `#fbfbfb` (Gallery White) · `--color-surface` → `#291900` (Goalpost Brown) · `--color-surface-2` → `#23002b` (Stadium Aubergine) · `--color-text` → `#121212` (Pitch Ink) · `--color-border` → `#ffac47` (Track Amber) · `--color-accent` → `#94ffe4` (Victory Mint) · `--color-accent-2` → `#e894ff` (Electric Lilac) · `--color-accent-3` → `#ffac47` (Track Amber)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#121212` | `#fbfbfb` | 18.1:1 | AAA |
| `#121212` | `#291900` | 1.1:1 | fail |
| `#121212` | `#23002b` | 1.01:1 | fail |
| `#94ffe4` | `#fbfbfb` | 1.15:1 | fail |
| `#94ffe4` | `#291900` | 14.34:1 | AAA |
| `#94ffe4` | `#23002b` | 15.98:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Neue Montreal | `--font-body` | webfont | 600, 400, 500 | Navigation, body copy, captions, and supporting editorial text. | Inter |
| Druk Condensed Super Desktop | `--font-display` | webfont | 500, 400 | Oversized hero and section display headlines. | Teko |

- **Neue Montreal:** Use regular to semibold weights; keep body copy compact and sentence case, with slight negative tracking on larger headings.
- **Druk Condensed Super Desktop:** Use heavy condensed uppercase display lettering with tight line spacing; preserve dramatic scale and strong vertical stacking.

### Type scale — Custom (ratio ≈ 1.817, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 317px | 400 | 0.51 | 0 | — | Druk Condensed Super Desktop | Immersive hero statement, set at extreme scale. |
| h1 | 187px | 500 | 0.78 | 0 | uppercase | Druk Condensed Super Desktop | Primary uppercase display headline in the hero. |
| h2 | 151px | 500 | 0.78 | 0 | uppercase | Druk Condensed Super Desktop | Large uppercase headings introducing major sections. |
| h3 | 57.5px | 600 | 1 | -0.022em | — | Neue Montreal | Prominent supporting statements and editorial subheads. |
| h4 | 44px | 400 | 3.68 | 0 | — | Druk Condensed Super Desktop | Condensed display accents or compact secondary headings. |
| body | 16px | 400 | 1.1 | 0 | — | Neue Montreal | Paragraph copy, navigation labels, and supporting descriptions. |
| caption | 15px | 500 | 1.3 | 0 | — | Neue Montreal | Small media credits, labels, and compact navigation text. |

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 3, 4, 8, 9, 10, 11, 12, 16, 20, 32, 40, 48, 96, 160, 192 px.
- Section rhythm 32px · element gap 8px · card padding — · max content width 1376px.

The page uses a broad centered composition within a measured maximum width of 1376px, with the hero title occupying most of the viewport width. A four-column content arrangement appears in the introductory statement section; later editorial and testimonial content shifts to two columns or a single full-bleed media panel. Section backgrounds alternate between open light canvas and dark immersive bands. Measured spacing follows an 8px base with a compact density, while the large vertical separation between major story blocks gives the overall page a deliberate, cinematic rhythm.

## Shape & elevation

- Radius: media `14px` · xs `14px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page is predominantly flat, with contrast created by broad colour fields rather than shadows or stacked cards. Fine amber outlines appear on small navigation controls, and measured media corners use a 14px radius. Let image/video crops and overlapping headline scale provide depth; avoid adding unmeasured shadow treatments.

## Imagery

Use full-bleed video and photographic storytelling as the principal counterpoint to the typography. The testimonial includes a wide video frame and small supporting portraits; the goal section uses bold sport-inspired graphic artwork. Keep media framing clean and editorial, with rounded image corners where present. Avoid introducing decorative illustrations that compete with the real athlete imagery.

## Components

### Header navigation

Compact horizontal header with the club mark at left, member and event links, a sound toggle, and a right-aligned Join action. Amber provides the measured link and action accent.

### Hero display

Dark aubergine field with an oversized condensed uppercase statement, small sport iconography, and a vivid lilac headline.

### Intro statement

Editorial message arranged across a measured four-column section, supported by image and graphic elements on a light canvas.

### Full-bleed media

Wide video or image panel that interrupts the open editorial layout with immersive, edge-to-edge storytelling.

### Testimonial panel

Two-column editorial story with a video, prominent quote, and compact athlete identification and portrait imagery.

### Mission band

Warm brown full-section field with a large uppercase heading and bold sport-inspired amber artwork.

### Mission editorial

Light-background two-column text section, using condensed display phrases and graphic accent blocks to explain the mission.

### Measured component styles

- **Primary button** (“Sounds Sounds”): transparent background · text #ffac47 · radius 0px · padding 0px · 500 15px Neue Montreal
- **Link** (“Members Members”): transparent background · text #ffac47 · radius 0px · padding 0px · 500 15px Neue Montreal

## Do

- Use Druk-style condensed uppercase typography for major statements.
- Keep the hero dramatic, dark, and dominated by its headline.
- Use lilac and amber as selective high-contrast accents.
- Alternate open light sections with deep colour bands.
- Make athlete photography and video feel immersive and editorial.
- Keep supporting copy in a clean sans-serif.

## Don't

- Do not add unmeasured colours or gradient treatments.
- Do not make the page feel like a dense card-based dashboard.
- Do not use soft shadows to create depth.
- Do not let body copy compete with the display headlines.
- Do not add excessive borders or ornamental UI.
- Do not treat illustration colours as additional brand palette colours.

## Agent prompt

Build a new page in the Champions for Good Club visual style. Use Gallery White (#fbfbfb) for editorial canvases, Stadium Aubergine (#23002b) for immersive hero fields, and Goalpost Brown (#291900) for warm dark section bands. Reserve Electric Lilac (#e894ff), Victory Mint (#94ffe4), and Track Amber (#ffac47) for focused headline, icon, link, and outline accents; use Pitch Ink (#121212) for readable copy. Pair a heavy condensed display face such as Teko with a clean sans such as Inter. Let one oversized uppercase statement anchor the hero, then alternate spacious text sections with full-bleed athlete media and a strong dark mission block. Keep layouts broad and editorial, use measured compact spacing, and avoid shadows, decorative gradients, or crowded cards.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-viewport dark hero with centered sport icon and oversized stacked display headline. | immersive first impression, brand statement | deep aubergine field, condensed uppercase type, lilac headline |
| 2 | feature-grid | Light editorial section with a four-column arrangement and multiple image or graphic elements. | introduce the network, scan key message | open light canvas, left-aligned headings, image-led grid |
| 3 | video | Single full-bleed media panel spanning the page width. | watch brand story, immersive media | edge-to-edge video, clean crop |
| 4 | testimonials | Two-column editorial block pairing full-bleed video with a quote and compact portraits. | read member perspective, browse testimonial media | large quote, video panel, small portrait images |
| 5 | feature-split | Dark full-section band with a large heading and sport-inspired graphic treatment. | explain club purpose, build brand recognition | warm brown background, amber artwork, bold section heading |
| 6 | other | Light two-column editorial section with stacked display phrases and graphic accents. | explain the mission, emphasize key principles | condensed display type, lavender and aubergine blocks, open white space |

## Source CSS custom properties (selected)

```css
--colors--brand-color: #e894ff;
--colors--white: #fbfbfb;
--spacing--7: 7rem;
--spacing--025: .25rem;
--spacing--2: 2rem;
--colors--black: #121212;
--font-size--m: 64px;
--spacing--1: 1rem;
--spacing--3: 3rem;
--spacing--4: 4rem;
--spacing--5: 5rem;
--spacing--6: 6rem;
--spacing--05: .5rem;
--font-size--s: 48px;
--font-size--xs: 32px;
--font-size--copytext: 16px;
--font-size--copytext-small: 16px;
--font-size--l: 80px;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/champions4good-club