---
title: "CLOU architects design system"
variant: extended
source: https://www.clouarchitects.com/
captured_at: 2026-10-12
theme: light
industry: design
generator: Design DNA (https://four.wiralomi.com/style/clouarchitects-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# CLOU architects · Design System

> A quiet canvas for bold architectural statements.

**Theme:** light · **Industry:** design · **Source:** https://www.clouarchitects.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

CLOU architects opens with a restrained, near-white canvas, a compact wordmark, and a single oversized statement set in a black rectangle. The page feels like a minimalist studio poster, using generous empty space and small navigation details to keep attention on the typography.

## North star

Use expansive warm-white space to make one sharply contrasted typographic statement feel deliberate and architectural.

## Overview

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.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#fffffc` | `--color-gallery-white` | surface | Page canvas and white lettering inside the black statement panel; the dominant, softly warm background. |
| Studio Ink | `#000000` | `--color-studio-ink` | brand | Wordmark, language navigation, statement-panel background, and the fine loading rule. |

### Semantic aliases

`--color-canvas` → `#fffffc` (Gallery White) · `--color-surface` → `#000000` (Studio Ink) · `--color-text` → `#000000` (Studio Ink) · `--color-text-muted` → `#fffffc` (Gallery White) · `--color-border` → `#000000` (Studio Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#fffffc` | 20.96:1 | AAA |
| `#fffffc` | `#000000` | 20.96:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Circular Std | `--font-body` | webfont | 400 | All visible interface text, including the central statement, language switch, and loading label. | Circular |

- **Circular Std:** Regular weight throughout; display lettering uses tight negative tracking, while small utility text remains clean and restrained.

### Type scale — Custom (ratio ≈ 3.12, base 17px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 165.5px | 400 | 1.06 | -0.07em | — | Circular Std | Oversized central statement set in white on a black panel. |
| h1 | 79.5px | 400 | 1.5 | -0.07em | — | Circular Std | Large headline role; the opening statement is the page’s dominant text. |
| body | 17px | 400 | 1.5 | -0.01em | — | Circular Std | General studio copy where present; not prominent in this viewport. |
| caption | 12.5px | 400 | normal | -0.013em | — | Circular Std | Small loading counter near the lower edge. |
| nav | 17px | 400 | 1.1 | -0.01em | — | Circular Std | Compact language switch in the upper-right corner. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 3, 4, 13, 17, 20, 25, 50, 101, 116 px.
- Section rhythm 116px · element gap — · card padding 10px · max content width 1390px.

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.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease-in-out` on interactive elements.

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.

## 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.

## Components

### 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.

### Measured component styles

- **Card** (“We are architects. graphic designers. in”): background #000000 · text #fffffc · radius 0px · padding 0px 20.1px · 400 79.7322px Circular Std
- **Navigation item** (“En / 中文”): transparent background · text #000000 · radius 0px · padding 0px · 400 16.7857px Circular Std

## Do

- 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.

## Don't

- 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.

## Agent prompt

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.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Sparse full-canvas hero with corner-anchored header, centered typographic panel, and bottom loading rule. | language switch, loading progress | compact wordmark, oversized statement, monochrome panel, thin progress rule |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/clouarchitects-com