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

# Patrick Miller · Design System

> Bold typography, quiet grids, and image-led storytelling.

**Theme:** light · **Industry:** portfolio · **Source:** https://patrickmiller.se/ · **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._

Patrick Miller’s portfolio pairs oversized typographic gestures with a long sequence of image-led editorial galleries. A restrained grid and recurring solid-color panels let the photographs and changing section palettes carry the visual variety.

## North star

Let oversized editorial typography introduce the work, then keep gallery framing flat and quiet so photography and broad color fields lead.

## Overview

The page opens with a vivid orange field and enormous black custom lettering, establishing a confident editorial identity before transitioning into a long, modular portfolio. White canvas is the constant; muted blue-gray, wine red, pale pink, cream, and deep blue appear as broad section or gallery-panel colors. Treat these as deliberate framing for the work, not as a conventional interface palette. MlrStandard carries the small captions and navigation, while a very light system sans handles the large display-adjacent interface labels and arrow controls. Galleries are assembled from unequal and equal-width image areas, with small counters and directional arrows kept near the edges. The imagery itself supplies much of the page’s color and texture. Sections remain flat and spacious, with sharp corners and no visible shadow system; the effect comes from scale, contrast, image selection, and the rhythm of changing color blocks.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Ink | `#000000` | `--color-gallery-ink` | neutral | Primary lettering, navigation, gallery captions, and dark image-panel backgrounds. |
| Open Canvas | `#ffffff` | `--color-open-canvas` | surface | Default page canvas and the light panels surrounding gallery imagery. |
| Mist Blue | `#a4b1b3` | `--color-mist-blue` | brand | Broad blue-gray gallery and section panels that frame image collections. |
| Studio Wine | `#6f2c30` | `--color-studio-wine` | brand | Deep red gallery panels, paired with light controls and imagery. |
| Signal Apricot | `#fd9b65` | `--color-signal-apricot` | brand | Dominant opening hero field; also appears as a contrasting gallery control accent. |
| Blush Paper | `#e9d1c7` | `--color-blush-paper` | surface | Soft pink gallery panel, visible behind and beside fashion photography. |
| Pale Custard | `#f8f5d1` | `--color-pale-custard` | surface | Light cream section band used as a quiet background for a gallery. |
| Deep Cobalt | `#004b82` | `--color-deep-cobalt` | accent | Blue gallery block, a flat color field rather than a general link color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Open Canvas) · `--color-surface` → `#a4b1b3` (Mist Blue) · `--color-surface-2` → `#000000` (Gallery Ink) · `--color-surface-3` → `#6f2c30` (Studio Wine) · `--color-surface-4` → `#e9d1c7` (Blush Paper) · `--color-text` → `#000000` (Gallery Ink) · `--color-text-muted` → `#ffffff` (Open Canvas) · `--color-accent` → `#6f2c30` (Studio Wine) · `--color-accent-2` → `#fd9b65` (Signal Apricot) · `--color-accent-3` → `#004b82` (Deep Cobalt)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#a4b1b3` | 9.52:1 | AAA |
| `#000000` | `#6f2c30` | 2.08:1 | fail |
| `#ffffff` | `#a4b1b3` | 2.21:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#6f2c30` | 10.1:1 | AAA |
| `#6f2c30` | `#ffffff` | 10.1:1 | AAA |
| `#6f2c30` | `#a4b1b3` | 4.58:1 | AA |
| `#6f2c30` | `#000000` | 2.08:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| MlrStandard | `--font-body` | webfont | 400 | Custom display lettering, body copy, gallery captions, and navigation. | Inter |
| -apple-system | `--font-display` | system | 200 | Light headings and oversized arrow controls. | Inter |

- **MlrStandard:** Regular weight; compact tracking for body and navigation, with very large custom lettering as the visual signature.
- **-apple-system:** Use an extra-light weight where available; keep labels restrained and avoid uppercase styling.

### Type scale — Custom (ratio ≈ 4.548, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 331px | 400 | 0.8 | -0.02em | — | MlrStandard | Oversized homepage signature lettering and the downward browsing cue. |
| h1 | 32px | 200 | normal | 0 | — | -apple-system | Light-weight page or section heading labels. |
| body | 16px | 400 | normal | 0.01em | — | MlrStandard | Gallery captions and supporting copy. |
| button | 32px | 200 | normal | 0 | — | -apple-system | Large, minimal previous and next arrow controls. |
| nav | 16px | 400 | 1.3 | 0.02em | — | MlrStandard | Compact navigation and gallery labels. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 16, 32, 48, 72 px.
- Section rhythm 72px · element gap — · card padding — · max content width —.

The homepage uses a full-width sequence of tall, image-led sections with no measured maximum content width. The opening signature sits toward the left, while a small contact/studio control occupies the upper-right corner. Gallery regions alternate between multi-column arrangements and simpler full-panel color fields; image counts and column counts vary by section. Keep alignment deliberate but not rigidly uniform, with captions and counters near gallery edges. The measured spacing scale is 16, 32, 48, and 72, with a 72 section gap and comfortable overall density.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The visual system is flat: measured components have square corners, no shadows, and no visible border color. Separate gallery areas through hard-edged color changes, whitespace, and image placement rather than cards floating above the canvas. Small circular-looking controls in the screenshots should not be used to infer a global radius system; preserve the measured square treatment for general components.

## Imagery

Photography is the core content: fashion portraits, editorial still lifes, flowers, and selected portraits appear in gallery sequences. Use real photographic imagery with varied crops and occasional full-height or paired panel framing. Some image areas in the supplied page views appear blank, so do not replace the portfolio’s photographic intent with decorative illustration. Let images retain their own color and texture against quiet, flat surroundings.

## Components

### Opening signature

A full-bleed apricot hero with enormous black custom lettering and a downward arrow that invites scrolling.

### Contact / Studio control

A small, light-colored contact label sits near the upper-right of the opening area.

### Editorial gallery

Photographic work arranged in variable column counts, occasionally paired with a broad colored or white panel.

### Gallery counter

Small current/total notation such as 1 / 5, positioned close to the lower edge of a gallery.

### Gallery navigation

Minimal previous and next arrow controls; measured arrow glyphs use light system sans styling.

### Section color field

Flat mist blue, wine, cream, blush, or deep blue panels alternate with white and black areas.

### Measured component styles

- **Primary button** (“→”): transparent background · text #ffffff · radius 0px · padding 0px · 200 32px -apple-system
- **Card** (“1 / 5 → ←”): background #a4b1b3 · text #000000 · radius 0px · padding 0px · 400 16px MlrStandard
- **Navigation item** (“Contact ⤷ Studio”): transparent background · text #000000 · radius 0px · padding 0px 72px · 400 16px MlrStandard

## Do

- Use Open Canvas as the default gallery ground.
- Reserve Signal Apricot for a confident opening or deliberate accent.
- Make the opening typography dramatically larger than supporting labels.
- Use photography as the primary content, not decorative UI imagery.
- Vary gallery column counts to suit the image sequence.
- Keep counters and arrow controls small and unobtrusive.

## Don't

- Do not add shadows, gradients, or decorative borders.
- Do not introduce colors outside the measured palette.
- Do not force every section into an identical grid.
- Do not treat illustration colors as global interface colors.
- Do not make captions compete with the photographs.
- Do not add rounded-card styling across the page.

## Agent prompt

Build a new photographer portfolio page in Patrick Miller’s editorial style. Start with a full-bleed Signal Apricot (#fd9b65) hero and exceptionally large Gallery Ink (#000000) custom-feeling lettering; keep contact navigation small and tucked toward the upper-right. Continue into a long sequence of image-led galleries on Open Canvas (#ffffff), mixing variable-column photography with flat panels in Mist Blue (#a4b1b3), Studio Wine (#6f2c30), Blush Paper (#e9d1c7), Pale Custard (#f8f5d1), and Deep Cobalt (#004b82). Use MlrStandard or a close sans substitute for captions and navigation, and a light system sans for arrow controls. Keep counters and arrows discreet, edges sharp, and surfaces unshadowed. Let photographs and broad color blocks create the rhythm; avoid generic cards, gradients, and ornamental UI.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed apricot opening field with oversized left-aligned signature lettering and a small upper-right contact control. | Scroll cue | Oversized display type, Down arrow, Compact contact label |
| 2 | gallery | Four-column gallery region with a featured portrait beside a light editorial panel. | Previous/next controls, Image counter | Photography, Blush panel, Small section label |
| 3 | gallery | Six-column gallery section presented as a broad mist-blue field in the supplied overview. | Previous/next controls, Image counter | Flat color field, Edge-aligned controls |
| 4 | gallery | Two-part horizontal split with black and white fields. | Image-led transition | Hard color split, Minimal framing |
| 5 | gallery | Four-column gallery section on a broad pale cream field. | Previous/next controls, Image counter | Cream color field, Small arrows |
| 6 | gallery | Four-column gallery arrangement with light and deep blue areas. | Previous/next controls, Image counter | White panel, Deep blue panel |
| 7 | gallery | Seven-column gallery split between black and mist-blue fields. | Previous/next controls, Image counter | Split color panels, Edge controls |
| 8 | gallery | Single-column, full-width gallery section with a white canvas. | Image-led transition | White space, Minimal framing |
| 9 | gallery | Eight-column gallery split between black and wine-red fields. | Previous/next controls, Image counter | Black and wine split, Contrasting arrow accent |
| 10 | gallery | Seven-column gallery section on a broad mist-blue field. | Previous/next controls, Image counter | Flat blue-gray panel, Compact counter |
| 11 | gallery | Twelve-column gallery with white and blush-pink image panels. | Previous/next controls, Image counter | Section label, Paired color panels |
| 12 | gallery | Eleven-column gallery with black and white image areas. | Previous/next controls, Image counter | Section label, High-contrast panels |
| 13 | gallery | Six-column gallery on a broad wine-red field. | Previous/next controls, Image counter | Wine-red color field, Contrasting arrows |
| 14 | gallery | Five-column closing section with white and deep blue panels. | Previous/next controls, Image counter | White and blue split, Minimal controls |

## Source CSS custom properties (selected)

```css
--color-black: #000;
--color-white: #fff;
--color-1: #E9D1C7;
--color-2: #4C564B;
--color-3: #A4B1B3;
--color-4: #004B82;
--color-5: #6F2C30;
--color-6: #FD9B65;
--color-7: #F8F5D1;
--color-8: #9AC8AE;
--color-9: #302220;
--serif-font: 'Moa';
```

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