# David Hckh · Design system migration spec

> Source: https://david-hckh.com  ·  Curated by OpenDesign  ·  en

> Excellent example of using 3D illustration and warm tones to humanize a developer portfolio while maintaining professional polish

## 1. Identity DNA

The design system for David Heckhoff's portfolio is built around the analogy of a cozy, illustrated developer workspace brought to life. It translates the warmth and personality of a personal creative studio into a digital format, balancing technical credibility with playful character. This is a system that feels both constructed and handcrafted, like a well-organized desk with a few whimsical toys.

**One-liner:** A playful 3D-illustrated personal portfolio for a web developer
**Keywords:** Developer · Portfolio · Playful · 3D · Personal
**Analogy:** A cozy, illustrated developer workspace brought to life

## 2. Color

The color palette establishes a friendly foundation with a warm cream base, providing a soft, approachable canvas. Dark charcoal ink supplies the necessary contrast for readability and structure, while a vibrant orange is reserved for primary actions and accents, creating clear visual hierarchy and points of interest.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F5EFE6` | main background |
| `--bg-soft` | `#E9DED0` | card background |
| `--ink` | `#2D2A24` | body text |
| `--ink-soft` | `#5F5646` | secondary text |
| `--muted` | `#5F5646` | placeholder |
| `--accent` | `#FF8400` | single accent |
| `--line` | `rgba(45, 42, 36, 0.1)` | divider |

**Color principle:** Warm cream base with dark ink for contrast and vibrant orange for primary actions

The principle is warmth without sentimentality, using contrast and a single vibrant accent to guide the eye and define interactive elements.

## 3. Typography

Typography relies on the Urbanist humanist sans-serif to convey a modern, approachable voice that remains highly legible. The system uses a bold weight exclusively for headings to create a strong, confident hierarchy, while uppercase treatments are reserved for navigation and labels to provide functional clarity.

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 72px | 1.1 | 800 | -1px | Hero heading |
| h2 | 48px | 1.15 | 800 | -0.5px | Section headings |
| body | 16px | 1.875 | 400 | 0.32px | Body text and descriptions |

**Type rules:**
- Use uppercase for navigation and badge labels
- Maintain tight negative letter-spacing for large display text
- Use bold weight for headings to create strong visual hierarchy

## 4. Spacing

Spacing follows a consistent 4px grid, establishing a reliable rhythm across all components. Generous whitespace around major sections is a core tenet, preventing the layout from feeling cramped and allowing each element room to breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 18 / 24 / 32 / 36 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px grid with generous whitespace around major sections

## 5. Surfaces

Surfaces are defined by subtle, warm-toned shadows that suggest gentle depth rather than a stark digital plane. Borders are used deliberately, with a 2px ink line for general outlines and a thicker 4px accent border for badge elements, adding a tactile, illustrative quality.

- **Radius:** sm 12px · md 16px · lg 24px · pill 100px
- **Shadows:**
  - 0 4px 24px rgba(45, 42, 36, 0.08)
  - 0 8px 32px rgba(45, 42, 36, 0.12)
- **Borders:** 2px solid ink color for outlines, 4px solid accent for badges

## 6. Layout

The layout skeleton begins with a full-width hero section, splitting a large, bold typographic heading on the left with a 3D illustration on the right. Subsequent content flows into a spacious two-column grid for project showcases, maintaining generous padding between all sections.

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

**Skeleton:** Full-width hero with split layout, 2-column grid for projects

## 7. Motion & Interaction

Motion philosophy favors smooth, understated transitions that acknowledge user interaction without demanding attention. Fast 100-200ms ease-in-out transitions for color, transform, and opacity changes create immediate, satisfying feedback across interactive elements.

- **Durations:** micro 100ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth background-color and transform transitions on hover
  - Ease-in-out transitions for color and opacity changes

- **Hover:** Subtle background-color and transform changes on interactive elements
- **Click:** Immediate response with micro transitions
- **Transition:** Fast 0.1s ease-in-out for color and background changes, 0.2s for transform and opacity
- **Keyboard:** Standard focus states implied by cursor pointer on 123 elements

## 8. Voice & Don'ts

The editorial voice is friendly, approachable, and professional, mirroring the tone of a talented peer sharing their work. Headlines are large and bold with a humanist character, while calls to action use high-contrast, uppercase styling for clear direction.

- **Tone:** Friendly, approachable, and professional
- **Headline style:** Large, bold, lowercase-leaning humanist sans-serif with personality
- **CTA style:** Uppercase pill-shaped buttons with high contrast orange
- **Avoid:** Don't use serif fonts / Don't use cold or clinical blue as primary accent / Don't use sharp square corners / Don't use thin or light font weights for headings / Don't use dark mode backgrounds / Don't use cramped spacing between sections

### Don'ts
- ❌ Don't use thin font weights — screenshot shows weight 800 for headings
- ❌ Don't use dark backgrounds — screenshot shows warm cream #F5EFE6 background
- ❌ Don't use square corners — screenshot shows border-radius up to 100px for pills
- ❌ Don't use blue as accent — screenshot shows orange #FF8400 as primary accent
- ❌ Don't use serif typography — screenshot uses Urbanist humanist sans-serif exclusively
- ❌ Don't use minimal whitespace — screenshot shows generous padding and gaps between sections

The system deliberately avoids dark mode, serif typography, sharp corners, thin heading weights, and clinical blue accents to preserve its warm, personal, and playful identity.

## System Prompt (paste into AI tool)

```
A playful personal portfolio site for web developer David Heckhoff. Uses warm cream background (#F5EFE6) with dark ink (#2D2A24) and vibrant orange (#FF8400) accent. Typography uses Urbanist humanist-sans-serif with bold 800 weight for display headings at 72px. Features 3D illustrated hero scene with rounded pill-shaped buttons and tilted badge chips. Layout is spacious with generous whitespace. Don't use dark mode, don't use serif fonts, don't use sharp corners, don't use thin weights for headings, don't use blue accents, don't use cramped spacing.
```