North star · Let the black canvas carry the page, and use crisp white identity and content as deliberate, high-contrast signals.
The measured page is defined by a near-total black canvas (#000000) and white elements (#ffffff), with no additional brand accent colours. In the supplied viewport, the black field dominates; a small, centered white Redis mark is the only visible focal point. Treat white as a high-contrast functional colour for identity, text, navigation, and pill-shaped CTA surfaces rather than as a decorative accent. Typography uses Suisseintl WebM in a regular weight, with measured headings and navigation set at 18px and body text at 14px. Keep type understated and unembellished. The measured content uses a 660px maximum width, left-aligned headings, and a 12-column structure; preserve generous open canvas around content instead of filling every area. Imagery is numerous across the full page, but the screenshots show no photographic treatment to imitate: prioritize the stark logo-on-black opening and keep any later media distinct from the brand palette.
配色
点色块复制色值。用途说明来自对页面的实测位置(背景、文字、描边、按钮)与截图判读。
品牌色
表层色
页面底色 · Studio Black表层 · Gallery White主文字 · Gallery White次要文字 · Studio Black描边 · Gallery White
Measured family for headings, body copy, and navigation.
角色
示例
字号
字重
行高
字距
一级标题
Primary agency introduction and section headings.
The quick brown fox 敏捷的狐狸
18px
400
1.4
0
正文
Supporting agency description and page copy.
The quick brown fox 敏捷的狐狸
14px
400
normal
0
导航
Primary navigation links and menu labels.
The quick brown fox 敏捷的狐狸
18px
400
1.4
0
间距与布局
基准单位 1px · 密度:适中
—版块间距
4px元素间距
—卡片内边距
660px内容最大宽度
1px
2px
4px
9px
15px
16px
25px
40px
The measured layout uses a 12-column structure and a 660px maximum content width. Headings align to the start rather than being centered. Keep the opening mark visually centered within a broad, uninterrupted black field, with ample negative space around it. Across content sections, use a comfortable density and measured spacing scale; avoid crowding the canvas. The screenshot only reveals a minimal opening state, so do not infer a detailed section rhythm from it.
圆角与层次
按钮 · 9999px
导航 · 9999px
没有测到阴影:页面是扁平的,层次靠底色和描边区分。
The visible composition is flat, with no measured shadows or gradients. White borders are present in the measured palette and component data, but the screenshot is dominated by an uninterrupted black field. Prefer clear contrast and simple outlines over layered cards or decorative elevation.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建(字体用替代字体)。
Redis mark
A compact white brand symbol centered in the black opening field; preserve its clean silhouette and isolation.
Primary CTA
Measured button uses a white fill, black text, white border, and fully pill-shaped radius.
Navigation
Measured navigation includes white text on the dark canvas, set in regular Suisseintl WebM.
Cases control
A white pill button labeled Cases appears in the measured component data; use black text for contrast.
Imagery · The full-page measurement reports many image elements, but the supplied viewport and scaled page view show only the white Redis symbol against black. Use the mark as a clean, isolated focal point without texture or effects. Do not infer a specific photography or illustration style from the unseen image elements; keep supporting media subordinate to the stark identity treatment.
Keep the opening mark isolated in generous negative space.
Use regular, unembellished sans-serif typography.
Keep headings left-aligned in content areas.
Use fully rounded pill shapes for measured buttons.
✕ 不该做
Do not introduce unmeasured brand colours.
Do not add gradients or shadows.
Do not crowd the dark canvas with decoration.
Do not use heavy or condensed type styles.
Do not invent a photographic style from unseen media.
Do not replace the flat presentation with layered cards.
给 AI 的提示词
想快速出一个同风格的新页面,把这段话连同 DESIGN.md 一起发给 AI。
Build a new Redis Agency page with the same stark, gallery-like restraint. Use Studio Black (#000000) as the dominant canvas and Gallery White (#ffffff) for the logo, navigation, copy, and high-contrast CTA surfaces. Set text in Suisseintl WebM or a close sans-serif substitute such as Inter, regular weight, with understated hierarchy. Keep content in a measured 660px maximum-width area within a 12-column layout; align headings to the start and leave generous negative space. Use simple flat surfaces without shadows or gradients. When creating buttons, use a white fill, black text, white border, and fully pill-shaped corners. Make the identity mark crisp and isolated; do not add decorative colours or invent an image treatment unsupported by the reference.