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

# WOUQ · Design System

> Quiet typography, immersive creative work

**Theme:** light · **Industry:** agency · **Source:** https://wearewouq.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._

WOUQ introduces its creative direction practice through a concise statement and an image-led portfolio. A white canvas, black typography, and varied project imagery keep the work at the center.

## North star

Keep the interface nearly invisible: use white space and black type to frame large, distinctive project imagery.

## Overview

The page uses a clean white canvas and black text as a restrained frame for a portfolio whose project imagery supplies most of its colour. Warm browns, peach, grey, and occasional dark scenes belong to the featured work rather than the site’s core palette. A light sans-serif carries both navigation and the large introductory statement, with regular weight and natural casing keeping the tone calm and direct. The header is sparse, while the introduction spans broadly above a dense, image-led project grid. Cards vary in width and height: a prominent lead image anchors the sequence, followed by paired and full-width projects. Small white captions sit over imagery where needed. Comfortable whitespace separates the introduction, media, and footer without competing with the images. Rounded image corners soften the otherwise crisp, flat layout; no prominent shadows, coloured UI bands, or decorative framing are evident.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Page canvas and open space around the introduction and project grid. |
| Studio Ink | `#000000` | `--color-studio-ink` | neutral | Logo, navigation, introductory statement, and text links. |

### Semantic aliases

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

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ESAllianz-Light | `--font-body` | webfont | 400 | Navigation, introduction, project captions, and links | Inter |

- **ESAllianz-Light:** Use a light, regular-looking sans-serif with natural casing and unembellished tracking.

### Type scale — Golden Ratio (ratio ≈ 1.581, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 45px | 400 | 1.11 | 0 | — | ESAllianz-Light | Large opening statement beneath the navigation. |
| h2 | 27px | 400 | 1 | 0 | — | ESAllianz-Light | Project and supporting section titles. |
| body | 18px | 400 | 1.5 | 0 | — | ESAllianz-Light | Studio introduction and supporting copy. |
| nav | 18px | 400 | 1 | 0 | — | ESAllianz-Light | Header navigation links. |
| link | 18px | 400 | 1.5 | 0 | — | ESAllianz-Light | Project captions and footer links. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 5, 10, 25, 30 px.
- Section rhythm 35px · element gap — · card padding — · max content width 1380px.

A broad, centered page canvas uses a measured maximum width of 1380px. The header places the wordmark at left and a compact navigation group at right. Below it, a large left-aligned introduction leads directly into a four-column project grid; featured media spans multiple columns while smaller projects sit side by side. The measured section gap is 35px, with a comfortable overall density. Keep the footer visually quiet and aligned with the same page margins.

## Shape & elevation

- Radius: xs `10px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s linear` on interactive elements.

The interface reads as flat: no measured shadows or gradients define the page. Project media is separated by white gutters and softly rounded corners, with captions layered directly over image content. Avoid adding card borders or elevated surfaces; let the imagery create depth.

## Imagery

Use large project images and video as the primary visual content, with a mix of product renders, interiors, devices, and cinematic scenes. Preserve each project’s native colour and crop imagery into a varied grid, including wide feature panels and paired tiles. Captions are small and white over the media where shown. Treat warm image colours as project-specific, not as reusable brand accents.

## Components

### Header

Minimal wordmark-and-navigation row on the white canvas; black text links align opposite the brand.

### Intro statement

Large, left-aligned black sans-serif copy placed between the header and portfolio.

### Featured project tile

Large image-led card spanning much of the grid width, with a small white descriptor and project title overlaid near the lower edge.

### Paired project tiles

Smaller media cards sit side by side within the portfolio grid, each carrying a restrained white caption.

### Portfolio grid

Four-column measured layout with varied full-width and multi-column project media; maintain clean white gutters.

### Footer links

Compact black text links and studio details arranged in small groups beneath the final project.

### Measured component styles

- **Link** (“Visual Language Piano”): transparent background · text #000000 · radius 0px · padding 0px · 400 0px Open Sans
- **Navigation item** (“Work About Dreams”): transparent background · text #000000 · radius 0px · padding 0px · 400 18px Open Sans

## Do

- Use white as the page-wide canvas.
- Set primary interface text in black.
- Give project imagery the strongest visual presence.
- Vary project tile sizes within the measured grid.
- Place concise captions directly over media where appropriate.
- Keep the header and footer understated.
- Preserve comfortable white space between major blocks.

## Don't

- Do not turn portfolio-image colours into brand accents.
- Do not add decorative colour bands or gradients.
- Do not place heavy shadows beneath project tiles.
- Do not make the navigation visually dominant.
- Do not force every project into identical card dimensions.
- Do not overlay long descriptions on the imagery.

## Agent prompt

Build a new creative-studio page in WOUQ’s restrained portfolio style. Use Gallery White (#ffffff) for the canvas and Studio Ink (#000000) for the wordmark, navigation, and editorial copy. Set a light sans-serif close to ESAllianz-Light, keeping natural casing and regular-looking weight. Create a sparse header, a prominent left-aligned introductory statement, and a varied four-column project grid with large image-led tiles, clean white gutters, and subtle rounded corners. Let project photography or video provide the colour; do not apply those image hues to interface elements. Add short, legible captions over media where useful, then finish with a quiet footer of studio details and links. Keep the page flat, spacious, and focused on the work; avoid prominent borders, shadows, gradients, and decorative UI.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | gallery | Sparse top navigation and wide introduction above a varied four-column, image-led portfolio grid. | Project links, Direct navigation, Image-led browsing | Large media tiles, Overlay captions, White gutters, Compact footer links |

## Source CSS custom properties (selected)

```css
--wp--preset--font-size--normal: 16px;
--wp--preset--font-size--huge: 42px;
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--font-size--small: 13px;
--wp--preset--font-size--medium: 20px;
--wp--preset--font-size--large: 36px;
--wp--preset--font-size--x-large: 42px;
--wp--preset--spacing--20: 0.44rem;
--wp--preset--spacing--30: 0.67rem;
--wp--preset--spacing--40: 1rem;
--wp--preset--spacing--50: 1.5rem;
--wp--preset--spacing--60: 2.25rem;
--wp--preset--spacing--70: 3.38rem;
--wp--preset--spacing--80: 5.06rem;
--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);
--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);
--wp-admin-theme-color: #3858e9;
--wp-admin-theme-color--rgb: 56,88,233;
--wp-admin-theme-color-darker-10: #2145e6;
--wp-admin-theme-color-darker-10--rgb: 33,69,230;
--wp-admin-theme-color-darker-20: #183ad6;
--wp-admin-theme-color-darker-20--rgb: 24,58,214;
--wp-admin-border-width-focus: 2px;
--ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
--ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
--ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
```

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