风格库/设计工具/CLOU architects

CLOU architects

以留白衬托建筑表达A quiet canvas for bold architectural statements.

浅色主题设计工具architecture studio homepage极简编辑式黑白留白充足字体主导原网页 clouarchitects.com ↗ · 2026-10-12 采集 · 1440×900 桌面端
CLOU architects 首屏

CLOU architects 首页以近白底色、精简标志和黑底大字宣言开场。整体如同极简工作室海报,以充足留白和克制的导航细节突出字体表达。

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 White20.96:1AAA
#fffffc Gallery White#000000 Studio Ink20.96:1AAA

字体

字号阶梯: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.5px4001.06-0.07em
一级标题
Large headline role; the opening statement is the page’s dominant text.
CLOU architects
79.5px4001.5-0.07em
正文
General studio copy where present; not prominent in this viewport.
The quick brown fox 敏捷的狐狸
17px4001.5-0.01em
辅助文字
Small loading counter near the lower edge.
The quick brown fox 敏捷的狐狸
12.5px400normal-0.013em
导航
Compact language switch in the upper-right corner.
The quick brown fox 敏捷的狐狸
17px4001.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.

页面版块

共 1 个版块,按页面从上到下排列,每个都标了类型、布局和交互套路。

该做与不该做

✓ 该做

  • Keep the canvas warm white using #fffffc.
  • 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.

相似风格

CLOU architects 设计系统 — 配色、字体与 DESIGN.md | Design DNA