# Emil Kowalski · Design system migration spec

> Source: https://emilkowal.ski  ·  Curated by OpenDesign  ·  en

> A prime example of 'restraint' in design, showing how a simple palette and layout can create a professional and focused experience.

## 1. Identity DNA

The system's identity is built like a well-organized notebook: a calm, developer-focused portfolio where every element has a clear purpose. Its clean, typographic-first approach prioritizes content and readability above all else.

**One-liner:** A calm, developer-focused portfolio with a clean, typographic-first approach.
**Keywords:** design engineer · clean · minimal · developer portfolio
**Analogy:** A well-organized notebook

## 2. Color

Color is employed with strict restraint, using a warm monochrome palette to create a serene, focused environment. The palette relies on subtle temperature and contrast shifts rather than hue.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#fdfdfc` | main background |
| `--ink` | `#21201c` | body text |
| `--ink-soft` | `#63635e` | secondary text |
| `--line` | `rgba(233,233,231,1)` | divider |

**Color principle:** Monochrome with a warm, off-white base and high-contrast typography.

The governing principle is clear: color exists only to support hierarchy and legibility, never to decorate.

## 3. Typography

Typography establishes voice through a neutral sans-serif category, where hierarchy is communicated via weight and color rather than dramatic size changes. This creates a confident, professional tone that remains modest and readable.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| h2 | 16px | 1.5 | 500 | 0 | Section headings |

**Type rules:**
- Body text uses a light gray color (#63635e) for softer reading.
- Section headings are black (#21201c) and slightly bolder.
- Maintain a consistent 24px line height for body text.

## 4. Spacing

A steady vertical rhythm, set by consistent 24px line-heights and 96px section spacing, gives the layout its quiet, measured pulse.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Vertical rhythm is established by consistent 24px line-heights and generous 96px vertical spacing between major sections.

## 5. Surfaces

Depth is communicated through the most minimal of means: a faint, one-pixel border and a nearly imperceptible shadow. The result is a flat, paper-like surface where content sits quietly.

- **Radius:** sm 0px · md 6px · lg 0px · pill 9999px
- **Shadows:**
  - 0 0 0 1px rgba(0,0,0,0.08)
  - 0 2px 2px 0 rgba(0,0,0,0.04)
- **Borders:** 1px solid border color (rgb(233,233,231))

## 6. Layout

The layout skeleton is a single, narrow column centered within the viewport. This structure eliminates visual competition, forcing a direct, linear path through the content.

- **Container max:** 640px
- **Paragraph max:** 640px
- **Grid:** 1 columns, gutter 0px
- **Breakpoints:** 768 px

**Skeleton:** Single-column layout with a narrow, centered container.

## 7. Motion & Interaction

Motion is purely functional, used sparingly to acknowledge interaction. All transitions are quick, subtle color changes that provide feedback without drawing attention to themselves.

- **Durations:** micro 150ms · small 150ms · medium 150ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Subtle color transitions on interactive elements.

- **Hover:** Subtle color change on hover (transition: 0.15s).
- **Click:** Standard click behavior.
- **Transition:** Color, background-color, border-color, text-decoration-color, fill, stroke all transition over 0.15s.
- **Keyboard:** Standard tab navigation.

## 8. Voice & Don'ts

The editorial voice is confident, professional, and direct, favoring concise headlines over descriptive prose. It communicates with the straightforward clarity of a skilled practitioner.

- **Tone:** Confident, professional, and straightforward.
- **Headline style:** Concise and direct, often just a single word or short phrase.
- **CTA style:** Simple, action-oriented text on a high-contrast button.
- **Avoid:** Marketing fluff / Complex jargon / Excessive exclamation marks

### Don'ts
- ❌ Don't use bright, saturated accent colors — screenshot shows a monochrome palette.
- ❌ Don't use complex multi-column layouts — screenshot shows a single, narrow column.
- ❌ Don't use heavy drop shadows — screenshot shows minimal, subtle borders.
- ❌ Don't use large, dramatic typography — screenshot shows a modest, readable scale.
- ❌ Don't use sans-serif fonts with purely geometric or humanist characteristics — screenshot shows a clean, neutral sans-serif.
- ❌ Don't use excessive padding or margins — screenshot shows tight, consistent spacing.

This system deliberately forgoes bright accent colors, complex layouts, and dramatic display typography to maintain its focused, professional integrity.

## System Prompt (paste into AI tool)

```
This is a minimalist developer portfolio for a design engineer. The design relies on a clean, monochrome palette with a warm off-white background (#fdfdfc) and dark ink (#21201c). The layout is a single, narrow column, prioritizing readability and content over visual complexity. Typography is set in a neutral sans-serif category, with clear hierarchy established through weight and color rather than size. Key design elements include subtle 1px borders and rounded input fields. Critical don'ts: avoid bright accent colors, complex grids, heavy shadows, and overly large display fonts. The overall feel is calm, refined, and professional.
```