# Jonaspelzer · Design system migration spec

> Source: http://jonaspelzer.com  ·  Curated by OpenDesign  ·  en

> An excellent example of a refined, typography-forward portfolio that prioritizes elegant presentation over flashy effects.

## 1. Identity DNA

This design system is constructed as a living case-study catalog, a refined digital portfolio that serves as both container and content. Its identity is defined by the tension between typographic authority and deliberate white space, much like a well-edited exhibition where each piece is given room to speak.

**One-liner:** A sophisticated design portfolio showcasing 15+ years of work in digital products.
**Keywords:** Designer · Digital Products · Websites · Jonas Pelzer · 15+ years
**Analogy:** A refined digital portfolio acting as a living case study catalog.

## 2. Color

The color system is built on a foundation of stark, high-contrast black and white, establishing a neutral canvas of absolute clarity. A single, high-chroma purple accent is deployed sparingly as a signal of interactive state and brand signature.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#000000` | placeholder |
| `--accent` | `#3502FF` | single accent |
| `--line` | `rgba(0, 0, 0, 0.1)` | divider |

**Color principle:** High-contrast black and white foundation with a singular, high-chroma purple accent.

The principle is restraint; color is used as a functional accent within a monochrome framework, never as a decorative element.

## 3. Typography

Typography operates through a deliberate dialogue between a geometric sans-serif and a transitional serif, mixed within the same headline block to create rhythmic tension and hierarchy. This pairing allows for both modern directness and classic editorial weight.

- **Display:** geometric-sans
- **Body:** transitional-serif

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.1 | 400 | -0.5px | Main hero introduction headline |

**Type rules:**
- Mix geometric sans and transitional serif within the same headline block for rhythmic contrast.
- Use generous line-height and tracking for elegant readability.
- Favor all-caps for primary navigation and category labels.

## 4. Spacing

The spatial rhythm is defined by generous vertical padding and ample white space, creating a measured cadence that allows typography and imagery to breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical padding and white space to let the typography and projects breathe.

## 5. Surfaces

Depth is suggested with surgical precision through a single, subtle purple-tinted shadow. Borders are used to define sharp boundaries or create delicate divisions between content zones.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0px 1px 4px 2px rgba(53, 2, 255, 0.1)
- **Borders:** 1px solid #000000 for sharp boundaries; 1px solid rgb(212, 214, 221) for subtle divisions.

## 6. Layout

The layout skeleton begins with a centered, typographically expressive hero section. This flows into a structured, three-column grid for project cards, creating a clear visual progression from introduction to portfolio showcase.

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

**Skeleton:** Centered hero section followed by a 3-column grid of project cards.

## 7. Motion & Interaction

Motion is purposeful and smooth, serving to guide focus and provide feedback rather than to decorate. All transitions follow a soft cubic-bezier curve, ensuring a consistent and fluid temporal rhythm across the interface.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.22, 1, 0.36, 1)`
- **Patterns:**
  - Smooth page transitions and hover states on project cards.
  - Subtle scaling or translation on project thumbnails.

- **Hover:** Subtle scale or shadow change on project cards and navigation items.
- **Click:** Immediate visual feedback on interactive elements.
- **Transition:** All properties transition smoothly using the specified cubic-bezier curve.
- **Keyboard:** Standard focus management with visual focus rings.

## 8. Voice & Don'ts

The voice is professional, confident, and experienced, expressed through direct, declarative headlines. The copy prioritizes clarity and typographic expression over narrative flourish.

- **Tone:** Professional, confident, and experienced.
- **Headline style:** Direct, declarative, and typographically expressive.
- **CTA style:** Clear, action-oriented, often presented in all-caps within the navigation.
- **Avoid:** Avoid overly casual or playful language. / Avoid dense blocks of text without clear hierarchy. / Avoid generic corporate jargon.

### Don'ts
- ❌ Don't use a serif font for primary navigation — screenshot shows uppercase sans-serif labels.
- ❌ Don't use a bright or multi-color palette — screenshot shows a strict black, white, and purple scheme.
- ❌ Don't center all content — screenshot shows left-aligned hero text and a structured grid.
- ❌ Don't use heavy drop shadows — screenshot shows only one instance of a subtle purple box-shadow.
- ❌ Don't use complex or decorative UI components — screenshot shows a minimal, text-driven interface.
- ❌ Don't use a dark mode interface — screenshot shows a bright, light-background design.

What this system deliberately omits is just as defining: it rejects playful casualness, generic corporate jargon, and dense, unhierarchical text blocks.

## System Prompt (paste into AI tool)

```
This is a refined, typography-driven design portfolio for a senior digital designer. The palette is a high-contrast foundation of black (#000000) and white (#FFFFFF) with a single, vibrant purple accent (#3502FF). Typography is a sophisticated mix of geometric sans and transitional serif categories. Layout is centered and spacious with generous white space. Key donts: avoid colorful gradients, avoid using serif for navigation, and avoid cluttered layouts. The voice is professional and experienced, using direct, declarative headlines.
```
