---
name: Wandelmaier
description: "This site is an excellent example of refined, typographic portfolio design, using massive scale and a restrained dark palette to create a premium feel."
version: alpha

colors:
  background: "#191816"
  primary: "#FFFFFF"
  neutral: "#A9A9A9"
  line: "rgba(255, 255, 255, 0.1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 187px
    lineHeight: 0.9
    fontWeight: 300
    letterSpacing: "-2px"
  heading:
    fontFamily: humanist-sans
    fontSize: 50px
    lineHeight: 1.1
    fontWeight: 300
    letterSpacing: "-1px"
  body:
    fontFamily: humanist-sans
    fontSize: 24px
    lineHeight: 1.4
    fontWeight: 300
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.4
    fontWeight: 300
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 48px
  lg: 72px
  pill: 9999px

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

---

## Overview

A refined, high-contrast portfolio for a product design strategist

*A minimalist architectural studio's portfolio*

## Colors

High-contrast dark theme with a muted neutral text color

- **Background (`#191816`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Muted (`#A9A9A9`)** — uses `muted` token
- **Borders (`rgba(255, 255, 255, 0.1)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** humanist-sans
- **Mono:** humanist-sans

## Layout

Large, centered content blocks with generous whitespace

*Rhythm:* Generous vertical rhythm with 32px base increments

## Elevation & Depth

- Borders: No visible borders on most elements

## Shapes

- `sm`: 4px
- `md`: 48px
- `lg`: 72px
- `pill`: 9999px

## Components

- **button:** Pill-shaped or large rounded rectangles with solid color fills
- **card:** Image-led project cards with simple text descriptions below
- **chip:** N/A
- **input:** N/A
- **hero:** Massive typographic hero with overlapping colored shapes

## Do's and Don'ts

**Don't:**
- Don't use multiple competing accent colors — the screenshot shows three distinct, bold accent shapes that are used sparingly and never together as UI chrome
- Don't center all text content — the screenshot shows clear left-aligned body text and descriptions
- Don't use complex card borders or shadows — the screenshot shows flat, borderless image cards
- Don't use small, tight typography — the screenshot shows extremely large, airy display type
- Don't use a light theme — the screenshot shows a consistent, deep dark background
- Don't use uppercase for headlines — the screenshot shows lowercase for the main hero text

---

## System Prompt (paste into AI agent)

```
This is a personal portfolio for a product design strategist. Positioning is professional, refined, and focused on high-end craft. Key colors are a deep, warm off-black background (#191816) with crisp white text (#FFFFFF) and muted gray (#A9A9A9) for secondary information. The palette is punctuated by three bold, solid-color shapes: a vibrant green (#34A847), a soft pink (#FBCBCB), and a warm coral (#F27851). Typography uses a humanist sans-serif (PolySans) for UI and a transitional serif (Canela) for expressive display text, both at very light weights. Critical donts: Don't use small, dense text; don't use multiple competing accent colors simultaneously; don't use heavy shadows or borders on cards; don't use uppercase for headlines; don't use a light color scheme; don't use complex, cluttered layouts.
```