# Maximilianberndt · Design system migration spec

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

> This site is a masterclass in minimalist portfolio design, using extreme typographic restraint and a clean grid to project high competence.

## 1. Identity DNA

This design system is a clean Swiss-style typographic specimen sheet for a digital craftsman. It is built on principles of minimalist precision, where every element is justified by its function within a strict grid and monochromatic palette.

**One-liner:** A stark, highly typographic portfolio for a creative developer, using a strict grid and monochromatic palette.
**Keywords:** minimalist · developer · portfolio · typographic · precision
**Analogy:** A clean Swiss-style typographic specimen sheet for a digital craftsman.

## 2. Color

The palette is strictly monochromatic, a deliberate choice for maximum legibility and focus. It uses near-black for primary text, a medium gray for secondary information, and an off-white background.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FDFDFD` | main background |
| `--ink` | `#16161D` | body text |
| `--muted` | `#737377` | placeholder |
| `--line` | `rgba(22, 22, 29, 1)` | divider |

**Color principle:** Strictly monochromatic, using near-black and medium gray on an off-white background for maximum legibility.

The principle is absolute: color is used only to establish hierarchy and ensure readability.

## 3. Typography

Typography is the primary structural element, using a uniform grotesque-sans category to project competence. The scale is consistent and precise, applied to both primary UI text and headers without decorative variation.

- **Display:** grotesque-sans
- **Body:** grotesque-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 12px | 1.25 | 400 | -0.096px | Primary UI text and headers |

## 4. Spacing

The layout relies on a strict grid system with generous vertical spacing to create a deliberate rhythm.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** The layout relies on a strict grid system with generous vertical spacing between sections and consistent padding.

## 5. Surfaces

Depth is communicated through spacing and color contrast alone. The system defines surfaces without visible borders or shadows.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** No visible borders; spacing and color contrast define the boundaries.

## 6. Layout

The skeleton is a strict two-column asymmetric grid on desktop, designed to collapse cleanly to a single column on mobile. This rigid structure organizes content primarily in list structures, avoiding the use of visual cards.

- **Container max:** 1440px
- **Paragraph max:** 600px
- **Grid:** 12 columns, gutter 36px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A strict two-column asymmetric grid on desktop, collapsing to a single column on mobile.

## 7. Motion & Interaction

Motion philosophy centers on subtle, professional refinement. Transitions are smooth and consistent, using a standard easing over 400ms for all properties to create a cohesive feel.

- **Durations:** micro 150ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth text fades and list transitions on scroll or hover.

- **Hover:** Subtle opacity changes or color shifts.
- **Click:** Direct navigation without complex animations.
- **Transition:** All properties over 400ms for smooth, professional transitions.
- **Keyboard:** Standard focus states for accessibility.

## 8. Voice & Don'ts

The editorial voice is professional, understated, and highly competent, conveyed through minimal headlines and plain text links. The system deliberately avoids overly decorative elements, vibrant colors, and complex iconography.

- **Tone:** Professional, understated, and highly competent.
- **Headline style:** Minimal, using small, precise typography.
- **CTA style:** Plain text links, often hidden in the top right or within lists.
- **Avoid:** Overly decorative elements / Vibrant colors / Complex iconography

### Don'ts
- ❌ Don't use bright accent colors — screenshot shows a strictly monochromatic palette.
- ❌ Don't use large, decorative fonts — screenshot shows a uniform 12px grotesque-sans.
- ❌ Don't add shadows or borders — screenshot shows a flat layout defined by whitespace.
- ❌ Don't use complex imagery in the main layout — screenshot shows text-only content.
- ❌ Don't use rounded corners — screenshot shows sharp, unstyled elements.
- ❌ Don't center-align text — screenshot shows a strict left-aligned layout.

It deliberately does not accommodate bright accents, large decorative fonts, shadows, complex imagery, rounded corners, or center-aligned text.

## System Prompt (paste into AI tool)

```
This is a minimalist portfolio site for a creative developer, emphasizing extreme restraint and typographic precision. It uses a strict monochromatic palette: near-black text (#16161D) on an off-white background (#FDFDFD) with medium gray (#737377) for secondary information. The typography is uniform, utilizing a single grotesque-sans category at 12px. Critical donts include: never use decorative elements or bright accents, avoid large display typography, and maintain a strict left-aligned layout without borders or shadows. The layout relies on a rigid grid and generous whitespace to create a professional, Swiss-style aesthetic.
```