# Rauno Freiberg · Design system migration spec

> Source: https://rauno.me  ·  Curated by OpenDesign  ·  en

> This site is a prime example of bold, typographic portfolio design, using extreme scale and stark contrast to create a memorable visual impact.

## 1. Identity DNA

This design system operates like a stark, brutalist exhibition space where interaction design work is presented without ornament. Every element is stripped to its essential form, using bold typography and extreme contrast to define presence through absence rather than addition.

**One-liner:** A bold, typographic portfolio site defined by extreme scale and stark contrast.
**Keywords:** minimalist · bold typography · high contrast · developer
**Analogy:** A stark, brutalist exhibition space for interaction design work.

## 2. Color

The palette is anchored in high-contrast monochrome—neutral grays, black, and white—with a single electric yellow accent used sparingly for geometric shapes. This restraint creates visual tension where the rare injection of high-chroma color commands immediate attention.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#8f8f8f` | main background |
| `--bg-soft` | `#ededed` | card background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#171717` | secondary text |
| `--muted` | `#6f6f6f` | placeholder |
| `--accent` | `#FFFF02` | single accent |
| `--line` | `rgba(0, 0, 0, 1)` | divider |

**Color principle:** High-contrast monochrome base with a single high-chroma accent.

The governing principle is restraint: color earns its presence through scarcity, making each application of accent feel deliberate and impactful.

## 3. Typography

Typography serves as the primary structural material, employing grotesque-sans categories for display and system-sans for body text. The voice is defined by extreme scale, tight line-heights, and a near-uniform weight of 400, creating typographic statements that function as architectural elements.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 85px | 1.0 | 400 | -1px | Large typographic blocks and headings |
| body | 16px | 1.5 | 400 | 0 | Small labels and standard text |
| label | 14px | 1.4 | 400 | 0 | Small category labels |

**Type rules:**
- Use extremely large font sizes for key text elements.
- Maintain tight line-heights for display text.
- Limit font weight to mostly 400.

## 4. Spacing

Spacing establishes rhythm through generous padding within containers, creating breathing room that allows massive typographic blocks to command their territory without crowding.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous padding within containers.

## 5. Surfaces

Surfaces exist in flat, stark relief with 1px solid black borders defining some elements, while shadows are deliberately absent. White rectangular cards sit against gray backgrounds with sharp or only slightly rounded corners, maintaining the brutalist clarity.

- **Radius:** sm 4px · md 12px · lg 12px · pill 9999px
- **Borders:** 1px solid black borders on some elements.

## 6. Layout

The layout follows an asymmetric, card-based skeleton where content blocks exist in deliberate tension rather than orderly grid alignment. This structure prioritizes visual impact over conventional information hierarchy, creating a composition that feels both intentional and dynamically arranged.

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

**Skeleton:** Asymmetric, card-based layout.

## 7. Motion & Interaction

Motion philosophy favors subtlety over spectacle—smooth transitions on background, border-color, and opacity properties respond to user interaction. Hover states transform containers with understated fluidity, reinforcing the system’s commitment to functional elegance over decorative animation.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Hover transitions on containers.

- **Hover:** Cursor changes to pointer on interactive elements.
- **Click:** Standard click behavior.
- **Transition:** Transitions on background, border-color, and opacity.
- **Keyboard:** Standard tab navigation.

## 8. Voice & Don'ts

The editorial voice is direct, confident, and minimal, using extremely large, lowercase or sentence-case typographic statements as headlines. Traditional calls-to-action are deliberately subtle or absent, relying on visual hierarchy and the weight of typographic presence to guide attention.

- **Tone:** Direct, confident, and minimal.
- **Headline style:** Extremely large, lowercase, or sentence-case typographic statements.
- **CTA style:** Subtle or non-existent, relying on visual hierarchy.
- **Avoid:** Decorative elements / Complex gradients / Cluttered layouts

### Don'ts
- ❌ don't use heavy drop shadows — screenshot shows flat, borderless white cards.
- ❌ don't use bright, saturated background colors everywhere — screenshot shows a dominant neutral gray.
- ❌ don't use small, delicate typography for headlines — screenshot shows massive, bold text.
- ❌ don't use multiple font weights — screenshot shows a reliance on 400 weight.
- ❌ don't use traditional navigation bars — screenshot shows a minimalist, custom top navigation.
- ❌ don't use rounded corners on everything — screenshot shows sharp or only slightly rounded corners.

The system deliberately avoids decorative elements, complex gradients, and cluttered layouts—choosing instead to let bold, typographic statements and stark contrast define every interaction.

## System Prompt (paste into AI tool)

```
Design a minimalist, typography-driven portfolio site inspired by brutalist web design. Use a stark, high-contrast palette dominated by neutral grays (#8f8f8f, #ededed) and pure black (#000000), with a single, vibrant accent color like electric yellow (#FFFF02) used sparingly for geometric shapes. The typography should be bold and large, using grotesque-sans categories for display and system-sans for body text, maintaining a mostly uniform 400 weight. Layout should be asymmetric and card-based, with generous padding (e.g., 64px) inside containers. Critical constraints: avoid decorative elements or complex gradients, never use small delicate typography for headlines, and always prioritize bold, impactful typographic statements over dense paragraphs.
```
