North star · Use spacious editorial typography on pale surfaces, then reserve saturated mint and deep green for decisive actions and market-focused moments.
The page balances a near-white canvas (#f8f9f9) with deep evergreen surfaces (#03211c and #0f3933), using green as a focused signal rather than a blanket decoration. A large, lightly weighted serif headline creates an editorial opening, while compact sans-serif navigation, body copy, metrics and labels keep the interface functional. The hero is spacious and asymmetrical: headline on the left, concise proposition and mint CTA on the right, followed by a muted partner-logo strip. Below, dark sections and market imagery provide contrast; trading visuals and particle-like green graphics carry motion and technical character, while pale content blocks keep longer explanations legible. Layout is aligned to a broad centered page width, with generous pauses between major content groups and a denser rhythm inside navigation, stats and lists. Rounded buttons and cards soften the otherwise flat, precise visual system.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
强调色
表层色
中性色
功能色
页面底色 · Porcelain Canvas表层 · Deep Evergreen表层 2 · Mist Panel表层 3 · Forest Surface表层 4 · Cloud Panel主文字 · Deep Evergreen次要文字 · Slate Sage弱文字 · Paper White强调 · Moss Signal强调 2 · Mint Signal强调 3 · Soft Fern
Body copy, links, navigation and secondary headings
Aa 设计
Teodor Light
网络字体 · 字重 300 · 占比 14%
免费替代：Bodoni Moda
Display and primary headline
Aa 设计
ABC Diatype Medium
网络字体 · 字重 500 · 占比 12%
免费替代：Inter
Small labels and uppercase captions
角色
示例
字号
字重
行高
字距
特大标题
Large editorial statements, led by the homepage hero headline.
Hyperliquid
80px
300
1.05
-0.03em
一级标题
Primary page headline and prominent section statements.
Hyperliquid
40px
300
1.15
-0.03em
二级标题
Major feature and explanatory section headings.
Hyperliquid
36px
400
1.2
-0.03em
三级标题
Compact feature and subsection headings.
The quick brown fox 敏捷的狐狸
24px
400
1.25
-0.03em
正文
Paragraphs, descriptions and general interface copy.
The quick brown fox 敏捷的狐狸
16px
400
1.4
-0.01em
辅助文字
Small uppercase labels for sections, metadata and categories.
The quick brown fox 敏捷的狐狸
14px
500
1.14
0
链接
Navigation, inline links and CTA-adjacent text.
The quick brown fox 敏捷的狐狸
16px
400
1.4
-0.01em
间距与布局
基准单位 8px · 密度：紧凑
40px版块间距
12px元素间距
—卡片内边距
1328px内容最大宽度
4px
8px
10px
12px
16px
24px
32px
40px
72px
80px
Use a broad centered composition with a measured page max width of 1328px. The hero is asymmetrical, placing a large left-aligned headline opposite a concise text-and-CTA block; a horizontal partner strip creates a transition below. Major sections alternate between open pale content areas and full-width dark-green feature bands. Maintain generous vertical pauses between major blocks, while keeping navigation, stats, lists and logo rows compact. Favor clear alignment and low visual density over card-heavy grids.
圆角与层次
按钮 · 12px
卡片 · 12px
图片 · 50%
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface is mostly flat, with no measured shadows. Separate areas through background shifts, whitespace and occasional thin dividers rather than raised layers. Cards and buttons use soft neutral fills and rounded corners; dark feature bands provide the strongest sense of depth through color and gradient, not shadow.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Primary Trade CTA
Mint-filled button (#97fce3) with blue text, a 12px radius and a compact uppercase label; used in the hero and trading feature.
Secondary navigation button
Soft gray (#e8eaea) rounded button with compact uppercase text for destinations such as Tech, About and Apps.
Hero headline
Large, light serif statement on the left of the hero, paired with concise explanatory copy and a mint CTA on the right.
Partner logo strip
Horizontal row of muted partner marks, separated from the hero by a fine hairline and kept visually secondary.
Market feature band
Full-width deep-green area with mint particle artwork or trading imagery, contrasting with the pale content canvas.
Link row
Compact sans-serif destination or market link, with green accents for selected product links and minimal surrounding decoration.
Imagery · Use market-interface imagery, abstract particle fields and restrained brand graphics rather than lifestyle photography. The trading interface can appear as a wide product screenshot, while mint particles and green gradients suggest live data and liquidity. Keep decorative visuals within deliberate section bands and preserve clean, quiet areas around editorial copy.
Keep the canvas near-white and the main text deep evergreen.
Reserve mint for prominent actions and selected visual highlights.
Use a light editorial serif for the most important headline.
Pair broad, open hero composition with compact supporting interface text.
Alternate pale content areas with deliberate deep-green feature bands.
Use imagery to suggest live markets, data and liquidity.
✕ 不该做
Do not fill every section with gradients or saturated green.
Do not use heavy shadows to create artificial depth.
Do not make secondary navigation as prominent as the hero CTA.
Do not crowd the headline with dense explanatory copy.
Do not treat decorative market artwork as the page's content hierarchy.
Do not introduce unmeasured colors for core interface elements.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Create a new Hyperliquid-style page with a near-white Porcelain Canvas (#f8f9f9), Deep Evergreen (#03211c) text and selective Forest Surface (#0f3933) feature bands. Open with an asymmetrical editorial hero: a light serif headline on the left, concise sans-serif copy and a Mint Signal (#97fce3) CTA on the right. Use measured Hyperliquid typefaces where available; otherwise choose close serif and sans-serif substitutes with restrained tracking. Keep navigation compact, content aligned to a broad centered width, and section spacing generous. Use market screenshots or particle-like green graphics sparingly to convey onchain activity. Prefer flat surfaces, hairline dividers and soft neutral panels over shadows. Make the page feel calm and precise, with green intensity concentrated in actions and visual feature moments.
