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

# Atelier Deux-Cé · Design System

> Parisian creative practice, told through image and type

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

Atelier Deux-Cé presents its multidisciplinary agency through a restrained white canvas, expressive typography, and a long, image-led portfolio. The experience pairs concise project captions and service filters with a distinctive green footer, letting client work supply most of the page’s colour.

## North star

Keep the interface nearly invisible so large, carefully art-directed project images carry the page.

## Overview

The page is built around a white canvas and nearly black typography, with no competing decorative palette in the main editorial flow. A saturated green footer provides the clearest brand-colour anchor; muted olive, stone, taupe, and brown tones are largely carried by project imagery and should not be promoted into interface colours. Helvetica handles uppercase labels, navigation, filters, and metadata with open tracking, while Minion 3 brings a quieter editorial voice to descriptive copy and captions. A narrow masthead leads into a full-bleed photographic hero, then the page alternates between concise explanatory content and a varied portfolio grid. Project images are the visual event: captions remain small and direct, keeping attention on art direction. The layout feels spacious despite the long page, using consistent gutters and simple alignment rather than cards, shadows, or ornamental containers.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Ink | `#000000` | `--color-studio-ink` | brand | Primary headings, navigation, project captions, links, and the page’s fine outlines. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas and the quiet breathing space around the portfolio and client lists. |
| Soft Concrete | `#e5e5e5` | `--color-soft-concrete` | surface | Subtle measured surface tone; use only for restrained neutral areas, not as a defining section band. |
| Atelier Green | `#259558` | `--color-atelier-green` | brand | Distinctive full-width footer background and its oversized black wordmark. |
| Warm Ash | `#aaaaa4` | `--color-warm-ash` | surface | Muted tone measured in a project card; treat as imagery-derived rather than a core UI fill. |
| Linen Stone | `#d8d0c5` | `--color-linen-stone` | surface | Warm neutral measured in project imagery and card surfaces, not a recurring page background. |
| Olive Leaf | `#afb371` | `--color-olive-leaf` | accent | Olive hue appearing in project-card imagery; reserve for artwork rather than interface emphasis. |
| Muted Taupe | `#9c978a` | `--color-muted-taupe` | neutral | Image-derived stone tone from portfolio cards; not a system text or section colour. |
| Cacao Brown | `#683e28` | `--color-cacao-brown` | accent | Deep brown visible in selected project imagery; keep it within image-led artwork. |
| Dusty Clay | `#a38f86` | `--color-dusty-clay` | neutral | Muted project-image colour, not a consistent interface surface. |
| Moss Grey | `#8b8c7d` | `--color-moss-grey` | neutral | Soft grey-green sampled from portfolio imagery; avoid treating it as a UI accent. |
| Pale Pebble | `#b4b0a6` | `--color-pale-pebble` | neutral | Image-derived pale stone tone that supports the work’s natural palette. |
| Ivory Sand | `#eee5da` | `--color-ivory-sand` | neutral | Warm light tone from project artwork, not a separate page section colour. |
| Sanded Taupe | `#b2a895` | `--color-sanded-taupe` | neutral | Portfolio-image neutral; use only when reproducing artwork, not shared interface chrome. |
| Foliage Slate | `#697263` | `--color-foliage-slate` | neutral | Muted green-grey found in project imagery; not a brand-wide navigation or text colour. |
| Lichen Olive | `#96956f` | `--color-lichen-olive` | neutral | Olive-grey tone sampled from portfolio cards; keep it image-specific. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#e5e5e5` (Soft Concrete) · `--color-surface-2` → `#aaaaa4` (Warm Ash) · `--color-surface-3` → `#d8d0c5` (Linen Stone) · `--color-surface-4` → `#afb371` (Olive Leaf) · `--color-text` → `#000000` (Studio Ink) · `--color-border` → `#000000` (Studio Ink) · `--color-accent` → `#259558` (Atelier Green) · `--color-accent-2` → `#afb371` (Olive Leaf) · `--color-accent-3` → `#683e28` (Cacao Brown)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#e5e5e5` | 16.67:1 | AAA |
| `#000000` | `#aaaaa4` | 9:1 | AAA |
| `#000000` | `#d8d0c5` | 13.75:1 | AAA |
| `#259558` | `#ffffff` | 3.81:1 | AA-large |
| `#259558` | `#e5e5e5` | 3.02:1 | AA-large |
| `#259558` | `#aaaaa4` | 1.63:1 | fail |
| `#259558` | `#d8d0c5` | 2.49:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Helvetica | `--font-body` | system | 400, 600 | Navigation, uppercase service and category labels, links, project metadata, and utility text. | Inter |
| minion-3 | `--font-display` | webfont | 400 | Editorial descriptions, explanatory copy, and select project captions. | Source Serif 4 |

- **Helvetica:** Use regular and semibold weights; labels and links are uppercase with tracked, compact sans-serif styling.
- **minion-3:** Regular serif weight creates contrast with the tracked sans; keep it calm and editorial rather than ornamental.

### Type scale — Augmented Fourth (ratio ≈ 1.412, base 17px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 24px | 400 | 1.2 | 0 | — | minion-3 | Serif agency statement and prominent editorial headline. |
| body | 17px | 400 | 1.2 | 0.04em | uppercase | Helvetica | Uppercase tracked sans labels and concise interface copy. |
| caption | 16px | 400 | 1.2 | 0 | uppercase | minion-3 | Serif uppercase project and supporting captions. |
| link | 17px | 400 | 1.2 | 0.04em | uppercase | Helvetica | Uppercase tracked service filters and navigation links. |
| eyebrow | 17px | 400 | 1.2 | 0.04em | uppercase | Helvetica | Small uppercase tracked labels above or beside content. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 2, 12, 18, 24, 40, 48 px.
- Section rhythm 48px · element gap 24px · card padding 18px · max content width 1392px.

The page uses a broad, centered working area, with the measured maximum width of 1392px and comfortable density. A slim top navigation gives way to a full-bleed hero, then a two-column introduction and service list. Portfolio rows alternate between two- and three-column image arrangements, with the proportions changing to suit each project. Captions sit immediately below images, aligned simply rather than enclosed in cards. The client directory returns to a two-column editorial layout, followed by a full-width footer. Keep the measured 48px section rhythm and 24px element rhythm where applicable.

## Shape & elevation

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

The visual language is flat: no measured shadows or gradient treatments, and no rounded-card system. Project images sit directly on the white canvas with captions below. Keep outlines and separators restrained; the measured black border colour may define fine rules, while the green footer creates separation through a solid colour field rather than elevation.

## Imagery

Photography and branded project artwork dominate the page: packaging, hospitality spaces, fashion, food, and identity applications. The hero uses large cropped imagery with a short white agency statement overlaid across it. Portfolio tiles vary in ratio and content, with direct crops and little visible framing. Preserve the artwork’s own colour and typography; the measured greens, browns, and warm neutrals mostly belong to these images rather than the interface.

## Components

### Masthead

White top strip with the black Atelier Deux-Cé wordmark at left and a simple black two-line menu control at right.

### Hero statement

Full-width project photography with a short uppercase agency statement positioned across the image in white sans-serif text.

### Service introduction

Two-column white section: a compact uppercase heading sits opposite serif explanatory copy and a read-more link.

### Service filters

Inline, text-only category links with compact counts; uppercase tracked sans treatment, without button fills.

### Portfolio tiles

Large project images in alternating two- and three-column rows, followed by small black project name, discipline, and date metadata.

### Client directory

Dense but orderly two-column lists, with category labels and client names presented as simple text links.

### Green footer

Full-width #259558 field with address and agency note above small utility links and an oversized black wordmark.

### Measured component styles

- **Link** (“All projects (73)”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Helvetica
- **Card** (“CART CLOSE No products in the cart. Deli”): background #d8ddc6 · text #000000 · radius 0px · padding 33px 0px 40px 0px · 400 16px Helvetica
- **Navigation item** (“Atelier Deux-Cé”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Helvetica

## Do

- Use white as the primary page canvas.
- Set primary interface text in near-black.
- Let project photography provide most of the colour.
- Pair tracked uppercase sans labels with editorial serif copy.
- Use varied portfolio columns while keeping captions close to images.
- Reserve the saturated green for the footer field.
- Keep surfaces flat and corners square.

## Don't

- Do not turn image-derived olive and brown tones into interface accents.
- Do not add gradients, glows, or decorative shadows.
- Do not wrap every project in a rounded card.
- Do not replace the varied portfolio grid with uniform product tiles.
- Do not use oversized interface controls that compete with the artwork.
- Do not crowd the page with heavy borders or boxed sections.

## Agent prompt

Build a new creative-agency page in the Atelier Deux-Cé visual language. Use Gallery White (#ffffff) as the main canvas and Studio Ink (#000000) for navigation, headings, labels, and project metadata. Set tracked uppercase labels in Helvetica or a close sans substitute, contrasting them with restrained Minion 3-style serif editorial copy. Create a slim masthead, a full-width photographic lead, concise introduction, text-only category links, and a long portfolio with alternating two- and three-column image rows. Keep image captions direct and close to their artwork. Use Atelier Green (#259558) as a distinctive solid footer field only. Treat olive, taupe, and brown samples as project-image colours, not interface palette. Prefer open whitespace, flat surfaces, sharp corners, and minimal borders; avoid shadows, gradients, and generic rounded cards.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width photographic hero below the masthead, with a short sentence overlaid across the image. | Brand introduction, Overlay statement | Full-bleed photography, White uppercase text |
| 2 | feature-split | Two-column section pairing a small heading and service links with editorial explanatory copy. | Service overview, Read more link | White canvas, Tracked sans labels, Serif copy |
| 3 | gallery | One broad portfolio row with two large project images and captions underneath. | Project browsing, Captioned images | Two-column image grid, Small metadata |
| 4 | gallery | Three project images share a row with compact captions below. | Project browsing, Discipline labels | Three-column grid, Square-corner images |
| 5 | gallery | Two larger project images in a wide row with text captions below. | Project browsing, Image-led storytelling | Two-column grid, Direct image crops |
| 6 | gallery | Three project images across the portfolio row, each followed by title and discipline. | Project browsing, Compact metadata | Three-column grid, Aligned captions |
| 7 | gallery | Two large images across the row with captions directly beneath. | Project browsing, Case-study discovery | Two-column grid, Large imagery |
| 8 | gallery | Two image tiles in a wide row with small project metadata. | Project browsing, Visual contrast | Two-column grid, Minimal captions |
| 9 | gallery | Three image tiles in one row with captions beneath each. | Project browsing, Category variety | Three-column grid, Image-first layout |
| 10 | gallery | Two broad project images with captions aligned below. | Project browsing, Brand discovery | Two-column grid, Editorial image crops |
| 11 | gallery | Two large images in a final portfolio row, with simple metadata. | Project browsing, Portfolio continuation | Two-column grid, Plain captions |
| 12 | logo-cloud | Two-column client directory with category labels and stacked names. | Client discovery, Category scanning | Text-only client lists, Editorial columns |
| 13 | footer | Full-width green footer with address and agency note above a row of utility links. | Contact access, Social navigation | Solid green band, Black text, Wide link row |
| 14 | footer | Continuation of the green footer with a large wordmark occupying the lower area. | Brand sign-off | Green background, Oversized black wordmark |

## Source CSS custom properties (selected)

```css
--wp-block-synced-color: #7a00df;
--wp-block-synced-color--rgb: 122,0,223;
--wp-bound-block-color: #7a00df;
--wp-editor-canvas-background: #ddd;
--wp-admin-theme-color: #007cba;
--wp-admin-theme-color--rgb: 0,124,186;
--wp-admin-theme-color-darker-10: #006ba1;
--wp-admin-theme-color-darker-10--rgb: 0,107,160.5;
--wp-admin-theme-color-darker-20: #005a87;
--wp-admin-theme-color-darker-20--rgb: 0,90,135;
--wp-admin-border-width-focus: 2px;
--wp--preset--font-size--normal: 16px;
--wp--preset--font-size--huge: 42px;
--gridRowGap: 24px;
--gridColumnGap: 24px;
--swiper-theme-color: #007aff;
```

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