# Jhey Tompkins · Design system migration spec

> Source: https://jhey.dev  ·  Curated by OpenDesign  ·  en

> A refined developer portfolio that uses strong typography and whitespace to create a professional yet approachable personal brand.

## 1. Identity DNA

This design system is a clean, typographic personal portfolio for a design engineer. It functions like a well-constructed monograph, where content and whitespace are the primary structural elements, not decoration.

**One-liner:** A developer portfolio focused on UI experiments and interaction design.
**Keywords:** Personal · Developer · Creative · Interface
**Analogy:** A clean, typographic personal portfolio for a design engineer.

## 2. Color

The palette operates on a principle of maximum contrast: a high-contrast black-and-white foundation is punctuated by a single warm red accent. This accent is reserved exclusively for interactive emphasis, creating clear affordances within the stark field.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#666666` | secondary text |
| `--muted` | `#666666` | placeholder |
| `--accent` | `#EB5757` | single accent |
| `--line` | `rgba(255,255,255,1)` | divider |

**Color principle:** A high-contrast black-and-white foundation with a warm accent for interactive emphasis.

The system’s core rule is restraint: the accent is a signal, not a theme.

## 3. Typography

Typography establishes a clear hierarchy through category contrast. A **didone-serif** form provides weight and elegance for primary display, while a humanist-sans handles body text with clarity, and a monospaced face is dedicated to meta information and labels.

- **Display:** didone-serif
- **Body:** humanist-sans
- **Mono:** monospaced

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 58px | 1.0 | 400 | -1px | Hero headline |
| subtitle | 14px | 1.4 | 600 | 0.1em | Author role and footer details |
| body | 16px | 1.5 | 300 | 0 | Main narrative text |

**Type rules:**
- All-caps for meta text with tight tracking
- Serif for primary display, sans for body

## 4. Spacing

Vertical rhythm is governed by generous padding between major sections, creating a deliberate, unhurried pace down the page.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical padding between major sections.

## 5. Surfaces

Depth is communicated through absence rather than effect. The specification omits shadows and visible structural borders, relying on typographic weight and whitespace to delineate content regions.

- **Radius:** sm 6px · md 8px · lg 12px · pill 999px
- **Borders:** No visible structural borders.

## 6. Layout

The layout skeleton is a centered single-column form with constrained paragraph width. This narrow measure ensures legibility and focuses the reader’s attention on the linear narrative of the content.

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

**Skeleton:** Centered single-column layout with generous whitespace.

## 7. Motion & Interaction

Motion is applied uniformly but subtly; every element carries a defined transition property for state changes. The philosophy is consistent feedback, not spectacle—a smooth, predictable response to interaction.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - All elements have a transition property defined.

- **Hover:** Pointer cursor on interactive elements.
- **Click:** Pointer cursor on interactive elements.
- **Transition:** All elements transition on state change.
- **Keyboard:** Standard browser focus behavior.

## 8. Voice & Don'ts

The editorial voice is professional and approachable, with a slightly playful undertone. It avoids corporate jargon and aggressive sales language, mirroring the clarity of the visual presentation.

- **Tone:** Professional, approachable, and slightly playful.
- **Headline style:** Large, elegant serif.
- **CTA style:** Simple text links with arrow.
- **Avoid:** Overly corporate jargon / Aggressive sales language / Cluttered layouts

### Don'ts
- ❌ Don't use a dark background — screenshot shows a clean white background instead.
- ❌ Don't use a sans-serif for the hero headline — screenshot shows a serif headline instead.
- ❌ Don't use blue for primary links — screenshot shows a warm red/orange accent instead.
- ❌ Don't use a single-column full-width layout — screenshot shows a constrained paragraph width instead.
- ❌ Don't use bold weights for body text — screenshot shows a light weight instead.
- ❌ Don't use lowercase for meta labels — screenshot shows all-caps with tracking instead.

The system deliberately forgoes dark mode, complex component libraries, and decorative elements to preserve its typographic and spatial integrity.

## System Prompt (paste into AI tool)

```
This is a personal portfolio site for a design engineer, characterized by a clean, single-column layout on a white background. The design DNA is built on a high-contrast foundation using a dark ink (#000000) on white (#FFFFFF), with a warm red accent (#EB5757) for interactive highlights. The typography features a didone-serif display font for the main hero, complemented by a humanist-sans for body text and a monospaced font for labels and meta information. Key critical design constraints include: maintaining generous whitespace and a constrained paragraph width, using serif for primary display text, and ensuring meta labels are presented in all-caps with tight tracking. Avoid dark modes, blue accents, or overly complex multi-column layouts.
```
