North star · Let full-bleed human-centered footage and oversized cream headlines carry the story; keep the interface sparse and pill-shaped.
The visual strategy is built around contrast between a quiet, warm canvas and expansive, cinematic footage. Gallery White (#f7f4e8) carries the page background and also appears in the hero headline, navigation, and outlined header actions, so interface elements stay legible over changing video. Stone Haze (#c6c3ba) is a measured section surface, while Ink (#000000) is reserved for muted text and a dark-on-light CTA treatment; the warmer browns and reds visible in the screenshot belong to the footage, not the core interface palette. Oversized uppercase FK Screamer display type creates a decisive editorial hook, balanced by FK Grotesk Neue for navigation, copy, and buttons. The layout favors a full-bleed video hero, generous open space, and sparse content rather than cards or decorative UI. Rounded pill controls and fine light outlines provide the main interface structure, while soft crossfades and the curved transition below the hero let media meet the pale page canvas without hard visual clutter.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
表层色
中性色
页面底色 · Gallery White表层 · Stone Haze主文字 · Gallery White次要文字 · Soft Ink描边 · Gallery White
文字
背景
对比度
WCAG
#f7f4e8 Gallery White
#c6c3ba Stone Haze
1.6:1
不达标
#000000 Soft Ink
#f7f4e8 Gallery White
19.06:1
AAA
#000000 Soft Ink
#c6c3ba Stone Haze
11.92:1
AAA
字体
字号阶梯：Custom（比例约 6.818，正文 22px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
fkGroteskNeue
网络字体 · 字重 500 · 占比 95%
免费替代：Inter
Navigation, body copy, captions, and buttons.
Aa 设计
fkScreamer
网络字体 · 字重 700 · 占比 5%
免费替代：Anton
Oversized hero and display headlines.
角色
示例
字号
字重
行高
字距
特大标题
Oversized uppercase hero headline, set in a bold condensed display face.
Zipline
150px
700
0.85
0
正文
Hero supporting copy and longer explanatory text.
The quick brown fox 敏捷的狐狸
22px
500
1.4
0
辅助文字
Small supporting labels and secondary copy.
The quick brown fox 敏捷的狐狸
14px
500
1
0
按钮
Compact CTA labels inside rounded pill controls.
The quick brown fox 敏捷的狐狸
14px
500
1
0
导航
Header navigation labels, in light text over the hero video.
The quick brown fox 敏捷的狐狸
14px
500
1.5
0
间距与布局
基准单位 2px · 密度：适中
60px版块间距
6px元素间距
—卡片内边距
1272px内容最大宽度
4px
6px
8px
14px
18px
24px
60px
104px
199px
The page opens with a full-bleed video hero and an overlay navigation row. Content aligns to a broad centered page frame, with a measured maximum width of 1272px; the header and hero copy sit toward the left while navigation spans the top. Large areas of warm canvas separate sparse content, creating a low-density, comfortable rhythm rather than a packed grid. A curved lower edge softens the transition from hero media into the page. Avoid card-heavy layouts; use wide media and restrained text groupings.
圆角与层次
按钮 · 9999px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface is predominantly flat: there are no measured shadows or gradients. Fine cream borders outline the header pills over video, while the pale canvas provides separation between sections. Create depth through full-bleed footage and text overlays rather than raised cards; use the curved hero boundary as a soft transition.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Overlay navigation
A light Zipline mark and compact FK Grotesk Neue links sit across the top of the full-bleed hero.
Header action pills
“Partner with us” and “Get delivery” use light text, a thin #f7f4e8 outline, and fully rounded ends over the video.
Hero headline
Large uppercase FK Screamer lettering sits left of center over footage, with tight leading and strong contrast.
Hero supporting copy
Short, two-line light copy anchors below the headline and explains the delivery benefit.
Primary light CTA
A compact light pill labeled “Try it now” uses dark text and an arrow, contrasting with the outlined header actions.
Curved media transition
A rounded, organic lower edge separates the full-bleed hero video from the warm canvas below.
Imagery · Use large cinematic video or photography featuring people and real delivery contexts. The hero fills the viewport behind the navigation and text; its warm, naturally varied colors come from the footage rather than the measured interface palette. Keep overlays minimal, using cream headline and copy for contrast. Full-page imagery is sparse outside the hero, with later media appearing as a broad landscape frame.
Use #f7f4e8 as the warm page canvas and primary light interface color.
Keep hero imagery full-bleed and centered on people or real delivery contexts.
Set display headlines in bold, condensed uppercase lettering.
Use FK Grotesk Neue or a close sans-serif for copy and navigation.
Keep header links and hero copy visually legible over video.
Use thin outlined pill buttons for header actions.
Leave generous open space between media-led content.
✕ 不该做
Do not treat footage browns and reds as core brand colors.
Do not introduce unmeasured accent colors, shadows, or gradients.
Do not fill the page with raised cards or dense UI panels.
Do not use a conventional solid navigation bar over the hero.
Do not use wide, delicate display lettering for the main headline.
Do not add heavy borders or sharp rectangular CTA treatments.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new page in Zipline’s cinematic, media-led style. Use Gallery White (#f7f4e8) for the warm canvas, light hero typography, navigation, and outlined controls; use Stone Haze (#c6c3ba) only for a subdued section band and Soft Ink (#000000) for secondary text or dark-on-light CTA copy. Begin with full-bleed people-focused video, overlay a sparse header and an oversized uppercase condensed headline, then keep supporting copy short. Use FK Screamer-like display type and FK Grotesk Neue-like sans-serif text. Favor open space, broad content framing, and an organic curved transition from hero to canvas. Keep elevation flat, avoid card grids and decorative effects, and use thin outlined pill buttons for secondary actions with a light filled pill for the main CTA.
