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

# Dylan Brouwer · Design System

> Monochrome canvases, oversized type, work in motion.

**Theme:** light · **Industry:** portfolio · **Source:** https://www.dylanbrouwer.design/ · **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 Dutch digital designer’s portfolio pairs monumental typography with cinematic grayscale gradients and a lively project gallery. The restrained palette lets expressive work samples and subtle orange accents take focus.

## North star

Let oversized, tightly set typography and grayscale media lead, while keeping the interface quiet and the accent rare.

## Overview

The page is built on a pale gray canvas (#f1f1f1), with broad areas of breathing room punctuated by charcoal-to-gray gradients and deep inverse sections. Typography provides the main visual force: ABC Gravity Variable forms huge uppercase display statements, while Die Grotesk B handles compact, readable body copy. IBM Plex Mono adds a technical editorial voice to small uppercase labels and navigation. Most text stays within a restrained gray range; vivid orange (#ff6436) appears sparingly in gradient or footer details rather than acting as a dominant CTA color. The layout moves from a dramatic, near full-screen hero into an expansive media-led portfolio, a collaboration logo strip, and a service-card grid. Project imagery is mixed in scale and positioned asymmetrically, giving the page a curated, art-directed feel. Fine white borders define cards against soft surfaces; the overall treatment remains flat, with gradients, scale, and overlap supplying depth instead of shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Mist | `#f1f1f1` | `--color-gallery-mist` | surface | Primary page canvas and pale base for the hero, logo band, and service area. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Card border and crisp contrast on small buttons and light project surfaces. |
| Soft Graphite | `#7b7a7c` | `--color-soft-graphite` | neutral | Muted heading and supporting text within gray gradient sections. |
| Haze Gray | `#a2a2a2` | `--color-haze-gray` | neutral | Secondary text, navigation labels, and subdued link text. |
| Studio Ink | `#3c3a3e` | `--color-studio-ink` | brand | Default body copy, navigation, and dark text on light surfaces. |
| Brown Black | `#201d1d` | `--color-brown-black` | surface | Inverse dark section surface, supporting the portfolio’s cinematic contrast. |
| Card Chalk | `#f8f8f8` | `--color-card-chalk` | surface | Light service-card fill, subtly separated from the page canvas. |
| Gradient Stone | `#dcd6d6` | `--color-gradient-stone` | neutral | Lower transition tone in measured grayscale gradients and footer treatments. |
| Slate Fade | `#6e6c70` | `--color-slate-fade` | neutral | Intermediate gray in dark-to-light section gradients, not a primary flat UI color. |
| Near Void | `#040305` | `--color-near-void` | neutral | Deep gradient starting point and dark visual framing behind hero media. |
| Carbon | `#161616` | `--color-carbon` | neutral | Occasional near-black text, footer detail, and fine dark outlines. |
| Signal Tangerine | `#ff6436` | `--color-signal-tangerine` | accent | Sparse orange gradient accent, especially in footer atmosphere and small details. |
| Dove Gradient | `#adafae` | `--color-dove-gradient` | neutral | Light gray gradient endpoint, seen in footer transitions rather than core controls. |
| Lilac Ash | `#c9c7cc` | `--color-lilac-ash` | neutral | Minor muted navigation text tone. |
| Silver Smoke | `#b9b7bb` | `--color-silver-smoke` | neutral | Soft gradient and navigation tone, subordinate to the main gray palette. |

### Semantic aliases

`--color-canvas` → `#f1f1f1` (Gallery Mist) · `--color-surface` → `#ffffff` (Paper White) · `--color-surface-2` → `#201d1d` (Brown Black) · `--color-surface-3` → `#f8f8f8` (Card Chalk) · `--color-text` → `#3c3a3e` (Studio Ink) · `--color-text-muted` → `#7b7a7c` (Soft Graphite) · `--color-text-subtle` → `#a2a2a2` (Haze Gray) · `--color-border` → `#ffffff` (Paper White) · `--color-accent` → `#ff6436` (Signal Tangerine)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#3c3a3e` | `#f1f1f1` | 9.96:1 | AAA |
| `#3c3a3e` | `#ffffff` | 11.25:1 | AAA |
| `#3c3a3e` | `#201d1d` | 1.49:1 | fail |
| `#3c3a3e` | `#f8f8f8` | 10.59:1 | AAA |
| `#7b7a7c` | `#f1f1f1` | 3.78:1 | AA-large |
| `#7b7a7c` | `#ffffff` | 4.27:1 | AA-large |
| `#7b7a7c` | `#201d1d` | 3.92:1 | AA-large |
| `#7b7a7c` | `#f8f8f8` | 4.02:1 | AA-large |
| `#a2a2a2` | `#f1f1f1` | 2.26:1 | fail |
| `#a2a2a2` | `#ffffff` | 2.55:1 | fail |

### Gradients

- `linear-gradient(rgb(4, 3, 5), rgb(110, 108, 112) 25%, rgb(164, 163, 165) 50%, rgb(220, 214, 214) 75%, rgb(241, 241, 241))`
- `linear-gradient(rgb(4, 3, 5), rgb(58, 56, 61) 25%, rgb(107, 107, 107) 38%, rgb(144, 143, 144) 54%, rgb(185, 183, 187) 70%, rgb(241, 241, 241) 102%)`
- `linear-gradient(340deg, rgb(255, 100, 54), rgba(255, 100, 54, 0) 50%)`
- `linear-gradient(rgb(241, 241, 241), rgb(173, 175, 174))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Die Grotesk B | `--font-body` | webfont | 500 | Primary body, supporting headings, and much of the navigation and link text. | Inter |
| IBM Plex Mono | `--font-mono` | webfont | 500, 600 | Small uppercase navigation, captions, metadata, and code-like labels. | IBM Plex Mono |
| ABC Gravity Variable | `--font-display` | webfont | 400, 500 | Oversized hero and section display headings. | Bebas Neue |

- **Die Grotesk B:** Medium weight is common; compact negative tracking keeps body text neat and headings confident.
- **IBM Plex Mono:** Use medium or semibold weight, uppercase styling, and tight tracking for terse interface labels.
- **ABC Gravity Variable:** Regular-weight uppercase display lettering; very large scale, compressed line height, and tight tracking.

### Type scale — Custom (ratio ≈ 1.772, base 16.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 288px | 400 | 0.74 | -0.01em | uppercase | ABC Gravity Variable | Monumental uppercase hero statement and oversized visual anchors. |
| h1 | 274px | 400 | 0.74 | -0.02em | uppercase | ABC Gravity Variable | Primary oversized uppercase heading in the opening hero. |
| h2 | 96px | 400 | 0.74 | -0.01em | uppercase | ABC Gravity Variable | Large uppercase section titles, including the services heading. |
| h3 | 60px | 500 | 1 | -0.03em | — | Die Grotesk B | Prominent supporting headings within about and service content. |
| h4 | 54px | 500 | 1 | -0.03em | — | Die Grotesk B | Secondary service or portfolio headings. |
| body | 16.5px | 500 | 1.3 | -0.01em | — | Die Grotesk B | Designer introduction and explanatory service descriptions. |
| caption | 12px | 500 | 1 | -0.01em | uppercase | IBM Plex Mono | Small uppercase project metadata and image labels. |
| nav | 12px | 600 | 1.3 | -0.02em | uppercase | IBM Plex Mono | Compact uppercase navigation and section links. |
| code | 12px | 500 | 1 | -0.01em | uppercase | IBM Plex Mono | Terse uppercase detail labels with a technical editorial feel. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 3, 5, 6, 7, 8, 10, 12, 18, 20, 24, 48, 60, 72, 96, 120 px.
- Section rhythm 96px · element gap 6px · card padding 14px · max content width 1166px.

The page uses a spacious, editorial composition within a measured 1166px maximum content width, with selected media bleeding across the viewport. The hero centers attention on a huge statement and overlapping monitor image, while small side copy balances the composition. Portfolio content breaks the symmetry through staggered, varied-size imagery. A horizontal logo band leads into a two-column service area with three cards. Section spacing is generous and density stays low; compact monospace labels contrast with large display type.

## Shape & elevation

- Radius: nav `50%` · xs `14px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.19, 1, 0.22, 1)` on interactive elements.

The interface is largely flat: measured shadows are absent, and cards rely on pale fills and thin white borders. Depth comes from layered monitor mockups, image overlap, large type, and long grayscale gradients. Keep outlines subtle and avoid turning ordinary content into elevated, rounded dashboard panels.

## Imagery

Use real, art-directed project screenshots and photography, especially monitor and device mockups, rather than generic illustrations. Frame media at varied scales, sometimes overlapping the large typography or extending beyond the content area. Keep the page’s surrounding treatment grayscale and atmospheric; project previews may retain their own vivid colors. The hero’s screen imagery is a focal point, while service cards use restrained visual thumbnails.

## Components

### Top navigation

A sparse row of uppercase links across the hero, with small plus-like markers and a compact outlined contact control.

### Hero statement

Oversized uppercase display type sits over a dark-to-light grayscale field, layered with a large angled monitor preview.

### Portfolio gallery

Project media appears in varied sizes and positions, with restrained caption and metadata labels.

### Show all link

A bold, centered, underlined all-work link acts as a clear transition out of the project gallery.

### Client logo strip

A horizontal run of partner marks sits on a light band beneath a compact collaboration heading.

### Service cards

Three light cards use thin white borders, image-led tops, concise headings, and short explanatory copy.

### Footer

A dark-to-gray footer uses compact link groups, a central device image, and a restrained orange gradient detail.

### Measured component styles

- **Primary button**: background #ffffff · text #3c3a3e · radius 0px · padding 6px · 500 12px Die Grotesk B
- **Link**: transparent background · text #3c3a3e · radius 0px · padding 0px · 500 12px Die Grotesk B
- **Card** (“Define Laying the foundation with strate”): background #f8f8f8 · text #3c3a3e · border 1px solid #ffffff · radius 0px · padding 12px 12px 18px 12px · 500 12px Die Grotesk B
- **Navigation item** (“ABOUT SERVICES WORK CONTACT”): transparent background · text #3c3a3e · radius 0px · padding 0px · 500 12px Die Grotesk B

## Do

- Use the measured pale gray canvas as the dominant page background.
- Make display headings huge, uppercase, and visually compressed.
- Use grayscale gradients to give large media sections atmosphere.
- Keep navigation and project metadata small and uppercase.
- Arrange project imagery asymmetrically with deliberate overlap.
- Reserve orange for sparse accents rather than broad interface fills.

## Don't

- Do not add heavy shadows to cards or navigation.
- Do not make every section a uniform centered text block.
- Do not let bright project imagery redefine the site-wide palette.
- Do not use rounded dashboard-style cards.
- Do not enlarge captions or navigation to compete with the display type.
- Do not introduce extra colors beyond measured palette values.

## Agent prompt

Build a new portfolio page in this visual language. Use Gallery Mist (#f1f1f1) as the main canvas, Studio Ink (#3c3a3e) for readable text, and Paper White (#ffffff) for fine card edges. Lead with an oversized uppercase headline in a condensed display face, layered over a grayscale gradient that moves from Near Void (#040305) through Slate Fade (#6e6c70). Set body copy in a clean grotesk and use IBM Plex Mono-style uppercase labels for navigation and metadata. Compose a spacious editorial layout with a dramatic hero, staggered project imagery, a horizontal client-mark band, and a simple three-card service area. Keep shadows absent, borders fine, and card corners restrained. Use Signal Tangerine (#ff6436) only as a rare gradient detail; let project imagery provide any stronger color.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-screen-feeling hero with huge centered type, overlaid monitor imagery, and small side copy. | sparse top navigation, prominent contact link, scroll-led introduction | oversized uppercase display, grayscale gradient, layered monitor mockup, compact mono labels |
| 2 | video | Full-bleed monitor media centered in a wide, open canvas. | ambient media presentation | large device frame, cinematic grayscale surroundings |
| 3 | gallery | Long open section with an introductory statement and scattered, differently sized project images. | portfolio browsing, about-me link | asymmetric image placement, gray gradient backdrop, small project captions |
| 4 | logo-cloud | Small left-aligned heading above a wide horizontal strip of client logos. | client credibility | horizontal logo band, light background |
| 5 | feature-grid | Large section heading above three service cards arranged across two-column content structure. | service overview, learn-more link | image-led cards, thin white borders, short descriptions |
| 6 | footer | Wide footer with compact link groups, centered device imagery, and a right-side contact prompt. | contact prompt, site navigation, social links | dark-to-light gradient, device image centerpiece, subtle orange glow |

## Source CSS custom properties (selected)

```css
--_theme---background: #f1f1f1;
--_paragraphs---paragraph-regular--font: "Die Grotesk B",Arial,sans-serif;
--_theme---body-text: #3c3a3e;
--_paragraphs---paragraph-regular--font-weight: 500;
--_paragraphs---paragraph-regular--letter-spacing: -.01em;
--_fonts---fonts--heading: "ABC Gravity Variable",Impact,sans-serif;
--_headings---heading-xxl--font-size: 10em;
--_headings---heading-xxl--font-weight: 400;
--_headings---heading-xxl--letter-spacing: -.01em;
--_headings---heading-xl--font: "ABC Gravity Variable",Impact,sans-serif;
--_headings---heading-xl--font-size: 8em;
--_headings---heading-xl--font-weight: 400;
--_headings---heading-xl--letter-spacing: -.01em;
--_headings---heading-l--font: "ABC Gravity Variable",Impact,sans-serif;
--_headings---heading-l--font-size: 6em;
--_headings---heading-l--font-weight: 400;
--_headings---heading-l--letter-spacing: -.01em;
--_headings---heading-m--font: "ABC Gravity Variable",Impact,sans-serif;
--_headings---heading-m--font-size: 4.5em;
--_headings---heading-m--font-weight: 400;
--_headings---heading-m--letter-spacing: -.01em;
--_headings---heading-s--font: "ABC Gravity Variable",Impact,sans-serif;
--_headings---heading-s--font-size: 3.5em;
--_headings---heading-s--font-weight: 400;
--_headings---heading-s--letter-spacing: -.01em;
--_headings---heading-xs--font: "ABC Gravity Variable",Impact,sans-serif;
--_headings---heading-xs--font-size: 2em;
--_headings---heading-xs--font-weight: 400;
--_headings---heading-xs--letter-spacing: -.01em;
--color-mode-default--body-text<deleted|variable-cb61a870-d154-a6fe-c8a0-f25e0e5af2eb>: #31383b;
--spacing--tablet-256px<deleted|variable-916d0a3e-b68a-1e36-5438-38f6239c015c>: 12em;
--spacing--mobile-256px<deleted|variable-f160f7f9-1c91-dbef-028c-2ad57aa45df6>: 6em;
--spacing--tablet-224px<deleted|variable-ead628c9-5f3a-db74-2b37-4fc8c9b0460b>: 10em;
--spacing--mobile-224px<deleted|variable-9855d4de-3551-ba49-c73f-35436feb24aa>: 5.25em;
--spacing--tablet-192px<deleted|variable-95da8060-f85f-6001-2a25-ed668e55b33d>: 8em;
--spacing--mobile-192px<deleted|variable-1f8ae059-c45a-e7df-4fc9-d2f57d50172d>: 4.5em;
--spacing--tablet-160px<deleted|variable-063ff5bb-51f0-efdd-5dd1-1b258dc08bac>: 7em;
--spacing--mobile-160px<deleted|variable-ccbf86d9-b96d-7f3f-1a39-3ceea7a753d5>: 4.25em;
--spacing--tablet-128px<deleted|variable-692abbe8-7ac6-8dfe-e5ef-0972beaccf77>: 6em;
--spacing--mobile-128px<deleted|variable-deff835c-7805-b241-712d-4f21fbb7d357>: 4em;
```

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