# Davejreid · Design system migration spec

> Source: https://www.davejreid.com  ·  Curated by OpenDesign  ·  en

> This site is a strong example of a refined, editorial portfolio that uses typography and whitespace effectively to create a premium feel without complex UI.

## 1. Identity DNA

This system operates like a clean, high-end magazine spread, where the architecture serves the content rather than competing with it. Every decision in the design DNA—from the strict neutral palette to the generous whitespace—is in service of showcasing portfolio imagery and editorial typography with clarity. It is a framework of restraint, built to let the work itself occupy the foreground.

**One-liner:** A refined portfolio for a UI/UX and creative director, emphasizing typography and curated imagery.
**Keywords:** portfolio · editorial · typographic · curated · minimal
**Analogy:** A clean, high-end magazine spread showcasing design work.

## 2. Color

The color system is deliberately sparse, built on a two-tone foundation of off-white background and dark charcoal ink. This high-contrast neutral canvas exists solely to provide a clean stage for the photography and typography it supports.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F5F6F7` | main background |
| `--ink` | `#222222` | body text |
| `--muted` | `#999999` | placeholder |
| `--line` | `rgba(34,34,34,0.1)` | divider |

**Color principle:** High-contrast minimalism with a neutral canvas that lets portfolio imagery pop.

The core principle is that color is not an expressive tool here, but a functional backdrop that maximizes legibility and lets the curated imagery provide all necessary visual variation.

## 3. Typography

The typographic voice is split between two clear roles: an old-style-serif carries the editorial weight of headlines and narrative, while a humanist-sans handles the functional, quieter duties of UI text and introductions. This pairing establishes a hierarchy that feels both classical and contemporary, anchoring the site's premium, curated tone.

- **Display:** old-style-serif
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 16px | 1.25 | 400 | -0.02em | Introductory bio and navigation text. |

**Type rules:**
- Use old-style-serif for primary narrative elements and headers.
- Use humanist-sans for UI elements and secondary text.

## 4. Spacing

Rhythm is established through generous vertical whitespace between major sections, allowing each block of content to breathe and be considered independently.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 80 / 96 px
- **Rhythm:** generous vertical whitespace between major sections

## 5. Surfaces

Surfaces are flat and borderless, with the design rejecting shadows or card-like containers. Depth is implied only through the scale and placement of full-bleed imagery against the plain background.

- **Radius:** sm 6px · md 6px · lg 6px · pill 999px
- **Borders:** none or extremely subtle

## 6. Layout

The skeleton is a generous single-column flow, punctuated by large, full-bleed or wide photographic blocks. Significant vertical spacing between these major sections dictates the page's pacing and creates a deliberate, editorial reading experience.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Large, full-bleed or wide imagery separated by generous vertical whitespace.

## 7. Motion & Interaction

Motion is treated as a subtle punctuation, not a narrative element. All transitions use a slow, 0.6-second duration for effects like a simple fade-in on hover, creating a sense of deliberate and elegant change.

- **Durations:** micro 220ms · small 400ms · medium 600ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - simple fade-in on hover or transition

- **Hover:** Subtle opacity change or simple transition.
- **Click:** Immediate navigation.
- **Transition:** All elements use 'all' transition with a 0.6s duration.
- **Keyboard:** Standard tab navigation.

## 8. Voice & Don'ts

The editorial voice is professional, refined, and understated, using a conversational yet formal serif for headlines. Communication is direct, relying on simple text links with arrow indicators rather than prominent, branded call-to-action buttons.

- **Tone:** Professional, refined, and understated.
- **Headline style:** Serif, conversational but formal.
- **CTA style:** Simple text links with arrow indicators.
- **Avoid:** loud calls to action / heavy branding elements / cluttered layouts

### Don'ts
- ❌ don't use bold, sans-serif headlines — screenshot shows a refined old-style serif instead
- ❌ don't use bright, saturated accent colors — screenshot shows a strictly neutral palette of grays
- ❌ don't use heavy shadows or cards — screenshot shows flat imagery against a plain background
- ❌ don't crowd elements together — screenshot shows significant vertical whitespace between sections
- ❌ don't use complex navigation — screenshot shows a minimal set of text links with arrows
- ❌ don't use modern geometric sans-serif for primary text — screenshot shows humanist-sans and serif fonts

What this system deliberately omits—bright accent colors, heavy branding, complex navigation, and cluttered layouts—is as defining as what it includes.

## System Prompt (paste into AI tool)

```
This is a refined, editorial portfolio website for a UI/UX and creative director based in Hong Kong. The design DNA is defined by high-contrast minimalism, using a neutral off-white (#F5F6F7) background and dark charcoal (#222222) ink. Typography is the focal point, pairing an old-style-serif for display text with a humanist-sans for body elements. Critical donts include: do not use bright accent colors, do not use heavy shadows or modern geometric sans-serifs, and do not crowd elements with insufficient whitespace.
```