North star · Keep the page nearly black and spacious, letting crisp white type and isolated, softly glowing product details carry attention.
The page is built on an almost uninterrupted #111111 canvas, with no alternating section bands; its spaciousness comes from large vertical intervals rather than decorative containers. White SF Rounded Web headlines create a friendly, high-contrast voice, while #9f9f9f body copy recedes until it is needed. The first viewport balances a tall phone mockup on the left with a compact headline and copy to its right, plus restrained edge navigation and a subdued download control. Across the feature sequence, small, vivid market icons sit above white titles and muted explanatory text, isolated by extensive dark space. Blue, amber, purple, and teal glows belong mainly to product imagery and icon treatments, not to broad page surfaces. Rounded download controls, phone framing, and subtle shadows provide depth; most of the page remains flat and borderless. The result feels mobile-first, focused, and deliberately quiet.
Headings, body copy, navigation, and download controls
角色
示例
字号
字重
行高
字距
一级标题
Hero headline; bold, prominent, sentence case.
Rainbow
52px
700
normal
0.007em
二级标题
Feature-section headings and other major content titles.
Rainbow
42px
700
normal
0.008em
三级标题
Supporting feature or subsection headings.
Rainbow
30px
500
normal
0.007em
四级标题
Compact labels and small heading-level interface text.
The quick brown fox 敏捷的狐狸
20px
600
1
0.019em
正文
Muted explanatory copy beneath hero and feature titles.
The quick brown fox 敏捷的狐狸
16px
500
1.25
-0.012em
按钮
Download controls, set in medium-weight rounded text.
The quick brown fox 敏捷的狐狸
16px
500
1.25
-0.012em
链接
Navigation and secondary text links.
The quick brown fox 敏捷的狐狸
16px
500
1.25
-0.012em
间距与布局
基准单位 4px · 密度：宽松
160px版块间距
42px元素间距
—卡片内边距
1280px内容最大宽度
4px
8px
12px
14px
16px
18px
24px
32px
36px
40px
42px
64px
120px
148px
160px
A measured maximum width of 1280px anchors the desktop composition, with the hero arranged as a phone mockup and aligned text rather than a dense grid. The main headline and copy sit left-aligned; small navigation elements hug the page edges. Feature sections continue in a single-column rhythm on the same canvas, with large measured section gaps and sparse content. The density is intentionally low: each icon-and-copy feature receives substantial breathing room, followed by a minimal closing download area and footer.
圆角与层次
按钮 · 9999px
卡片 · 41px
链接 · 24px
xl · button
xl · other, link
inset · other
md · card
The page is mostly flat: section bands and cards do not define the design. Depth comes from the phone mockup's measured shadow, subtle shadows around download controls, and restrained glow around product details. Use borders sparingly; the dark canvas should remain uninterrupted.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Download control
A dark, pill-shaped control with white SF Rounded Web text and a soft shadow; the primary action reads “Download Rainbow.”
Hero phone mockup
A tall, rounded device frame containing a dense trading interface; its black screen contrasts with the sparse outer page.
Feature icon
A small market-specific icon centered above feature content, with localized colored glow against the dark canvas.
Feature copy block
A white title paired with concise, muted explanatory copy; left-aligned and surrounded by generous vertical breathing room.
Edge navigation
Compact section links positioned near the right edge, with subdued gray inactive text and clear, restrained labels.
Closing brand area
A centered download action and Rainbow mark near the bottom, followed by a low-emphasis footer with small utility links.
Imagery · The hero uses a realistic, dark phone-screen mockup showing the trading app, framed as a tall device against the page canvas. Later features rely on small, isolated market icons with colored glow rather than large photography or decorative illustrations. Keep imagery tightly framed and legible, preserving dark device screens and vivid icon details without adding unrelated scenes.
Reserve white text for headlines and important controls.
Keep explanatory copy subdued in #9f9f9f.
Give feature blocks generous vertical breathing room.
Use vivid color locally in product icons and app imagery.
Use rounded forms for the phone and download controls.
✕ 不该做
Do not introduce alternating bright section backgrounds.
Do not turn illustrative colors into full-page accents.
Do not crowd feature sections with dense cards.
Do not use sharp, angular display typography.
Do not add heavy borders around every content block.
Do not compete with the product mockup using extra imagery.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new Rainbow-style landing page on a near-black #111111 canvas, preserving large quiet areas between content. Use SF Rounded Web, or a close rounded sans-serif substitute, with bold white headlines and medium-weight #9f9f9f supporting copy. Create a clear hero composition around a tall mobile product mockup, with a restrained pill-shaped download control and subtle shadow. Organize follow-on content as sparse, left-aligned feature blocks: a small glowing product icon, a concise white title, and muted explanatory text. Keep decorative color local to product visuals; #804388 and #077f70 are detail colors, not section fills. Favor rounded silhouettes, minimal borders, and simple navigation. Finish with a centered download action, brand mark, and understated utility footer.
