---
name: Henry Codes
description: "This site is a prime example of bold, typographic-driven portfolio design that prioritizes personal expression over conventional UI patterns."
version: alpha

colors:
  background: "#FAFAFA"
  primary: "#2A2722"
  neutral: "#666666"
  line: "rgba(42,39,34,0.1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 77px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 0px
  md: 12px
  lg: 12px
  pill: 999px

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

---

## Overview

A bold, typographically-driven creative portfolio for a Denver-based web developer and designer.

*A bold, experimental creative portfolio that feels like a mix of a high-fashion editorial and an underground zine.*

## Colors

High-contrast monochrome with extreme typographic density and occasional brutalist layout shifts.

- **Background (`#FAFAFA`)** — uses `bg` token
- **Primary text (`#2A2722`)** — uses `ink` token
- **Muted (`#666666`)** — uses `muted` token
- **Borders (`rgba(42,39,34,0.1)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** geometric-sans

## Layout

Full-bleed sections alternating between light and dark backgrounds.

*Rhythm:* Strict 4px base unit with generous whitespace to balance heavy typography.

## Elevation & Depth

- Borders: Simple 2px solid borders or no borders; relies on spacing and type weight for separation.

## Shapes

- `sm`: 0px
- `md`: 12px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Understated text-based links with hover transitions.
- **card:** Minimal, borderless containers relying on typography for hierarchy.
- **hero:** Massive, oversized typography filling the entire viewport width.

## Do's and Don'ts

**Don't:**
- Don't use soft, pastel colors — screenshot shows a high-contrast monochrome palette.
- Don't use playful, rounded UI elements — screenshot shows sharp, brutalist typography.
- Don't use small, dense grids — screenshot shows massive, full-bleed typographic layouts.
- Don't use subtle, decorative imagery — screenshot shows bold, pixelated or abstract art.
- Don't use traditional, safe layouts — screenshot shows experimental, overlapping text.
- Don't use a single background color — screenshot alternates between pure white and near-black sections.

---

## System Prompt (paste into AI agent)

```
This site is a bold, experimental creative portfolio for a web developer and designer. It features high-contrast monochrome backgrounds (#FAFAFA and #2A2722) and massive transitional-serif display typography paired with geometric-sans body text. The layout is brutalist and editorial, often breaking standard grid conventions. Critical donts: Don't use soft pastels, don't use playful rounded UI, and don't use traditional small grids.
```