---
name: David Hckh
description: "Excellent example of using 3D illustration and warm tones to humanize a developer portfolio while maintaining professional polish"
version: alpha

colors:
  background: "#F5EFE6"
  primary: "#2D2A24"
  secondary: "#5F5646"
  tertiary: "#FF8400"
  neutral: "#5F5646"
  bg-soft: "#E9DED0"
  line: "rgba(45, 42, 36, 0.1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 72px
    lineHeight: 1.1
    fontWeight: 800
    letterSpacing: "-1px"
  h2:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.15
    fontWeight: 800
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.875
    fontWeight: 400
    letterSpacing: "0.32px"

rounded:
  sm: 12px
  md: 16px
  lg: 24px
  pill: 100px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 18px
  2xl: 24px
  3xl: 32px

---

## Overview

A playful 3D-illustrated personal portfolio for a web developer

*A cozy, illustrated developer workspace brought to life*

## Colors

Warm cream base with dark ink for contrast and vibrant orange for primary actions

- **Background (`#F5EFE6`)** — uses `bg` token
- **Primary text (`#2D2A24`)** — uses `ink` token
- **Secondary text (`#5F5646`)** — uses `ink-soft` token
- **Accent (`#FF8400`)** — uses `accent` token
- **Muted (`#5F5646`)** — uses `muted` token
- **Borders (`rgba(45, 42, 36, 0.1)`)** — uses `line` token

## Typography

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

- 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

## Layout

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

*Rhythm:* Consistent 4px grid with generous whitespace around major sections

## Elevation & Depth

- 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

## Shapes

- `sm`: 12px
- `md`: 16px
- `lg`: 24px
- `pill`: 100px

## Components

- **button:** Pill-shaped with 100px border-radius, orange background with white text
- **card:** 24px border-radius with imagery, slightly rounded corners
- **chip:** Tilted 4px-bordered badge labels with uppercase text
- **input:** Not visible in screenshot
- **hero:** Split layout with large bold heading left and 3D illustration right

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```