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

# Dries Bos · Design System

> Quietly precise, built around the work.

**Theme:** light · **Industry:** portfolio · **Source:** https://www.driesbos.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._

A restrained portfolio turns a long client list into a clear, browsable index. Warm gray surfaces, fine dark outlines, and compact project rows create a calm, architectural feel.

## North star

Treat the portfolio as a calm, architectural index: use warm neutral planes, precise outlines, and consistent column alignment to foreground the work.

## Overview

The page is built from a warm, muted neutral palette: a gray-beige canvas frames slightly lighter panels, while near-black text and rules provide the strongest contrast. These colors are functional rather than decorative; they distinguish the page background from the enclosed work index and make every row boundary legible. Sohne Buch supplies the main interface and body text in a consistent, unembellished sans-serif voice. The composition resembles a precise architectural object: an outlined, perspective-like top form leads into a rectangular content frame, followed by an introductory statement, filter labels, and a dense sequence of project rows. Alignment is strict and repeated across year, project, work type, and action columns. Generous breathing room around the introductory copy gives way to tighter row rhythm below. Imagery is not the visual driver in the supplied view; the portfolio’s structure, typography, and linework carry the identity.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Near Ink | `#050200` | `--color-near-ink` | brand | Primary text, project names, arrows, and the outlines that define the navigation frame and work rows. |
| Panel Chalk | `#e8e7e3` | `--color-panel-chalk` | surface | Main content and project-list surface, set against the darker canvas and divided by dark rules. |
| Warm Canvas | `#d6d4cd` | `--color-warm-canvas` | neutral | Page canvas surrounding the framed content; establishes the muted gray-beige ground. |
| Soft Stone | `#dfddd8` | `--color-soft-stone` | surface | Secondary card surface in the measured palette; supports subtle tonal separation within the work area. |
| Quiet Gray | `#999794` | `--color-quiet-gray` | semantic | Muted text detail, including subdued filter labels; not a defining brand accent. |

### Semantic aliases

`--color-canvas` → `#e8e7e3` (Panel Chalk) · `--color-surface` → `#d6d4cd` (Warm Canvas) · `--color-surface-2` → `#dfddd8` (Soft Stone) · `--color-text` → `#050200` (Near Ink) · `--color-border` → `#050200` (Near Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#050200` | `#e8e7e3` | 16.72:1 | AAA |
| `#050200` | `#d6d4cd` | 13.95:1 | AAA |
| `#050200` | `#dfddd8` | 15.24:1 | AAA |

### Gradients

- `conic-gradient(from -45deg, rgb(5, 2, 0) 0deg, rgb(5, 2, 0) 180deg, rgba(0, 0, 0, 0) 180deg, rgba(0, 0, 0, 0) 360deg)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Sohne Buch | `--font-body` | system | 400 | Primary interface, project list, navigation, and introductory copy | Inter |

- **Sohne Buch:** Regular weight, sentence case, and plain sans-serif forms; keep tracking neutral and hierarchy restrained.

### Type scale — Major Third (ratio ≈ 1.25, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| body | 20px | 400 | 1.45 | 0 | — | Sohne Buch | Introductory statement, project names, navigation, and work-index text. |
| caption | 13px | 400 | 1 | 0 | — | Arial | Small secondary labels and compact metadata. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 6, 13, 20, 25, 30 px.
- Section rhythm 75px · element gap 6px · card padding — · max content width —.

A centered, outlined content frame sits within a broad canvas, with a shallow perspective-like top shape leading into the interface. The page uses a consistent column system for year, selected work, work type, and row actions. Introductory copy occupies a more open band; below it, the project index becomes tightly stacked and highly repetitive. Keep edges aligned, preserve clear outer margins, and avoid adding unsupported width or spacing values.

## Shape & elevation

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

The interface is predominantly flat, with no measured shadows. Thin, dark outlines create separation and a crisp, diagram-like structure; repeated horizontal rules divide the project rows. Layering comes from the framed panels and perspective-like top outline, not from shadows, rounded cards, or glossy effects.

## Imagery

The supplied page view relies on interface structure rather than photography or decorative illustration. Its most distinctive visual is the outlined, perspective-like form above the content frame, which reads as a simple geometric construction. Keep project imagery subordinate to the list-based identity when creating a new page; avoid introducing colorful stock photography, gradients, or ornamental illustrations that compete with the restrained palette.

## Components

### Outlined identity bar

A pale horizontal panel sits within the larger outline, with the name at left and compact utility icons aligned at right.

### Introductory statement

A short two-line introduction occupies an open band, with a right-aligned arrow acting as the forward cue.

### Project index header

Muted labels identify year, selected work, and work type; a search icon closes the row.

### Project rows

Repeated pale rows align year, project title, category, and compact external-link or arrow actions; dark hairlines divide entries.

### Footer index

A restrained closing panel groups work and about links with contact and social destinations, plus a return-to-top arrow.

### Measured component styles

- **Primary button** (“year year”): transparent background · text #060300 · radius 0px · padding 25px 30px 20px 30px · 400 20px myFont
- **Link** (“Work Work”): transparent background · text #050200 · radius 0px · padding 0px · 400 20px Sohne Buch
- **Card** (“Selected work 2025 2025 Mmerch Mmerch st”): background #e8e7e3 · text #050200 · border 2px solid #050200 · radius 0px · padding 0px · 400 20px myFont

## Do

- Use the warm gray canvas around clearly framed content.
- Keep text and structural rules near-black and high contrast.
- Align project metadata into consistent columns.
- Use repeated horizontal dividers to organize long indexes.
- Reserve muted gray for secondary labels.
- Keep the hierarchy typographic and restrained.

## Don't

- Do not introduce bright accent colors or gradients.
- Do not add shadows to flat panels.
- Do not round the square-cornered outlines.
- Do not scatter project metadata outside its columns.
- Do not let decorative imagery overwhelm the work index.
- Do not turn every row into an elevated card.

## Agent prompt

Build a new portfolio page in Dries Bos’s quiet, architectural style. Use Warm Canvas (#d6d4cd) as the surrounding ground, Panel Chalk (#e8e7e3) for the main framed surface, and Near Ink (#050200) for text and crisp outlines. Use Soft Stone (#dfddd8) only for secondary tonal separation and Quiet Gray (#999794) for subdued metadata. Set the interface in Sohne Buch or a close sans-serif alternative such as Inter, with neutral tracking and regular-weight text. Organize content into a centered outlined frame with a clear introduction followed by a precise multi-column index. Separate repeated entries with rules, keep corners square, and avoid shadows, gradients, bright accents, and decorative imagery. Maintain spacious framing and compact, orderly content.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | Outlined centered frame; introduction and filter header lead into a dense, aligned project list and compact footer. | project index, filter labels, row-level actions, footer navigation | warm gray canvas, outlined panels, horizontal dividers, aligned metadata, arrow icons |

## Source CSS custom properties (selected)

```css
--theme-bg: #d6d4cd;
--theme-bg-gradient: 0;
--font-size-caption: .66rem;
--border-width: 2px;
--border-hyperlink: 1.5px;
--spacing-side: 1.5rem;
--spacing-side-image: 1.5rem;
--spacing-base: 1.25rem;
--spacing-icons: 1.25rem;
--spacing-half: .625rem;
--spacing-containerTopDistance: 0;
--transition-layout-duration: .66s;
```

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