---
name: Jonaspelzer
description: "An excellent example of a refined, typography-forward portfolio that prioritizes elegant presentation over flashy effects."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  tertiary: "#3502FF"
  neutral: "#000000"
  line: "rgba(0, 0, 0, 0.1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.5px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A sophisticated design portfolio showcasing 15+ years of work in digital products.

*A refined digital portfolio acting as a living case study catalog.*

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Accent (`#3502FF`)** — uses `accent` token
- **Muted (`#000000`)** — uses `muted` token
- **Borders (`rgba(0, 0, 0, 0.1)`)** — uses `line` token

## Typography

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

- 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.

## Layout

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

*Rhythm:* Generous vertical padding and white space to let the typography and projects breathe.

## Elevation & Depth

- 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.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Pill-shaped navigation bar with solid purple background for active state.
- **card:** Project thumbnails with rounded corners (12px) and subtle shadow or border.
- **hero:** Large typographic lockup mixing sans and serif with generous white space above.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```