Skip to content
Library

Dylanbrouwer. Brutalist type foundry at dusk.

  • Studio
  • Mixed theme
  • 11 colors
  • 3 typefaces

A designer's portfolio that treats the page as a typographic monument: a dark hero of massive condensed display letters fading from black into light, dropping into clean monochrome content sections where every secondary element — nav, tags, labels — is stripped to its barest form. The single chromatic note is a vivid ember orange that appears as small functional punctuation: status dots, accent fills, alive signals. Typography carries the entire system: a heavy grotesque (Die Grotesk B) for body and mid-scale headings, a monospaced voice (IBM Plex Mono) for technical metadata and nav, and a super-condensed variable display face (ABC Gravity Variable) for monument-scale statements that fill the viewport. Spacing is tight and grid-ruthless, borders are hairline, corners are mostly sharp with pill rounding reserved for interactive elements, and motion is expressive with custom cubic-bezier easings that make elements feel weighted and intentional rather than bouncy.

Screenshot of Dylanbrouwer
Captured from dylanbrouwer.design on October 11, 2026

Dylanbrouwer design system

Dylanbrouwer

Brand1

  • Status indicators, accent dots, live signals, decorative fills — the sole chromatic note in an otherwise monochrome system

Accent2

  • Gradient fill on massive display type — black fading to mid-gray to light silver across the word

  • Section transitions and hero vignette — horizontal black to silver fade

Neutrals8

  • Dark hero background, deep badges, section dark-mode surfaces

  • Primary text, nav links, body copy, filled button text

  • Secondary text, heading subtitles, supporting copy

  • Muted helper text, inactive nav state, subtle UI metadata

  • Hairline dividers, grid lines, light borders, low-emphasis text

  • Light body backgrounds, subtle section washes, nav inactive background

  • Page canvas, base background surface

  • Card surfaces, elevated panels, tag borders, card borders

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Onyx on Ember Orange

6.14 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictFails AAA 7

More DESIGN.md files. Same web, different personalities.