North star · Use expansive warm-white space to make one sharply contrasted typographic statement feel deliberate and architectural.
The visual strategy is built around a strict two-colour palette: warm off-white #fffffc covers the page, while black #000000 defines the CLOU wordmark, language navigation, loading rule, and the central statement panel. The off-white is slightly softer than pure white, giving the otherwise stark composition a subtle warmth. Circular Std is used throughout in a clean, rounded sans-serif voice. The central phrase is exceptionally large and set in white on a solid black rectangle, creating a crisp editorial focal point rather than relying on photography. The header is kept small and pinned to opposite sides: logo at upper left, language switch at upper right. The central graphic sits amid extensive negative space, with a thin loading indicator near the lower edge. There are no visible cards, shadows, gradients, or decorative imagery; contrast, scale, and placement do all the visual work.
配色
点色块复制色值。用途说明来自对页面的实测位置(背景、文字、描边、按钮)与截图判读。
品牌色
表层色
页面底色 · Gallery White表层 · Studio Ink主文字 · Studio Ink次要文字 · Gallery White描边 · Studio Ink
文字
背景
对比度
WCAG
#000000 Studio Ink
#fffffc Gallery White
20.96:1
AAA
#fffffc Gallery White
#000000 Studio Ink
20.96:1
AAA
字体
字号阶梯:Custom(比例约 3.12,正文 17px)。示例用免费替代字体渲染,数值为实测。
Aa 设计
Circular Std
网络字体 · 字重 400 · 占比 100%
免费替代:Circular
All visible interface text, including the central statement, language switch, and loading label.
角色
示例
字号
字重
行高
字距
特大标题
Oversized central statement set in white on a black panel.
CLOU architects
165.5px
400
1.06
-0.07em
一级标题
Large headline role; the opening statement is the page’s dominant text.
CLOU architects
79.5px
400
1.5
-0.07em
正文
General studio copy where present; not prominent in this viewport.
The quick brown fox 敏捷的狐狸
17px
400
1.5
-0.01em
辅助文字
Small loading counter near the lower edge.
The quick brown fox 敏捷的狐狸
12.5px
400
normal
-0.013em
导航
Compact language switch in the upper-right corner.
The quick brown fox 敏捷的狐狸
17px
400
1.1
-0.01em
间距与布局
基准单位 1px · 密度:宽松
116px版块间距
—元素间距
10px卡片内边距
1390px内容最大宽度
3px
4px
13px
17px
20px
25px
50px
101px
116px
A single, sparse viewport composition uses the full canvas rather than visible columns or cards. The logo anchors the upper-left corner and the language switch balances it at the upper right. The main typographic panel is horizontally centered and surrounded by extensive negative space. A thin progress rule runs near the bottom edge, with its small loading label aligned to the right. The measured page max width is 1390px and density is spacious.
圆角与层次
没有测到阴影:页面是扁平的,层次靠底色和描边区分。
The page is deliberately flat: there are no measured shadows, gradients, rounded surfaces, or layered cards. The central black rectangle is a direct colour block, not a raised component. Fine black rules and strong light-dark contrast provide structure without adding depth effects.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建(字体用替代字体)。
Wordmark
Small black CLOU graphic anchored at the upper left against the Gallery White canvas.
Language switch
Compact “En / 中文” text navigation at the upper right, with the active language underlined.
Statement panel
A centered, square-corner black rectangle containing a large white Circular Std statement.
Loading indicator
Thin black horizontal progress rule near the lower edge, paired with a small right-aligned loading label and counter.
Imagery · No photography, product imagery, or video appears in the measured opening view. A small graphic wordmark and the central typographic panel provide the visual content. Keep any future imagery secondary and carefully framed; do not introduce decorative illustration or mock-up colours that compete with the sparse monochrome identity.
Use #000000 for the logo, utility navigation, rules, and statement block.
Let one oversized typographic statement dominate the composition.
Preserve broad, uninterrupted areas of negative space.
Keep navigation small and anchored to the upper corners.
Use flat, square-corner colour blocks without shadows.
✕ 不该做
Do not add unmeasured brand colours or gradients.
Do not crowd the central statement with supporting content.
Do not add rounded cards or elevation effects.
Do not make the utility navigation visually compete with the headline.
Do not introduce decorative photography into the sparse opening composition.
Do not replace the restrained layout with a dense grid.
给 AI 的提示词
想快速出一个同风格的新页面,把这段话连同 DESIGN.md 一起发给 AI。
Build a new page in the CLOU architects visual style. Use Gallery White (#fffffc) as the dominant canvas and Studio Ink (#000000) for the wordmark, navigation, rules, and strong typographic blocks. Set all text in Circular Std or a close sans-serif substitute, generally at regular weight with compact tracking. Compose a small logo at the upper left and restrained utility navigation at the upper right. Give the main content generous negative space and a clear editorial focal point; where a statement is needed, place large white text in a flat, square-corner black rectangle. Keep the page spacious and quiet, with minimal supporting elements and no shadows, gradients, or decorative colour. Use thin rules sparingly to define edges or progress.