Champions for Good Club 以超大窄体字、鲜明点缀色和沉浸式媒体呈现运动员与商业人士的社群网络。页面在浅色底与深色区块间切换，让俱乐部使命和成员故事清晰有力。
North star · Use oversized athletic typography and immersive media against restrained colour fields, letting each section make one clear visual statement.
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.
Navigation, body copy, captions, and supporting editorial text.
Aa 设计
Druk Condensed Super Desktop
网络字体 · 字重 500 / 400 · 占比 38%
免费替代：Teko
Oversized hero and section display headlines.
角色
示例
字号
字重
行高
字距
特大标题
Immersive hero statement, set at extreme scale.
Champions for Good Club
317px
400
0.51
0
一级标题
Primary uppercase display headline in the hero.
Champions for Good Club
187px
500
0.78
0
二级标题
Large uppercase headings introducing major sections.
Champions for Good Club
151px
500
0.78
0
三级标题
Prominent supporting statements and editorial subheads.
Champions for Good Club
57.5px
600
1
-0.022em
四级标题
Condensed display accents or compact secondary headings.
Champions for Good Club
44px
400
3.68
0
正文
Paragraph copy, navigation labels, and supporting descriptions.
The quick brown fox 敏捷的狐狸
16px
400
1.1
0
辅助文字
Small media credits, labels, and compact navigation text.
The quick brown fox 敏捷的狐狸
15px
500
1.3
0
间距与布局
基准单位 8px · 密度：紧凑
32px版块间距
8px元素间距
—卡片内边距
1376px内容最大宽度
3px
4px
8px
9px
10px
11px
12px
16px
20px
32px
40px
48px
96px
160px
192px
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.
圆角与层次
图片 · 14px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
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.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
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.
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.
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.
✕ 不该做
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.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
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.
