CURATED · OPEN · FREE

Jhey Tompkins

A developer portfolio focused on UI experiments and interaction design.

portfoliocss

↓ Download design system (1 MB)Open in OpenDesign

Visit: https://jhey.dev

📦 Browse pack contents →

Identity DNA

PersonalDeveloperCreativeInterface

A clean, typographic personal portfolio for a design engineer.

Color

#EB5757Accent

#000000Ink

#666666Ink soft

#FFFFFFBG

rgba(255,255,255,1)Line

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

Typography

didone-serif · humanist-sans · monospaced

display58px · 400
subtitle14px · 600
body16px · 300

All-caps for meta text with tight tracking · Serif for primary display, sans for body

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Generous vertical padding between major sections.

Surfaces

sm · 6px

md · 8px

lg · 12px

pill · 999px

No visible structural borders.

Layout

1280container

1columns

24pxgutter

768 / 1024breakpoints

Centered single-column layout with generous whitespace.

Motion & Interaction

220msmicro

400mssmall

800msmedium

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

All elements have a transition property defined.

Pointer cursor on interactive elements. · Pointer cursor on interactive elements.

Components

button No visible buttons.
card No visible cards.
chip No visible chips.
input No visible inputs.
hero Large serif headline followed by monospaced subtitle and sans-serif paragraphs.

Voice & Don'ts

Tone Professional, approachable, and slightly playful.
Headlines Large, elegant serif.
CTAs Simple text links with arrow.

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.
Avoid: Overly corporate jargon
Avoid: Aggressive sales language
Avoid: Cluttered layouts

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

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.

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