# Michaelspeichert · Design system migration spec

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

> This site is a perfect example of how extreme scale and contrast can create a powerful, memorable visual identity without relying on color or decoration.

## 1. Identity DNA

The system is built on a single, unwavering principle: scale and contrast are the primary design elements. It functions like a brutalist art gallery, where oversized typography and stark black-and-white graphics communicate with aggressive directness, leaving no room for decorative ambiguity.

**One-liner:** A stark, typographic-first portfolio for a design studio.
**Keywords:** typography · bold · experimental · portfolio · black-and-white
**Analogy:** A brutalist art gallery that communicates through aggressive, oversized type and high-contrast graphics.

## 2. Color

The palette is an exercise in absolute reduction, relying on pure black and pure white for maximum impact. Every color decision is eliminated in favor of a strict binary that forces the viewer's attention onto form, weight, and negative space.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#FFFFFF` | body text |
| `--muted` | `#FFFFFF` | placeholder |
| `--line` | `rgba(255,255,255,1.0)` | divider |

**Color principle:** Strict binary palette relying on extreme contrast and negative space for impact.

The guiding rule is that contrast is not merely aesthetic but structural, defining hierarchy and rhythm across every surface.

## 3. Typography

Typography is the primary visual and communicative element, treated with the weight of architecture. A **display sans-serif** category operates at massive scales, with line heights kept deliberately tight to create a compact, brutalist feel, while alternating between light (300) and medium (500) weights for sharp tonal contrast.

- **Display:** display-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 170px | 1.0 | 500 | -5.1px | Hero headlines and large section headers |
| heading | 60px | 1.06 | 300 | -0.6px | Section titles and project names |
| title | 54px | 1.06 | 500 | -1.62px | Navigation and category labels |
| body | 28px | 1.5 | 500 | 0px | General text and descriptions |

**Type rules:**
- Uppercase is used frequently for emphasis and navigation
- Line heights are tight for a more compact, brutalist feel
- Font weights alternate between light (300) and medium (500) to create strong contrast

## 4. Spacing

Spacing is intentionally asymmetric and generously scaled to accommodate massive type blocks, creating a rhythm that feels deliberate rather than automatic.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Asymmetric and large to accommodate massive typography

## 5. Surfaces

Depth is communicated through sharp, 1px white borders and zero-value box shadows, creating crisp separation without any suggestion of softness or atmosphere. The surface treatment is flat and graphic, reinforcing the system's geometric purity.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0px 0px 0px 1px rgba(255,255,255,1.0)
- **Borders:** Sharp 1px white borders are used to frame and separate content blocks

## 6. Layout

The layout is founded on a grid that supports both large, immersive imagery and monumental typography. This structure is intentionally asymmetric, rejecting uniform columns in favor of dynamic, high-impact compositions that feel experimental rather than formulaic.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A grid-based structure that supports large, immersive imagery and massive type blocks.

## 7. Motion & Interaction

Motion is minimal, functional, and direct, serving only to confirm interaction without decorative flourish. Transitions are smooth and linear, using opacity and transform changes to provide clean feedback that respects the user's focus.

- **Durations:** micro 100ms · small 200ms · medium 600ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth opacity transitions for subtle reveals
  - Direct transforms for interactive hover states

- **Hover:** Immediate visual feedback, often through opacity changes or subtle transforms.
- **Click:** Direct response with minimal delay.
- **Transition:** Smooth and linear transitions for continuous state changes.
- **Keyboard:** Standard focus management with visible outlines.

## 8. Voice & Don'ts

The editorial voice is bold, direct, and confident, mirroring the system's visual aggression. Headlines are massive and expressive, functioning as the primary graphic element, while calls to action are understated but clear, integrated seamlessly into the typographic layout.

- **Tone:** Bold, direct, and confident.
- **Headline style:** Massive, expressive typography that serves as the primary visual element.
- **CTA style:** Understated but clear, often integrated into the overall typographic layout.
- **Avoid:** Avoid using soft gradients or drop shadows / Avoid cluttered layouts with many small elements / Avoid decorative fonts or playful illustrations / Avoid muted color palettes or soft pastels / Avoid traditional grid-based, uniform layouts / Avoid using more than two font families

### Don'ts
- ❌ Don't use color gradients — screenshot shows a strict black-and-white palette
- ❌ Don't use drop shadows on text — screenshot shows flat, high-contrast type
- ❌ Don't center-align all text — screenshot shows a mix of left-aligned and expressive layouts
- ❌ Don't use small, delicate typography — screenshot shows massive, bold display type
- ❌ Don't use rounded corners extensively — screenshot shows sharp, geometric elements
- ❌ Don't use complex, multi-column text blocks — screenshot shows simple, impactful typographic statements

What this system deliberately omits—color, gradients, rounded corners, decorative flourishes—is as critical to its identity as what it includes, defining its power through radical restraint.

## System Prompt (paste into AI tool)

```
This website is a bold, typographic-first portfolio for a design studio. The design is defined by a strict monochromatic palette using pure black (#000000) and pure white (#FFFFFF) for maximum contrast. Typography is the primary design element, using a display sans-serif category at massive scales (up to 170px) with tight tracking and alternating weights. The layout is grid-based but intentionally asymmetric to create a brutalist, experimental feel. Critical constraints include avoiding any use of color, maintaining sharp geometric elements, and keeping layouts simple but impactful. The overall tone is confident, direct, and highly expressive, relying on scale and contrast rather than decoration.
```