Uniswap Cup 将单日加密行业足球赛呈现为对称的淘汰赛对阵图。白底、黑色文字与洋红色比分连线，让密集赛况清晰易读，并将决赛置于视觉中心。
North star · Make the bracket itself the hero: balance both sides around a quiet center and reserve magenta for match-state emphasis.
The page treats the tournament bracket as the product: a white canvas carries a broad, balanced composition with match rounds advancing inward from both sides. Black establishes the core information hierarchy in scores, labels, and team marks, while vivid magenta highlights selected scores, round labels, and the thin bracket connectors. Pale gray and near-white surfaces soften the surrounding interface without competing with the match data. Typography combines a clean sans-serif for the main event label with bold monospace for bracket headings, uppercase stage labels, and compact captions. The center is deliberately open, giving the final matchup and “Road to final” mark room to read as focal points. Team logos and small badges supply most of the visual variety; the page otherwise stays flat, spacious, and focused on data rather than decoration.
Tournament stage labels, scores, badges, captions, and compact bracket metadata.
Aa 设计
ui-sans-serif
系统字体 · 字重 500 / 600 / 400 · 占比 36%
免费替代：Inter
Main event title, central matchup names, and interface labels.
Aa 设计
Basel
网络字体 · 字重 500 · 占比 10%
免费替代：Inter
Small share of branded interface text where the custom webfont appears.
角色
示例
字号
字重
行高
字距
一级标题
Main event title and central page heading.
Uniswap
40px
500
1
-0.04em
二级标题
Prominent tournament section or bracket heading.
Uniswap
32px
700
1
-0.02em
正文
Uppercase stage labels and primary bracket copy.
The quick brown fox 敏捷的狐狸
18px
500
1
0
辅助文字
Compact round markers, date details, and secondary metadata.
The quick brown fox 敏捷的狐狸
12px
700
1.33
0
代码
Small bracket identifiers and data-like labels.
const style = 1;
12px
700
1.33
0
间距与布局
基准单位 8px · 密度：宽松
224px版块间距
4px元素间距
—卡片内边距
1404px内容最大宽度
2px
4px
6px
8px
12px
16px
A single, spacious bracket section spans a measured maximum width of 1404px. Round columns sit symmetrically on the left and right, with thin magenta connectors drawing each path toward the central final. A narrow top band carries stage navigation and event branding; the center remains deliberately open around the title and matchup. The measured density is spacious, with a large section rhythm and small gaps between tightly related labels. Preserve the measured 8px base spacing system and use qualitative spacing rather than adding arbitrary dimensions.
圆角与层次
按钮 · 9999px
卡片 · 50%
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The visual system is mostly flat: no measured shadows or gradients. Separate match information with pale hairlines, minimal outlined or tinted surfaces, and strong black or magenta marks rather than floating cards. Keep the bracket connectors as thin, precise lines and let whitespace provide most of the layering.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Stage navigation
A slim top row uses compact uppercase monospace labels for GROUP STAGE and LIVESTREAM, with the cup wordmark centered.
Round markers
Small magenta chips label R16, QF, and SF positions across the top of the bracket.
Match score tile
Pair team marks with prominent black or magenta score numerals, aligned along the bracket path.
Bracket connectors
Fine magenta lines link match rounds and turn inward toward the central final.
Round seed badge
Compact black rectangular badges with near-white monospace identifiers sit beside match entries.
Final matchup
The central match gives team marks and names prominence, with a magenta Final label and winner indicator.
Event date label
A small centered date and time label sits below the final matchup, using dark and magenta text.
Imagery · There is no photographic or video-led storytelling. Small team logos and tournament marks sit inside compact tiles, while the central event emblem and opposing team symbols provide the main illustrative moments. Keep these assets crisp and contained, using the surrounding white space and magenta score accents to frame them. Avoid decorative imagery that competes with the bracket information.
Keep the knockout bracket balanced around a clear central axis.
Use Cup Magenta #f50db4 for bracket paths and decisive match highlights.
Keep scores and compact tournament metadata in monospace.
Preserve ample white space around the final matchup.
Use small team marks as functional identifiers, not decoration.
Keep surfaces flat and rely on precise hairlines for separation.
✕ 不该做
Do not fill the page with gradients or heavy shadows.
Do not make every label magenta; reserve it for emphasis.
Do not let team logos overpower score readability.
Do not collapse the bracket into an unbalanced single column on wide screens.
Do not add ornamental imagery to the open center.
Do not use oversized rounded cards that obscure the connector structure.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new page in the Uniswap Cup visual style. Use Canvas White #ffffff as the main field, Bracket Mist #f9f9f9 for quiet surfaces, Scoreboard Ink #000000 for key text and scores, and Cup Magenta #f50db4 only for active paths and highlights. Organize information in a spacious, symmetrical layout with a clear center and compact round labels. Set stage names, badges, and data-like captions in bold monospace; use a clean sans-serif for larger event titles and team names. Keep logos small and functional. Prefer flat surfaces, thin pale borders, crisp connectors, and generous open space over shadows, gradients, or decorative cards. Make every score easy to scan and preserve a strong visual distinction between routine rounds and the featured final.
