---
title: "Jonas Pelzer design system"
variant: extended
source: https://jonaspelzer.com/
captured_at: 2026-10-12
theme: light
industry: portfolio
generator: Design DNA (https://four.wiralomi.com/style/jonaspelzer-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Jonas Pelzer · Design System

> A quiet canvas for expressive digital work

**Theme:** light · **Industry:** portfolio · **Source:** https://jonaspelzer.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A restrained portfolio homepage introduces Jonas Pelzer through editorial typography, generous white space, and a broad gallery of digital projects. Black text and small violet interface accents keep attention on the varied work samples rather than imposing a heavy visual frame.

## North star

Keep the page itself quiet and typographic so the varied project imagery provides the color and visual energy.

## Overview

The page uses pure white as a continuous canvas, with near-black typography carrying nearly all of the interface hierarchy. Violet appears sparingly in interface details and in project imagery, not as a competing page-wide theme. The opening statement is centered within a relatively narrow text area, pairing a distinctive display face with a literary serif for an editorial, composed introduction. A large vertical pause separates this introduction from a dense, three-column project gallery. Project previews retain their own colors and visual identities, presented as rounded media tiles rather than recolored brand assets. Supporting work and contact content continue the restrained approach: text remains clear and direct, while borders and outlined controls are light. The overall contrast between spacious introductory content and compact, colorful portfolio thumbnails lets the designer’s work supply visual variety without sacrificing a coherent, quiet frame.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Page canvas and button surfaces; provides the uninterrupted background around text and project previews. |
| Editorial Ink | `#000000` | `--color-editorial-ink` | neutral | Primary headings, body copy, navigation, links, and footer text. |
| Soft Divider | `#d4d6dd` | `--color-soft-divider` | semantic | Fine outlines on understated controls, including the small icon buttons. |
| Lilac Outline | `#d7ccff` | `--color-lilac-outline` | accent | Pale border on the secondary work button; a restrained supporting violet. |
| Lavender Field | `#c2b3ff` | `--color-lavender-field` | surface | Accent surface detected in page content; use as a small violet area, not a full-page brand background. |
| Violet Signal | `#5d35ff` | `--color-violet-signal` | accent | Small button accent detected in the interface; reserve for targeted emphasis. |
| Electric Violet | `#491bff` | `--color-electric-violet` | brand | Filled WORK button with white uppercase text; the strongest interface accent. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#c2b3ff` (Lavender Field) · `--color-text` → `#000000` (Editorial Ink) · `--color-border` → `#d4d6dd` (Soft Divider) · `--color-accent` → `#c2b3ff` (Lavender Field) · `--color-accent-2` → `#491bff` (Electric Violet) · `--color-accent-3` → `#5d35ff` (Violet Signal) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#c2b3ff` | 11.19:1 | AAA |
| `#c2b3ff` | `#ffffff` | 1.88:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Signifier | `--font-body` | webfont | 400 | Primary literary serif for explanatory copy, project links, and secondary headings. | Cormorant Garamond |
| Scope | `--font-display` | webfont | 400 | Display and interface face for the hero, uppercase labels, navigation, and buttons. | Jost |

- **Signifier:** Regular weight and natural case; body and links stay compact and readable.
- **Scope:** Regular weight; uppercase captions and controls use visibly expanded tracking, while the hero mixes case.

### Type scale — Augmented Fourth (ratio ≈ 1.394, base 15.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 42px | 400 | 1.1 | 0.02em | — | Scope | Opening designer statement, set as the main display headline. |
| h2 | 25.5px | 400 | 1.2 | 0 | — | Signifier | Major sections such as work and about. |
| h3 | 22px | 400 | 1.2 | 0 | — | Signifier | Subsection headings, including services content. |
| body | 15.5px | 400 | 1.2 | 0 | — | Signifier | Introductory and supporting descriptive copy. |
| caption | 14px | 400 | 1.2 | 0.036em | uppercase | Scope | Compact uppercase labels and metadata. |
| button | 17px | 400 | 1.2 | 0.02em | uppercase | Scope | Uppercase calls to action and control labels. |
| nav | 17px | 400 | 1.2 | 0.02em | uppercase | Scope | Uppercase primary navigation labels. |
| link | 15.5px | 400 | 1.2 | 0 | — | Signifier | Project titles and inline text links. |
| eyebrow | 14px | 400 | 1.2 | 0.036em | uppercase | Scope | Small uppercase section or content overlines. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 3, 4, 5, 6, 7, 9, 11, 14, 15, 16, 20, 37, 138, 154 px.
- Section rhythm 209px · element gap 3px · card padding — · max content width 1408px.

A spacious, centered introduction sits above a broad project gallery, with the measured page max width at 1408px. The hero text aligns as a compact block rather than spanning the viewport; the gallery below uses three columns and lets thumbnails form the dominant horizontal band. Generous section separation creates a clear change from introduction to work, while the later contact prompt returns to sparse text on white. Keep overall density low and preserve the contrast between quiet copy areas and image-rich work rows.

## Shape & elevation

- Radius: button `12px` · media `12px` · nav `8px` · xs `4px` · sm `8px` · md `12px`
- Shadow `sm` (other): `rgba(53, 2, 255, 0.1) 0px 1px 4px 2px`
- Motion: standard transition `0.2s cubic-bezier(0.22, 1, 0.36, 1)` on interactive elements.

The page is predominantly flat, with no prominent card shadows or layered panels. Light outlines define select controls, and rounded media edges separate project previews from the white canvas. Keep elevation subtle; avoid adding deep shadows or decorative containers that compete with the artwork.

## Imagery

Project imagery is the main source of color: a range of website and digital-product previews appears in a three-column gallery, each retaining its own palette and design language. Media tiles have softly rounded corners and consistent framing, while the screenshot shows mixed photographic, typographic, and graphic content inside them. Treat these as portfolio previews, not as a unified illustration system.

## Components

### Intro statement

A centered, two-line display statement with a short serif supporting paragraph beneath it; generous surrounding white space keeps it distinct.

### Project gallery

A three-column collection of wide website-preview tiles; each retains its source artwork, with rounded media framing.

### Work CTA

A compact uppercase SEE MORE WORK control with a pale #d7ccff outline and violet text.

### Primary work control

A small filled #491bff button with white uppercase WORK text, using the display/interface face.

### Icon controls

Minimal icon-only buttons use a thin #d4d6dd border and rounded corners without a filled background.

### Contact prompt

A plain text invitation and underlined contact link appear below the work area, with no enclosing card.

### Measured component styles

- **Primary button** (“WORK”): background #491bff · text #ffffff · radius 8.26px · padding 5.6px 11.1px · 400 17px Scope · uppercase
- **Secondary button** (“SEE MORE WORK”): transparent background · text #3402ff · border 1px solid #d7ccff · radius 12px · padding 6px 14px · 400 14px Scope · uppercase
- **Link** (“ARETE — Visual History of the Latin Alph”): transparent background · text #000000 · radius 0px · padding 0px 15.4px 0px 0px · 400 15.4px Signifier
- **Navigation item** (“MASTODON”): transparent background · text #000000 · radius 8.26px · padding 4.6px 6.8px · 400 17px Scope · uppercase

## Do

- Keep the canvas white and the interface text black.
- Use violet for small, purposeful interface accents.
- Give the opening statement generous breathing room.
- Let project previews retain their original colors.
- Use serif copy alongside the distinctive display face.
- Keep borders light and component surfaces mostly flat.

## Don't

- Do not add a dark page background.
- Do not turn the violet accent into a broad gradient.
- Do not force project thumbnails into one color treatment.
- Do not crowd the hero with navigation or decoration.
- Do not use heavy shadows or dense card styling.
- Do not make every heading uppercase.

## Agent prompt

Build a designer portfolio page with a quiet editorial frame: use Gallery White (#ffffff) as the canvas and Editorial Ink (#000000) for headings, copy, links, and navigation. Set the introduction as a compact, centered statement with generous whitespace, using a display-style face paired with a literary serif for supporting text. Follow it with a broad three-column project gallery whose thumbnails keep their individual colors and visual identities. Use rounded media edges, minimal control outlines in Soft Divider (#d4d6dd), and a pale Lilac Outline (#d7ccff) for secondary actions. Reserve Electric Violet (#491bff) for one small filled primary control; keep other violet accents restrained. Leave clear vertical separation before a simple text-led contact prompt. Avoid heavy cards, shadows, gradients, and decorative backgrounds.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Single centered introductory text block on white, with a display headline and narrower supporting paragraph. | clear identity statement, experience summary | mixed display typography, large whitespace |
| 2 | gallery | Three-column project gallery followed by a small work CTA and a sparse contact prompt. | project browsing, see-more action, contact link | rounded media previews, light outlined controls, three-column grid |

## Source CSS custom properties (selected)

```css
--border-radius: 12px;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/jonaspelzer-com