North star · Let a crisp white signup panel lead, framed by authentic sports imagery and restrained Strava-orange actions.
The page uses white as its primary canvas, with a warm off-white footer that gives the lower area a quiet change in tone. Black headings provide clear hierarchy, while muted charcoal carries navigation and supporting text. Strava orange is the strongest interface accent: it appears in the wordmark, signup action, and login links. Blue is reserved for legal links, and fine gray borders define the quieter login and alternate-signup controls. Boathouse is used throughout, with a compact, semibold centered hero heading and readable, restrained supporting copy. The first viewport is arranged as a three-part hero: large sports imagery on both sides frames a white central signup panel. The photography feels natural and active rather than studio-staged; product screens and orange route marks sit within the right-side image. A spacious, pale footer organizes link groups into columns beside app-store badges and social icons.
Site-wide typeface for headings, navigation, body copy, links, and buttons.
角色
示例
字号
字重
行高
字距
一级标题
Centered hero title introducing the community-powered motivation proposition.
Strava
32px
600
1
0
正文
Supporting hero copy and explanatory interface text.
The quick brown fox 敏捷的狐狸
14px
400
1
0
辅助文字
Small signup consent and legal-support copy.
The quick brown fox 敏捷的狐狸
12px
400
1.5
0
按钮
Primary email signup and secondary provider signup labels.
The quick brown fox 敏捷的狐狸
16px
600
normal
0
导航
Header navigation links.
The quick brown fox 敏捷的狐狸
15px
400
1.33
0
链接
Compact legal and policy links.
The quick brown fox 敏捷的狐狸
12px
400
1.5
0
间距与布局
基准单位 4px · 密度：适中
50px版块间距
8px元素间距
—卡片内边距
—内容最大宽度
4px
6px
8px
10px
12px
20px
24px
26px
32px
48px
50px
64px
A horizontal header sits above a full-width, three-part hero: photographic panels flank a centered signup column. The hero title and form are center-aligned; navigation and footer content align to the left within their groups. A pale footer band spans the page and separates app downloads and social icons from several link columns. Keep the composition open and comfortably spaced rather than card-dense.
圆角与层次
按钮 · 4px
sm · other
The interface is mostly flat: white and warm off-white areas establish structure without pronounced shadows. Thin gray borders distinguish secondary signup and login controls from the canvas. Keep layering limited to the photographic hero framing the central panel and product imagery embedded in the right-side scene.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Top navigation
White header with orange Strava mark, muted activity and feature links, and a lightly outlined Log In control aligned at the far right.
Hero signup panel
Centered white content area with a semibold black headline, compact supporting copy, and member login prompt.
Provider signup buttons
Stack bordered white Google and Apple options above the primary email action; use dark labels and recognizable provider marks.
Primary signup action
Strava-orange button with white semibold text and a subtle four-pixel corner radius.
Legal consent
Small centered consent line below signup actions, with blue Terms of Service and Privacy Policy links.
Footer
Warm off-white footer with brand mark, app-store badges, social icons, and multiple compact link columns.
Imagery · Use natural outdoor sports photography with visible athletes and landscape, cropped into broad side panels around the signup content. Images feel documentary and active, with subdued earthy greens and warm light. Product mockups, maps, and orange route marks appear as elements within the right-side imagery, not as the page's main brand palette.
Keep the main canvas white and the footer warm off-white.
Use Strava Orange for the primary signup action and brand accents.
Frame the central signup panel with authentic outdoor sports photography.
Keep the hero headline centered and visually dominant.
Use thin gray outlines for secondary controls.
Reserve blue for legal and policy links.
✕ 不该做
Do not turn the page into a dark interface.
Do not use orange for large background bands.
Do not add decorative gradients or heavy shadows.
Do not let product mockups replace the athlete photography.
Do not overfill the footer or signup panel with card treatments.
Do not apply uppercase styling or exaggerated letter spacing.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new Strava-style page with a clean white canvas (#ffffff), a warm off-white footer (#f9f8f5), and a crisp, athletic mood. Use Boathouse or a close sans-serif substitute such as Inter. Set a clear semibold heading in black (#000000), with charcoal (#43423f) for muted navigation and supporting copy. Make Strava Orange (#fc5200) the unmistakable primary action; keep secondary controls white with restrained gray outlines (#64635e) and dark labels (#21211f). Use blue (#0060d0) only for legal-style links. Favor a broad, open layout with a centered content area, authentic sports photography, and simple alignment. Keep borders fine, surfaces flat, and spacing comfortable. Avoid gradients, excessive cards, or decorative effects; make the page feel direct, welcoming, and grounded in real athletes.
