---
name: "David Hckh"
description: "运用3D插画与暖色调使开发者作品集更具人情味，同时保持专业质感的绝佳范例"
version: alpha
specification_status: not-validated
license_status: unknown

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

面向网页开发者的趣味3D插画个人作品集

*一个温馨、插画风格的开发者工作空间*

## Colors

温暖奶油色基底搭配深墨色形成对比，活力橙色用于主要操作

- **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

- 导航和徽章标签使用大写形式
- 大号展示文字保持紧凑的负字间距
- 标题使用粗体以建立清晰的视觉层级

## Layout

全宽主视觉区域采用分割布局，项目使用2栏网格

*Rhythm:* 统一4px网格系统，主要区域间保持充足留白

## Elevation & Depth

- 0 4px 24px rgba(45, 42, 36, 0.08)
- 0 8px 32px rgba(45, 42, 36, 0.12)
- Borders: 2px实线墨色描边，4px实线橙色用于徽章

## Shapes

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

## Components

- **button:** 药丸造型，100px圆角半径，橙色背景配白色文字
- **card:** 24px圆角半径，带有图像，略带圆角
- **chip:** 倾斜4px边框的徽章标签，大写文字
- **input:** 截图中不可见
- **hero:** 分割布局，左侧大号粗体标题，右侧3D插画

## Do's and Don'ts

**Don't:**
- 不要使用细体字重——截图显示标题使用800字重
- 不要使用深色背景——截图显示温暖的奶油色#F5EFE6背景
- 不要使用直角——截图显示药丸形状圆角半径达100px
- 不要使用蓝色强调——截图显示活力橙#FF8400作为主强调色
- 不要使用衬线字体——截图仅使用Urbanist人文无衬线字体
- 不要使用最小化留白——截图显示充足的内边距与区域间距

---

## System Prompt (paste into AI agent)

```
面向网页开发者David Heckhoff的趣味个人作品集网站。使用温暖奶油色背景(#F5EFE6)搭配深墨色(#2D2A24)与活力橙色(#FF8400)点缀。字体使用Urbanist人文无衬线字体，展示标题采用72px粗体800字重。特色包括3D插画主视觉场景、圆角药丸形按钮与倾斜徽章标签。布局宽敞，留白充足。不要使用深色模式，不要使用衬线字体，不要使用尖锐直角，不要使用细体字重作为标题，不要使用蓝色强调，不要使用局促间距。
```