# Patrickmiller Se · Design system migration spec

> Source: https://patrickmiller.se  ·  Curated by OpenDesign  ·  en

> This site is a strong example of extreme typography-driven portfolio design, where scale and color create immediate impact without complex UI.

## 1. Identity DNA

This system operates like a photographer's studio: stark, confident, and built to frame the work. Its identity is defined by a minimalist, photography-focused portfolio anchored by massive, stark typography that leads with authority.

**One-liner:** A minimalist, photography-focused portfolio anchored by massive, stark typography.
**Keywords:** Photography · Studio · Minimal · Creative · Portfolio
**Analogy:** A stark, confident photographer's portfolio that leads with a bold typographic identity and lets the images speak.

## 2. Color

The color principle is one of dramatic contrast and section-specific mood. A vibrant, warm hero background (#FD9B65) clashes against stark black text, while deep maroon (#6F2C30) and blue accents establish the atmosphere for photographic sections.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FD9B65` | main background |
| `--ink` | `#000000` | body text |
| `--accent` | `#6F2C30` | single accent |
| `--line` | `rgba(0,0,0,1.0)` | divider |

**Color principle:** A vibrant, warm hero background contrasts with stark black text, while photography sections utilize deep maroons, blues, and solid blacks.

The rule is clear: one dominant, saturated hue per section, used to separate content and command attention.

## 3. Typography

Typographic voice is defined by extreme scale and tight control. A humanist-sans display font is set at massive sizes with tight line heights and negative tracking, used for bold, name-driven statements that dominate the visual field.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 331px | 0.8 | 400 | -6.6px | Hero name statement |
| body | 16px | 1.2 | 400 | normal | Standard body text |

**Type rules:**
- Hero typography is set at an extreme scale with tight line heights and negative tracking.

## 4. Spacing

Rhythm is established through consistent, generous container padding (72px), creating a structured yet airy column for content to inhabit.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous padding (72px) is used consistently for container elements.

## 5. Surfaces

Surfaces are flat and graphic, defined by color and type alone. The system eschews shadows and borders entirely, relying on stark color contrast and typographic weight for visual separation.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** None visible; relies on color contrast and typography for separation.

## 6. Layout

The structural skeleton is a strict, single-column, full-bleed layout. All content flows within this vertical channel, anchored by the massive typographic statements in the hero section.

- **Container max:** 1440px
- **Grid:** 1 columns, gutter 72px
- **Breakpoints:** 768 px

**Skeleton:** Full-bleed, single-column layout with massive typography anchoring the hero section.

## 7. Motion & Interaction

Motion is treated as a global, unifying layer. All elements are set to transition transform and opacity properties, facilitating smooth, scroll-triggered reveals that feel deliberate and cinematic.

- **Durations:** micro 220ms · small 300ms · medium 400ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Transforms and opacity transitions are widely applied to elements, suggesting smooth scrolling or reveal effects.

- **Hover:** Elements with cursor:pointer likely feature subtle scale or opacity transforms.
- **Click:** Immediate response via transition properties.
- **Transition:** All properties are set to transition globally, likely for smooth scroll-triggered animations.
- **Keyboard:** Standard tab navigation.

## 8. Voice & Don'ts

The editorial voice is confident, direct, and minimalist. Headlines are massive, single-word or name-driven statements, while the only call to action is a subtle, rotated text element acting as a persistent contact point.

- **Tone:** Confident, direct, and minimalist.
- **Headline style:** Massive, single-word or name-driven statements set in all-caps or title case with extreme negative tracking.
- **CTA style:** Subtle, rotated text element acting as a persistent contact point.
- **Avoid:** Overly descriptive text. / Complex UI components. / Busy layouts.

### Don'ts
- ❌ Don't use multiple competing background colors — screenshot shows a single dominant warm hue per section.
- ❌ Don't add drop shadows to elements — screenshot shows perfectly flat, hard-edged design.
- ❌ Don't use small, delicate typography for primary statements — screenshot relies on massive, heavy type.
- ❌ Don't use rounded corners on UI elements — screenshot shows strictly sharp, rectangular geometry.
- ❌ Don't clutter the layout with multiple columns — screenshot shows a strict, single-column structure.
- ❌ Don't use busy navigation bars — screenshot shows a single, rotated corner element for contact.

The system deliberately avoids busy navigation, complex UI components, and multi-column layouts, committing fully to its stark, typographic-led identity.

## System Prompt (paste into AI tool)

```
A minimalist portfolio for a photography studio, defined by massive, stark typography and bold, solid background colors. The primary palette uses a vibrant orange (#FD9B65) and deep maroon (#6F2C30), anchored by solid black (#000000) for text and borders. Typography features a humanist-sans display font scaled to extreme sizes with tight line heights and negative tracking. Critical constraints: maintain a strictly single-column, full-bleed layout; avoid any rounded corners or drop shadows; ensure hero text remains at an extreme scale to preserve the site's confident, editorial identity.
```