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

# DNCO · Design System

> Bold monochrome framing for a world of place brands.

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

DNCO pairs an immersive, high-contrast opening with a restrained introduction and a long, image-led portfolio. Minimal interface elements keep attention on the studio’s diverse place-branding work.

## North star

Keep the interface monochrome and typographically confident, letting each project image provide its own visual character.

## Overview

The page uses a restrained monochrome interface to frame a portfolio whose individual projects carry their own vivid palettes. A near-black opening fills the first viewport, with oversized white DNCO lettering layered over stark, textured imagery; compact white navigation sits along its upper edge. The transition to a white canvas resets the mood: a large, plain-spoken introductory statement leads into small category filters and a long two-column project gallery. Neue Haas Unica Pro is used throughout, with regular weights and clean sans-serif forms; the measured display treatment is large and tightly tracked, while body copy and project captions remain modest. Images are presented as the visual color of the page, not as a competing site-wide palette. Captions use black titles and subdued gray supporting text, with fine outlined pill labels for project types. The overall strategy is quiet interface, assertive scale, and project-led variety.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Ink | `#000000` | `--color-studio-ink` | brand | Opening canvas, oversized hero lettering, primary text, and the measured border color. |
| Gallery Grey | `#e5e5e5` | `--color-gallery-grey` | surface | Measured project-card background; treat as a neutral fallback, not a dominant section band in the screenshot. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Main portfolio canvas, introductory section, and navigation text over the dark opening. |
| Caption Grey | `#a3a3a3` | `--color-caption-grey` | semantic | Muted supporting copy, especially project descriptions and secondary captions. |

### Semantic aliases

`--color-canvas` → `#e5e5e5` (Gallery Grey) · `--color-surface` → `#ffffff` (Paper White) · `--color-surface-2` → `#000000` (Studio Ink) · `--color-text` → `#000000` (Studio Ink) · `--color-text-muted` → `#a3a3a3` (Caption Grey) · `--color-border` → `#000000` (Studio Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#e5e5e5` | 16.67:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#a3a3a3` | `#e5e5e5` | 2:1 | fail |
| `#a3a3a3` | `#ffffff` | 2.52:1 | fail |
| `#a3a3a3` | `#000000` | 8.33:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Neue Haas Unica Pro | `--font-body` | webfont | 400 | Site-wide typography for navigation, hero and section headings, filters, project titles, and captions. | Inter |

- **Neue Haas Unica Pro:** Regular weight throughout; measured display is tightly tracked, while navigation and body copy use neutral sentence case.

### Type scale — Custom (ratio ≈ 2, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 400 | 1 | -0.025em | — | Neue Haas Unica Pro | Oversized DNCO wordmark treatment in the immersive opening. |
| h1 | 22px | 400 | 1 | 0 | — | Neue Haas Unica Pro | Introductory statement beneath the hero. |
| body | 18px | 400 | 1.33 | 0 | — | Neue Haas Unica Pro | Project descriptions and supporting page copy. |
| button | 18px | 400 | 1.56 | 0 | — | Neue Haas Unica Pro | Plain-text category filters above the project gallery. |
| nav | 18px | 400 | 1.56 | 0 | — | Neue Haas Unica Pro | Top navigation links over the opening visual. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 12, 14, 24, 48 px.
- Section rhythm 80px · element gap 24px · card padding — · max content width 1392px.

A full-bleed opening gives way to a white, single-column page structure. The project area becomes a two-column gallery at the supplied desktop screenshot scale, with image-led tiles and compact captions beneath. Content is aligned to a shared page margin; the measured maximum page width is 1392px. The introduction, filter row, and portfolio follow a comfortable rhythm, with the measured section gap at 80px and element gap at 24px. The gallery is long and content-dense, but its repeated tile structure keeps scanning orderly.

## Shape & elevation

- Radius: nav `50%` · pill `9999px`
- No box shadows measured: the page is flat.

The interface is predominantly flat: measured shadows are absent, and card corners are square. Separate content through whitespace and image boundaries rather than raised panels. Small category labels use fine black outlines and pill-shaped contours; keep layering concentrated in the hero artwork and avoid adding decorative shadow effects.

## Imagery

The hero uses stark black-and-white, high-contrast imagery with oversized brand lettering. Portfolio thumbnails mix place photography, campaign graphics, signage, identity applications, and occasional flat-color project visuals. Each tile is framed consistently, while the project artwork retains its own palette and treatment; avoid imposing a site-wide color filter over this varied work.

## Components

### Hero wordmark

Full-viewport dark opening with dramatically oversized white DNCO lettering layered over monochrome, textured imagery.

### Top navigation

Compact white text links arranged along the upper edge of the dark hero; regular Neue Haas Unica Pro at the measured 18px nav size.

### Introduction

A large, left-aligned statement on white, with generous surrounding negative space and no decorative panel.

### Category filters

Four measured plain-text controls, including All, Sector, Location, and Expertise; black text without a filled button background.

### Portfolio tile

Image-led project link in a two-column desktop gallery, followed by a black project title and muted gray description.

### Project label

Small outlined pill at the caption edge identifying a project category, such as Place brand or Wayfinding.

### Measured component styles

- **Primary button** (“All”): transparent background · text #000000 · radius 0px · padding 0px · 400 18px Neue Haas Unica Pro
- **Link** (“Dua Two Sudirman Place brand Your workpl”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Neue Haas Unica Pro
- **Card**: background #e5e5e5 · text #000000 · radius 0px · padding 0px · 400 16px Neue Haas Unica Pro
- **Navigation item** (“Work Place branding Wayfinding About us ”): transparent background · text #ffffff · radius 0px · padding 0px · 400 18px Neue Haas Unica Pro

## Do

- Use black and white as the interface foundation.
- Make the opening hero immersive and typographically bold.
- Give the introduction clear space before the portfolio.
- Keep project imagery visually varied and unfiltered.
- Use a consistent two-column gallery at the supplied desktop scale.
- Separate project titles from descriptions with muted gray.
- Keep category controls and labels visually restrained.

## Don't

- Do not add an unmeasured accent color to the site interface.
- Do not use shadows to lift cards from the page.
- Do not round project images into decorative cards.
- Do not let filters compete with the project gallery.
- Do not force project artwork into a uniform palette.
- Do not replace the clean sans-serif typography with display serifs.

## Agent prompt

Build a new DNCO-style consultancy page around an editorial portfolio. Use Studio Ink (#000000) and Paper White (#ffffff) for the core interface, Gallery Grey (#e5e5e5) only as a measured neutral card fallback, and Caption Grey (#a3a3a3) for secondary copy. Set type in Neue Haas Unica Pro or a close free substitute such as Inter, with regular weights and a tightly tracked, oversized display treatment. Start with an immersive, high-contrast hero and compact navigation; follow with a plain, left-aligned introduction, text-only category filters, and a long two-column project gallery. Keep project photography and graphic identities free to express their own colors. Use square image framing, restrained outlined category pills, generous whitespace, and flat surfaces without shadows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed dark hero with oversized central wordmark and compact top-edge navigation. | persistent top navigation, high-impact brand introduction | black canvas, white wordmark, monochrome textured media |
| 2 | other | White, single-column section with a large left-aligned statement and open space. | concise positioning statement | white canvas, plain black heading, generous whitespace |
| 3 | category-nav | Compact text filters above the project gallery on the white page. | filter by category, all-items option | four text controls, no filled button backgrounds |
| 4 | gallery | Long two-column desktop gallery of image-led project links with captions beneath each image. | browse project collection, open individual case studies | consistent thumbnail framing, black titles, muted descriptions, outlined category pills |

## Source CSS custom properties (selected)

```css
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
```

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