# Henryheffernan · Design system migration spec

> Source: https://henryheffernan.com  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of brutalist web design, using extreme minimalism and a command-line interface to create a highly memorable and experimental portfolio experience.

## 1. Identity DNA

The site operates as a minimalist terminal boot screen for a digital portfolio, where every pixel serves a direct, functional purpose. It adopts the stark, monochrome aesthetic of early command-line interfaces to create a memorable, interactive showcase.

**One-liner:** A stark, monochrome interactive portfolio that relies on bold typography and a command-line aesthetic to showcase work.
**Keywords:** portfolio · experimental · terminal · minimalist · interactive
**Analogy:** A minimalist terminal boot screen for a digital portfolio.

## 2. Color

The color system is a strict, high-contrast monochrome of black and white. A single bright yellow is reserved exclusively for warnings, ensuring it commands immediate attention.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#FFFFFF` | body text |
| `--accent` | `#FFFF00` | single accent |
| `--line` | `rgba(255, 255, 255, 1.0)` | divider |

**Color principle:** High-contrast monochrome with a single neon accent for warnings.

The principle is absolute: color is information, not decoration.

## 3. Typography

Typography is rendered in consistent monospace or serif typefaces at a uniform base size, creating a cohesive typographic voice. Letter spacing is slightly opened to improve legibility against the dark background.

- **Display:** transitional-serif
- **Body:** monospace
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| body | 16px | 1.4 | 400 | 0.8px | Primary text for all narrative and interface elements. |

**Type rules:**
- All text is rendered in a consistent monospace or serif typeface at a uniform base size.
- Letter spacing is slightly opened for improved legibility on the dark background.

## 4. Spacing

Generous internal padding within containers establishes a deliberate rhythm, preventing text from crowding borders and creating clear zones of focus.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous internal padding within containers to prevent text from touching borders.

## 5. Surfaces

Depth is communicated not through shadow but through hard, thick strokes of black or white. These borders are the primary means of containment and define interactive elements.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** Hard, thick white or black strokes used for primary containment and interactive elements.

## 6. Layout

The structural skeleton is a centered single-column layout composed of nested, bordered containers. This creates a clear, hierarchical path through the portfolio content.

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

**Skeleton:** Centered single-column layout with nested bordered containers.

## 7. Motion & Interaction

Motion is minimal and purposeful, using only opacity and transform transitions for clean element reveals. The interaction model is inspired by command-line prompts, including effects like a blinking cursor.

- **Durations:** micro 200ms · small 200ms · medium 200ms
- **Easing:** `cubic-bezier(0.4, 0.0, 0.2, 1)`
- **Patterns:**
  - Opacity and transform transitions for element reveals.
  - Typewriter-style blinking cursor effect implied by the prompt.

- **Hover:** Cursor changes to a pointer; elements likely respond with opacity or color inversion.
- **Click:** Triggers state changes or transitions to the next portfolio section.
- **Transition:** Smooth opacity and transform transitions on interactive elements.
- **Keyboard:** Implied by the command-line prompt aesthetic.

## 8. Voice & Don'ts

The editorial voice is direct, technical, and minimalist. Headlines are presented in uppercase monospace or bold serif within rigid borders, while CTAs are simple, clear instructions.

- **Tone:** Direct, technical, and minimalist.
- **Headline style:** Uppercase monospace or bold serif, presented within rigid borders.
- **CTA style:** Simple, clear instructions in monospace followed by a bordered button.
- **Avoid:** Avoid soft gradients or rounded corners. / Avoid decorative illustrations or complex background imagery. / Avoid warm, friendly, or overly casual language. / Avoid multiple competing font families or weights. / Avoid standard, unstyled web elements. / Avoid cluttered layouts with many visible controls.

### Don'ts
- ❌ don't use rounded corners — screenshot shows sharp, hard-edged rectangular borders instead
- ❌ don't use soft gradients — screenshot shows flat, high-contrast solid colors instead
- ❌ don't use decorative imagery — screenshot shows a purely typographic, text-based interface instead
- ❌ don't use a light theme — screenshot shows a dominant black background with white text instead
- ❌ don't use decorative sans-serifs — screenshot shows a mix of monospace and transitional-serif fonts instead
- ❌ don't use subtle shadows — screenshot shows flat elements defined purely by thick borders instead

This system deliberately forgoes soft gradients, rounded corners, decorative imagery, and standard unstyled web elements.

## System Prompt (paste into AI tool)

```
This is a minimalist, experimental portfolio site that uses a terminal-inspired aesthetic. It is positioned as a bold, interactive digital showcase. The primary colors are stark black (#000000) and white (#FFFFFF), with a bright yellow (#FFFF00) used sparingly for system warnings. Typography relies heavily on monospace and transitional-serif categories at a uniform 16px base size. Key critical donts: avoid using rounded corners, as the design relies on sharp, hard edges; avoid using decorative imagery, as the focus is purely on typography; and avoid using soft gradients, as the palette is strictly monochrome with flat color fills.
```