# Tparkes · Design system migration spec

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

> This site is a great example of how to use typography and whitespace to create a professional, high-impact personal portfolio without relying on color.

## 1. Identity DNA

The Tparkes portfolio functions like a well-edited exhibition space: its structure is immediately legible, the content is given room to breathe, and the design recedes to foreground the work itself. This is the digital design lead's studio made architectural—clean, professional, and defined by bold typographic presence.

**One-liner:** A personal digital design lead portfolio showcasing brand and website work.
**Keywords:** digital design lead · portfolio · Tom Parkes · London
**Analogy:** A clean, professional digital portfolio with bold, expressive typography.

## 2. Color

Color here is a study in restraint, employing a high-contrast monochrome palette of white, dark grey, and light grey. The system relies on typographic scale and whitespace for emphasis rather than chromatic accents.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#333333` | body text |
| `--muted` | `#A7A7A7` | placeholder |
| `--line` | `rgba(51, 51, 51, 1)` | divider |

**Color principle:** High-contrast monochrome palette relying on typographic scale rather than color accents.

The principle is clarity through contrast, not decoration.

## 3. Typography

The typographic voice is strictly sans-serif, using massive scale for immediate visual authority. The hero text dominates the viewport, setting a bold, confident tone for the entire portfolio.

- **Display:** sans-serif
- **Body:** sans-serif

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 86px | 1.0 | 600 | -3px | Hero headline text |

## 4. Spacing

Generous whitespace and padding establish a deliberate rhythm, creating space for the large-scale typography to occupy.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 20 / 24 / 32 / 48 / 120 px
- **Rhythm:** Generous whitespace and padding emphasize the large-scale typography.

## 5. Surfaces

Surfaces are intentionally flat, avoiding shadows to maintain visual simplicity. Subtle borders in the primary text color provide just enough definition for cards and interactive elements.

- **Radius:** sm 8px · md 12px · lg 16px · pill 999px
- **Borders:** Subtle borders using primary text color, often used on cards or UI elements.

## 6. Layout

The layout skeleton is a spacious, single-column composition anchored by a full-width hero section. A persistent top navigation bar provides orientation without intruding on the central showcase.

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

**Skeleton:** Full-width hero section with left-aligned text and a top navigation bar.

## 7. Motion & Interaction

Motion is applied with surgical precision, using scroll-triggered reveals to introduce content sequentially. The philosophy is functional enhancement, ensuring animations support focus rather than compete with it.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.46, 0.45, 0.94)`
- **Patterns:**
  - Scroll-triggered reveals for project cards

- **Hover:** Subtle opacity changes or cursor pointer changes on interactive elements.
- **Click:** Direct navigation or smooth scroll to project sections.
- **Transition:** Smooth transitions for page elements and scroll-linked animations.
- **Keyboard:** Standard browser focus states.

## 8. Voice & Don'ts

The editorial voice is professional, confident, and direct, matched by large, bold sans-serif headlines in muted grey. Calls to action are understated text links, maintaining the portfolio's quiet authority.

- **Tone:** Professional, confident, and direct.
- **Headline style:** Large, bold, sans-serif statements using muted grey with black icons.
- **CTA style:** Simple, understated text links like 'Explore my work'.
- **Avoid:** Avoiding loud colors / Excessive decoration / Overly complex navigation

### Don'ts
- ❌ Don't use colorful gradients — the screenshot shows a strict monochrome palette.
- ❌ Don't use serif fonts — the typography is strictly sans-serif.
- ❌ Don't hide navigation — the hamburger menu is prominent on mobile.
- ❌ Don't use small, cramped text — the hero type is massive (86px).
- ❌ Don't use busy backgrounds — the background is clean white.
- ❌ Don't use heavy shadows — surfaces are flat and clean.

The system deliberately forgoes colorful gradients, serif fonts, and excessive decoration, defining itself by what it omits.

## System Prompt (paste into AI tool)

```
This is a personal digital design portfolio with a clean, monochrome aesthetic. It uses a large sans-serif display font (86px) for bold statements, accented by small, high-contrast black icons. The primary colors are white (#FFFFFF) for the background, dark grey (#333333) for ink, and light grey (#A7A7A7) for muted elements. Key hex colors include #333333, #A7A7A7, and #FFFFFF. Critical constraints: Never use colorful accents, serif fonts, or complex UI patterns. The layout is spacious, relying on generous whitespace and a single-column container. Navigation is minimal, focusing on the work showcase.
```