---
name: Jhey Tompkins
description: "A refined developer portfolio that uses strong typography and whitespace to create a professional yet approachable personal brand."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#666666"
  tertiary: "#EB5757"
  neutral: "#666666"
  line: "rgba(255,255,255,1)"

typography:
  display:
    fontFamily: didone-serif
    fontSize: 58px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1px"
  subtitle:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 600
    letterSpacing: "0.1em"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 300
    letterSpacing: "0"

rounded:
  sm: 6px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A developer portfolio focused on UI experiments and interaction design.

*A clean, typographic personal portfolio for a design engineer.*

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#666666`)** — uses `ink-soft` token
- **Accent (`#EB5757`)** — uses `accent` token
- **Muted (`#666666`)** — uses `muted` token
- **Borders (`rgba(255,255,255,1)`)** — uses `line` token

## Typography

- **Display:** didone-serif
- **Body:** humanist-sans
- **Mono:** monospaced

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

## Layout

Centered single-column layout with generous whitespace.

*Rhythm:* Generous vertical padding between major sections.

## Elevation & Depth

- Borders: No visible structural borders.

## Shapes

- `sm`: 6px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

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

## Do's and Don'ts

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

---

## System Prompt (paste into AI agent)

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