North star · Keep the page predominantly black and let crisp white typography, real product proof, and one vivid blue CTA carry the story.
The page is built on a near-continuous black canvas, using white for large headlines and key interface labels, muted gray for navigation and supporting copy, and saturated blue as the main conversion signal. Dark charcoal surfaces separate cards and interface areas without breaking the overall monochrome field. Oversized, tightly tracked Diatype headings create an editorial hierarchy, while small uppercase captions in OCD-GARRI add a technical, label-like counterpoint. A centered hero stacks its headline, short description, and pill-shaped CTA over subdued workplace imagery. The long page alternates product screenshots, proof points, statistics, and testimonial cards, keeping each section legible against black. Photography and interface mockups provide most of the visual variety; gradients and overlays soften transitions and maintain readable contrast. Generous vertical breathing room offsets dense product details, while rounded cards and controls keep the technology approachable.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
强调色
表层色
中性色
页面底色 · Canvas Black表层 · Graphite Panel表层 2 · Night Navy表层 3 · Iron Gray主文字 · Signal White次要文字 · Slate Gray强调 · REKKI Blue
Primary body copy, navigation, and regular-weight headings.
Aa 设计
Diatype REKKI Medium
网络字体 · 字重 400 · 占比 16%
免费替代：Inter
Display, h1, and h2 headlines.
Aa 设计
OCD-GARRI-V01 Regular
网络字体 · 字重 400 · 占比 7%
免费替代：Space Mono
Eyebrows, captions, and uppercase text links.
Aa 设计
Diatype REKKI Bolder Rounded
网络字体 · 字重 400 · 占比 2%
免费替代：Nunito Sans
Minor rounded display accent; a very limited-use face.
角色
示例
字号
字重
行高
字距
特大标题
Oversized hero and closing CTA display headlines.
REKKI
86px
400
1
-0.064em
一级标题
Primary page headline and prominent section titles.
REKKI
72px
400
1
-0.042em
二级标题
Major section headings and supporting feature statements.
REKKI
56px
400
1
-0.04em
三级标题
Feature-card and testimonial headings.
The quick brown fox 敏捷的狐狸
24px
400
1.33
-0.027em
正文
Hero subtitle, explanatory copy, and testimonial text.
The quick brown fox 敏捷的狐狸
18px
400
1.33
-0.015em
辅助文字
Small uppercase labels and compact metadata.
The quick brown fox 敏捷的狐狸
15px
400
1.07
0.033em
导航
Header navigation links.
The quick brown fox 敏捷的狐狸
16px
400
1.25
-0.015em
链接
Uppercase secondary links and compact action labels.
The quick brown fox 敏捷的狐狸
15px
400
1.07
0.033em
眉题
Small uppercase section labels.
The quick brown fox 敏捷的狐狸
15px
400
1.07
0.033em
间距与布局
基准单位 4px · 密度：适中
64px版块间距
10px元素间距
32px卡片内边距
—内容最大宽度
4px
6px
8px
10px
12px
14px
16px
20px
24px
32px
39px
40px
56px
80px
120px
Use a centered, wide content composition with strong horizontal alignment and substantial black negative space. The hero is a vertically stacked, center-aligned headline, supporting line, and CTA; navigation stays in a slim top row. Below, alternate broad product media with compact feature cards, a horizontal metrics row, and testimonial tiles. Keep section transitions mostly seamless against the canvas, reserving dark panels for grouped information. Maintain comfortable vertical rhythm: sparse around large statements, denser inside product interfaces and proof cards. Measurements do not establish a fixed maximum width.
圆角与层次
按钮 · 9999px
卡片 · 8px
图片 · 50%
导航 · 9999px
链接 · 16px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The visual system is mostly flat: black canvas, dark card fills, and no measured shadow system. Use rounded card edges and quiet tonal separation instead of conspicuous borders. Layer interface screenshots and text overlays over media only where the page demonstrates product context; dark gradients help blend media into the black field.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Primary demo CTA
Bright blue, pill-shaped conversion button with bold white label; keep it the strongest color accent against black.
Top navigation
Compact header with white REKKI mark, muted links, and a blue demo action aligned at the far edge.
Hero headline
Large centered white Diatype Medium statement, tightly tracked over a darkened workplace image, followed by muted copy.
Product interface showcase
Wide, bright order-management screenshot framed by the surrounding black page, with concise explanatory text and a light secondary action.
Benefits grid
Dark navy card grouping short proof statements and simple icons, paired with workplace photography.
Metrics row
Three prominent white numerical proof points, each supported by small muted explanatory text and subtle separators.
Testimonial cards
Image-led customer tiles with dark overlays, compact identity details, and concise white quote text.
Imagery · Use realistic workplace and food-service photography alongside crisp screenshots of order-management software. The hero image is dark and subdued behind the headline; product UI is shown large and bright as direct evidence of the tool. Customer proof uses image-led cards with overlaid identity and quote details. Keep imagery photographic and documentary rather than illustrative; gradients and dark overlays should preserve readable white text.
Use white for major headlines and clear product copy.
Reserve REKKI Blue for high-priority actions.
Use oversized, tightly tracked display typography.
Pair software screenshots with real workplace photography.
Separate cards with dark tonal fills, not heavy borders.
✕ 不该做
Do not introduce bright section backgrounds.
Do not spread blue across decorative elements.
Do not use pale gray as the main text color.
Do not add conspicuous shadows or outlined panels.
Do not crowd large headlines with nearby content.
Do not replace product proof with abstract illustration.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new page in REKKI's dark, product-led visual style. Use Canvas Black (#000000) as the dominant background, Signal White (#ffffff) for headlines, and Slate Gray (#87898d) for secondary copy. Apply REKKI Blue (#0063e1) sparingly to the primary CTA. Use oversized, tightly tracked Diatype-like sans-serif headlines and small uppercase, widely tracked labels. Structure the page with a centered hero, generous black breathing room, broad software screenshots, concise proof cards, and a compact metrics or testimonial section. Use Night Navy (#040910) and Iron Gray (#272828) for quiet card separation. Favor realistic workplace photography and direct product UI over decorative illustration. Keep surfaces flat, corners rounded, and transitions subtle; avoid bright bands, heavy borders, and unnecessary shadows.
