CURATED · OPEN · FREE

David Hckh

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

PortfolioPlayful3DDeveloperWarm

↓ Download design system (12 MB)Open in OpenDesign

Visit: https://david-hckh.com

📦 Browse pack contents →

Identity DNA

DeveloperPortfolioPlayful3DPersonal

A cozy, illustrated developer workspace brought to life

Color

#FF8400Accent

#2D2A24Ink

#5F5646Ink soft

#F5EFE6BG

#E9DED0BG soft

rgba(45, 42, 36, 0.1)Line

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

Typography

humanist-sans · monospace

display72px · 800
h248px · 800
body16px · 400

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

Spacing

4px

8px

12px

16px

18px

24px

32px

36px

48px

64px

96px

Consistent 4px grid with generous whitespace around major sections

Surfaces

sm · 12px

md · 16px

lg · 24px

pill · 100px

2px solid ink color for outlines, 4px solid accent for badges

0 4px 24px rgba(45, 42, 36, 0.08) · 0 8px 32px rgba(45, 42, 36, 0.12)

Layout

1200container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

100msmicro

200mssmall

400msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth background-color and transform transitions on hover · Ease-in-out transitions for color and opacity changes

Subtle background-color and transform changes on interactive elements · Immediate response with micro transitions

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

Voice & Don'ts

Tone Friendly, approachable, and professional
Headlines Large, bold, lowercase-leaning humanist sans-serif with personality
CTAs Uppercase pill-shaped buttons with high contrast orange

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
Avoid: Don't use serif fonts
Avoid: Don't use cold or clinical blue as primary accent
Avoid: Don't use sharp square corners
Avoid: Don't use thin or light font weights for headings
Avoid: Don't use dark mode backgrounds
Avoid: Don't use cramped spacing between sections

Inside the pack — real screenshots

David Hckh — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko