---
name: Driesbos
description: "A masterclass in minimalism, using a unique 3D wireframe aesthetic to create a memorable, text-driven developer portfolio."
version: alpha

colors:
  background: "#E8E7E3"
  primary: "#050200"
  neutral: "#9E9C97"
  line: "rgba(5,2,0,1.0)"

typography:
  body:
    fontFamily: grotesque-sans
    fontSize: 20px
    lineHeight: 1.45
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

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

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

## Colors

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

- **Background (`#E8E7E3`)** — uses `bg` token
- **Primary text (`#050200`)** — uses `ink` token
- **Muted (`#9E9C97`)** — uses `muted` token
- **Borders (`rgba(5,2,0,1.0)`)** — uses `line` token

## Typography

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

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

## Layout

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

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

## Elevation & Depth

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

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 999px

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

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

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