# Driesbos · Design system migration spec

> Source: https://www.driesbos.com  ·  Curated by OpenDesign  ·  en

> A masterclass in minimalism, using a unique 3D wireframe aesthetic to create a memorable, text-driven developer portfolio.

## 1. Identity DNA

Driesbos is designed as a meticulously organized tool chest in a well-lit studio, where every element is placed with intent and nothing is hidden behind ornament. The system is built for a creative developer, prioritizing clarity and function over flair, creating a minimal, text-driven portfolio that lets the work speak.

**One-liner:** A minimal, text-driven portfolio for a creative developer.
**Keywords:** Creative Developer · Award Winning · Agency Sidekick
**Analogy:** A meticulously organized tool chest in a well-lit studio.

## 2. Color

The palette is a strict monochromatic study, a high-contrast conversation between warm off-white and near-black that focuses all attention on typographic hierarchy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#E8E7E3` | main background |
| `--ink` | `#050200` | body text |
| `--muted` | `#9E9C97` | placeholder |
| `--line` | `rgba(5,2,0,1.0)` | divider |

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

The principle is absolute clarity, using color not as decoration but as a tool to define structure and legibility.

## 3. Typography

Typography is the core communicative voice, using a custom grotesque-sans at a single, strict weight of 400. This uniform weight and a consistent block rhythm create a steady, professional cadence throughout the primary content and navigation.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| body | 20px | 1.45 | 400 | 0px | Primary content and navigation |

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

## 4. Spacing

A grid-based internal padding of 25px establishes a consistent visual rhythm, creating measured blocks of content that align with mechanical precision.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Grid-based with a fixed 25px internal padding creating a consistent visual rhythm.

## 5. Surfaces

Surfaces are defined not by softness but by sharp, structural lines. Solid 1px black borders carve out space and create a unique 3D wireframe effect on the hero, establishing depth through geometry rather than shadow.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** Solid 1px black lines defining blocks and tables, with a unique 3D wireframe effect on the hero.

## 6. Layout

The layout skeleton is a single, vertical column of blocks, a strict flow that rejects multi-column complexity. Within this column, a table-like list provides the organized structure for project curation.

- **Container max:** 1000px
- **Paragraph max:** 680px
- **Grid:** 4 columns, gutter 0px
- **Breakpoints:** 768 px

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

## 7. Motion & Interaction

Motion is deliberate and smooth, governed by a consistent 330ms transition for text and background states. A horizontal marquee ticker provides continuous, low-impact interaction, while complex transforms use a slower 700ms cubic-bezier easing for a refined mechanical feel.

- **Durations:** micro 220ms · small 330ms · medium 700ms
- **Easing:** `cubic-bezier(0.77, 0, 0.28, 1)`
- **Patterns:**
  - Horizontal marquee ticker
  - Smooth 330ms transitions on text and background
  - 700ms cubic-bezier easing for complex transforms

- **Hover:** Subtle 330ms color and background transitions.
- **Click:** Minimal visual feedback, primarily relying on the transition duration.
- **Transition:** 0.33s ease-in-out for most state changes.
- **Keyboard:** N/A in current view.

## 8. Voice & Don'ts

The editorial voice is direct, professional, and concise, with headlines built from short, punchy phrases separated by em dashes. This tone is supported by minimal, text-only links that guide navigation through implied action.

- **Tone:** Direct, professional, and concise.
- **Headline style:** Short, punchy phrases separated by em dashes.
- **CTA style:** Implied through arrow icons and a repeating marquee ticker.
- **Avoid:** Avoid heavy drop shadows or soft blurs / Avoid rounded corners on primary containers / Avoid multi-column layouts for main content

### Don'ts
- ❌ 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.

The system deliberately rejects decorative imagery, rounded corners, vibrant accent colors, and bold font weights to maintain its pure, wireframe aesthetic.

## System Prompt (paste into AI tool)

```
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.
```