# Henry Codes · Design system migration spec

> Source: https://henry.codes  ·  Curated by OpenDesign  ·  en

> This site is a prime example of bold, typographic-driven portfolio design that prioritizes personal expression over conventional UI patterns.

## 1. Identity DNA

Henry Codes operates on the tension between high-fashion editorial precision and underground zine rawness. The system's identity is built on a deliberate collision of extremes: typographic density meets generous whitespace, brutalist layouts meet precise technical execution. This is not a portfolio that whispers; it constructs its presence through monumental scale and unapologetic contrast.

**One-liner:** A bold, typographically-driven creative portfolio for a Denver-based web developer and designer.
**Keywords:** Personal Portfolio · Creative Web Developer · Designer · Denver · Bold
**Analogy:** A bold, experimental creative portfolio that feels like a mix of a high-fashion editorial and an underground zine.

## 2. Color

The palette is a disciplined monochrome, anchored by two dominant fields—#FAFAFA and #2A2722—with a narrow band of supporting grays. This high-contrast foundation creates immediate visual hierarchy without relying on chromatic variety.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FAFAFA` | main background |
| `--ink` | `#2A2722` | body text |
| `--muted` | `#666666` | placeholder |
| `--line` | `rgba(42,39,34,0.1)` | divider |

**Color principle:** High-contrast monochrome with extreme typographic density and occasional brutalist layout shifts.

Color here is not decoration; it is a structural element that defines boundaries and creates the brutalist rhythm of alternating light and dark sections.

## 3. Typography

Typographic voice is split between a commanding transitional serif for display and a clean geometric sans for body text. The scale is deliberately extreme, designed to fill viewport widths and create monumental section headers that function as visual landmarks.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 77px | 1.0 | 400 | -1px | Hero titles and section headers |
| body | 16px | 1.5 | 400 | 0px | Body text and navigation links |

## 4. Spacing

Rhythm is governed by a strict 4px base unit, with spacing used generously to counterbalance the heavy typographic weight.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Strict 4px base unit with generous whitespace to balance heavy typography.

## 5. Surfaces

Surface treatment rejects decorative depth, relying on the simplest 2px solid borders or their complete absence. Separation is achieved through the interplay of typography, weight, and the generous spatial buffer defined in the spacing scale.

- **Radius:** sm 0px · md 12px · lg 12px · pill 999px
- **Borders:** Simple 2px solid borders or no borders; relies on spacing and type weight for separation.

## 6. Layout

The structural skeleton is composed of full-bleed sections that alternate between the primary light and dark backgrounds. These sections operate as independent frames, often breaking conventional grid constraints to allow massive typography to overlap and command the entire field.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-bleed sections alternating between light and dark backgrounds.

## 7. Motion & Interaction

Motion philosophy is one of minimal, functional feedback. All transitions are set to a rapid 150ms ease-in, providing immediate, snappy response without decorative flourish or complex animation sequences.

- **Durations:** micro 150ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.645, 0.045, 0.355, 1)`
- **Patterns:**
  - Subtle hover transitions on links and interactive elements

- **Hover:** Subtle color or width transitions.
- **Click:** Immediate response without bounce or scale effects.
- **Transition:** All transitions set to 0.15s ease-in for snappy feedback.
- **Keyboard:** Standard focus states for navigation.

## 8. Voice & Don'ts

The editorial voice is bold, unapologetic, and deeply personal, mirroring the visual intensity of the design. It favors direct, aggressive statements in headline form, while calls to action remain subtle and text-based, allowing content to carry the primary weight.

- **Tone:** Bold, unapologetic, and highly personal.
- **Headline style:** Aggressive, oversized serif typography that commands attention.
- **CTA style:** Subtle, text-based calls to action that let the content speak.
- **Avoid:** Generic corporate language / Soft or playful design elements / Traditional grid-based layouts

### Don'ts
- ❌ 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.

The system deliberately forgoes soft pastels, playful rounded UI, and traditional grid-based layouts to maintain its brutalist, editorial integrity.

## System Prompt (paste into AI tool)

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