CURATED · OPEN · FREE

Driesbos

A minimal, text-driven portfolio for a creative developer.

DeveloperPortfolioMonochromeCleanCuration

↓ Download design system (1 MB)Open in OpenDesign

Visit: https://www.driesbos.com

📦 Browse pack contents →

Identity DNA

Creative DeveloperAward WinningAgency Sidekick

A meticulously organized tool chest in a well-lit studio.

Color

#050200Ink

#E8E7E3BG

#9E9C97Muted

rgba(5,2,0,1.0)Line

High-contrast monochrome with a warm paper-like background and absolute focus on typography.

Typography

grotesque-sans

body20px · 400

Use a custom sans-serif for identity · Maintain a strict single weight of 400 · Use 25px padding for consistent block rhythm

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Grid-based with a fixed 25px internal padding creating a consistent visual rhythm.

Surfaces

sm · 0px

md · 0px

lg · 0px

pill · 999px

Solid 1px black lines defining blocks and tables, with a unique 3D wireframe effect on the hero.

Layout

1000container

4columns

768breakpoints

A single-column, block-based layout with a table-like list for projects.

Motion & Interaction

220msmicro

330mssmall

700msmedium

cubic-bezier(0.77, 0, 0.28, 1)easing

Horizontal marquee ticker · Smooth 330ms transitions on text and background · 700ms cubic-bezier easing for complex transforms

Subtle 330ms color and background transitions. · Minimal visual feedback, primarily relying on the transition duration.

Components

button Minimal text-only links with a custom arrow icon.
card A 3D wireframe-outlined hero container acting as the primary focal point.
input N/A in current view.
hero A perspective-drawn wireframe box containing the site name and intro text.

Voice & Don'ts

Tone Direct, professional, and concise.
Headlines Short, punchy phrases separated by em dashes.
CTAs Implied through arrow icons and a repeating marquee ticker.

Don't use rounded corners — screenshot shows sharp, 0px radii on all containers and cards.
Don't use heavy shadows — screenshot shows only flat, 1px solid borders for definition.
Don't use decorative imagery — screenshot shows a strictly text-based, wireframe aesthetic.
Don't use bold weights — screenshot shows a uniform font weight of 400 throughout.
Don't use vibrant accent colors — screenshot is strictly monochrome using only black and warm off-white.
Don't use complex multi-column grids — screenshot shows a strict single-column, block-based vertical flow.
Avoid: Avoid heavy drop shadows or soft blurs
Avoid: Avoid rounded corners on primary containers
Avoid: Avoid multi-column layouts for main content

Inside the pack — real screenshots

Driesbos — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

This is a minimal portfolio site for a creative developer. It uses a warm off-white background (#E8E7E3) and dark brownish-black text (#050200) in a custom grotesque-sans font (weight 400). The layout is single-column and block-based, defined by sharp 1px solid borders. A unique 3D wireframe box frames the hero section. Critical donts: avoid rounded corners, avoid drop shadows, avoid using bold font weights, and avoid using any vibrant accent colors. The design relies on a 330ms transition for all state changes and a repeating marquee ticker for interaction.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko