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

# Concrete Club Studio · Design System

> Expressive type, open space, collective spirit

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

Concrete Club Studio introduces a Paris-based creative collective through oversized serif lettering, sparse editorial copy, and sharply contrasting section colours. The page alternates a vivid yellow opening, a dark studio statement, a pale image gallery, and another dark principles section.

## North star

Let oversized editorial typography and uninterrupted colour fields define the page, keeping supporting content sparse and deliberately placed.

## Overview

The page’s visual identity is led by a saturated muted-yellow field (#e1d372) and oversized plum lettering (#462d4a), rather than the white canvas suggested by the measured first-section background. The screenshot makes the yellow hero the defining brand moment: small, restrained metadata sits near the top edges, while the huge, delicate serif wordmark occupies most of the viewport. Subsequent sections switch to charcoal (#212121) with fine light copy, then a pale grey gallery whose many image tiles introduce project-specific colour and texture. TRJN DaVinci supplies the expressive display and much of the compact uppercase copy; Neue Montreal is a minor supporting face. The layout is deliberately spacious and asymmetrical, with isolated text groups rather than conventional cards or dense content columns. Keep surfaces flat and transitions clear: contrast comes from large uninterrupted colour bands, expressive typography, and illustrative or portfolio imagery, not from shadows or decorative UI chrome.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Mist | `#f5f6f5` | `--color-gallery-mist` | surface | Pale background band behind the portfolio gallery and its image grid. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Measured canvas and navigation text colour; a secondary light surface, not the screenshot’s dominant hero. |
| Studio Charcoal | `#212121` | `--color-studio-charcoal` | neutral | Full-width background for the studio introduction and collective-principles sections. |
| Plum Ink | `#462d4a` | `--color-plum-ink` | brand | Hero wordmark and dark-text navigation; supplies the signature contrast against yellow. |
| Concrete Yellow | `#e1d372` | `--color-concrete-yellow` | brand | Dominant opening hero background and primary identifying colour in the screenshot. |
| Pure Black | `#000000` | `--color-pure-black` | semantic | Measured button text colour; appears sparingly and is not a defining section colour. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Paper White) · `--color-surface` → `#212121` (Studio Charcoal) · `--color-surface-2` → `#f5f6f5` (Gallery Mist) · `--color-surface-3` → `#e1d372` (Concrete Yellow) · `--color-text` → `#462d4a` (Plum Ink) · `--color-text-muted` → `#f5f6f5` (Gallery Mist) · `--color-text-subtle` → `#ffffff` (Paper White) · `--color-accent` → `#e1d372` (Concrete Yellow)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#462d4a` | `#ffffff` | 12.11:1 | AAA |
| `#462d4a` | `#212121` | 1.33:1 | fail |
| `#462d4a` | `#f5f6f5` | 11.17:1 | AAA |
| `#462d4a` | `#e1d372` | 7.93:1 | AAA |
| `#f5f6f5` | `#ffffff` | 1.08:1 | fail |
| `#f5f6f5` | `#212121` | 14.86:1 | AAA |
| `#f5f6f5` | `#e1d372` | 1.41:1 | fail |
| `#ffffff` | `#212121` | 16.1:1 | AAA |
| `#ffffff` | `#f5f6f5` | 1.08:1 | fail |
| `#ffffff` | `#e1d372` | 1.53:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| TRJN DaVinci | `--font-body` | webfont | 400 | Expressive hero display, navigation, captions, and uppercase body copy. | Cormorant Garamond |
| Neue Montreal | `--font-neue-montreal` | webfont | 400 | Minor supporting text face within the measured font mix. | Inter |

- **TRJN DaVinci:** Regular weight; display is extremely large with tight negative tracking, while body copy is uppercase and compact.
- **Neue Montreal:** Small measured share; use sparingly as a neutral sans-serif counterpoint to the dominant serif.

### Type scale — Custom (ratio ≈ 18.75, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 300px | 400 | 0.73 | -0.03em | — | TRJN DaVinci | Oversized two-line Concrete Club hero wordmark. |
| body | 16px | 400 | 1.19 | 0 | uppercase | TRJN DaVinci | Compact uppercase studio statements and explanatory copy. |
| caption | 14px | 400 | 1.14 | -0.03em | — | TRJN DaVinci | Small editorial labels and supporting metadata. |
| nav | 16px | 400 | 0.75 | -0.03em | — | TRJN DaVinci | Small, understated header navigation links. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 3, 5, 10, 30, 60 px.
- Section rhythm 230px · element gap — · card padding — · max content width 1380px.

The page uses broad, full-width horizontal bands and an intentionally spacious rhythm, with a measured maximum content width of 1380px. The hero’s huge wordmark is left aligned and nearly fills the viewport, while tiny intro and location/navigation details sit at opposite top corners. Dark-section copy appears in separate, asymmetrically positioned groups. The pale portfolio area is measured as an eight-column image grid with generous breathing room. Keep the density low and the composition editorial rather than applying a uniform card layout.

## Shape & elevation

- No box shadows measured: the page is flat.

The visual system is flat: measured shadows and gradients are absent, and component radii are not part of the style. Separate content with uninterrupted colour bands and whitespace, not elevated cards. Avoid adding prominent borders; the measured palette contains no clear border colour, and the screenshot’s hierarchy comes from colour and typography.

## Imagery

The pale gallery section contains many portfolio images arranged as a grid, with project imagery carrying its own varied colours. The dark introduction also shows a small hand-drawn line illustration, reinforcing the analog-meets-digital character. Treat imagery as artwork rather than product photography: preserve its original aspect and visual character, and let the surrounding pale or charcoal bands remain quiet.

## Components

### Hero wordmark

A huge, regular-weight TRJN DaVinci serif title in Plum Ink (#462d4a), broken across lines on the Concrete Yellow (#e1d372) field.

### Corner metadata

Small, quiet introductory text and location/navigation details sit near opposite top corners of the hero.

### Studio statement

Sparse, uppercase copy is positioned in isolated groups on a full-width Studio Charcoal (#212121) section.

### Portfolio gallery

An eight-column measured image grid occupies the Gallery Mist (#f5f6f5) section; imagery remains visually varied and unboxed.

### Principles section

A second full-width charcoal band carries numbered collective principles as editorial text, without card styling.

### Text links

Minimal navigation links use TRJN DaVinci, with Plum Ink on light surfaces and white text where contrast requires it.

### Measured component styles

- **Primary button**: transparent background · text #000000 · radius 0px · padding 0px · 400 112px HelveticaNeue-Light
- **Navigation item** (“Studio,”): transparent background · text #462d4a · radius 0px · padding 5px 2.5px · 400 16px TRJN DaVinci

## Do

- Use Concrete Yellow (#e1d372) as the signature hero field.
- Set the hero title in an expressive, oversized serif.
- Keep metadata small and peripheral to the main title.
- Alternate broad charcoal and pale section bands.
- Use asymmetrical placements for editorial text.
- Let portfolio imagery retain its individual character.

## Don't

- Do not turn the layout into a conventional SaaS dashboard.
- Do not add shadows, gradients, or rounded-card styling.
- Do not crowd the hero with supporting content.
- Do not use the gallery as a uniform set of boxed cards.
- Do not introduce extra colours as defining brand colours.
- Do not replace the delicate serif character with heavy geometric display type.

## Agent prompt

Build a new creative-studio page in Concrete Club’s editorial visual language. Use Concrete Yellow (#e1d372) as a bold uninterrupted opening field, with a very large, delicate Plum Ink (#462d4a) serif headline and minimal corner-aligned metadata. Use TRJN DaVinci where available; approximate it with Cormorant Garamond, and keep copy compact and often uppercase. Structure the page as spacious full-width bands, alternating Studio Charcoal (#212121) with Gallery Mist (#f5f6f5). Place text asymmetrically and leave substantial negative space. Present project work as an open image grid without card chrome, allowing the artwork’s colours to vary. Keep controls and links understated, use flat surfaces, and avoid shadows, gradients, and invented ornamental borders.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-viewport yellow field; small copy at the top corners and an oversized, left-aligned two-line wordmark. | corner-aligned navigation, studio and location metadata | yellow background, plum serif display, minimal header |
| 2 | feature-split | Full-width charcoal band with small text groups placed asymmetrically around a hand-drawn illustration. | studio introduction, collaboration narrative | charcoal field, small uppercase copy, line illustration |
| 3 | gallery | Pale full-width section containing a measured eight-column grid of portfolio images. | browse project imagery, image-led discovery | pale grey background, multi-column image grid, unboxed artwork |
| 4 | other | Full-width charcoal section with numbered statements presented as editorial text. | scan numbered principles, read collective values | charcoal field, uppercase typography, flat section surface |

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