# Georgehatton · Design system migration spec

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

> This site is an excellent example of extreme typographic restraint and brutalist web design, proving that a compelling layout can be achieved using only text.

## 1. Identity DNA

The George Hatton portfolio operates as a pristine, brutalist gallery wall with meticulous black lettering. Its identity is architectural, a system built on absolute restraint where typography is not decoration but the primary structural element.

**One-liner:** A highly restrained, type-centric portfolio for a creative director.
**Keywords:** minimal · editorial · high-end · Swiss-inspired · architectural
**Analogy:** A pristine, brutalist gallery wall with meticulous black lettering.

## 2. Color

The color system is a stark, absolute monochrome palette: pure black ink on a pure white background. This strict, high-contrast principle rejects all accent colors, focusing attention entirely on form and content.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#000000` | placeholder |
| `--line` | `rgba(0, 0, 0, 1.0)` | divider |

**Color principle:** Strict, high-contrast, monochromatic palette.

The principle is strict and monochromatic, ensuring maximum contrast and structural clarity.

## 3. Typography

Typography carries the entire visual weight, set in a single grotesque-sans family. The voice is bold and direct, with a uniform 700 weight and tight tracking creating a dense, typographic document.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 16px | 1.2 | 700 | -0.5px | Large paragraph text |
| body | 12px | 1.2 | 700 | normal | Standard list text and UI |
| small | 10px | 1.2 | 700 | normal | Secondary list text |

**Type rules:**
- Typography is entirely monospaced-width or tightly tracked, mostly set in Bold (700).
- Line height is strictly proportional to the small font sizes (1.2).

## 4. Spacing

Spacing is a strict, minimal rhythm of tight padding and narrow column gaps.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 10 / 16 / 24 / 32 / 48 / 64 px
- **Rhythm:** Strict, minimal padding and tight column gaps.

## 5. Surfaces

Surfaces are defined by absence and line. There are no shadows or depth effects, only a precise 1px solid border in pure black to demarcate space where absolutely necessary.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** 1px solid rgb(0, 0, 0)

## 6. Layout

The layout skeleton is a dense, edge-to-edge, multi-column text grid. It functions like a printed typographic document, rejecting decorative containers for a raw, text-only presentation.

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

**Skeleton:** Multi-column text grid.

## 7. Motion & Interaction

Motion philosophy is one of strict functionalism, applied as a uniform global transition across all elements. The interaction model is minimal, limited to standard cursor changes for immediate feedback on text links.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Global transition applied to all elements.

- **Hover:** Cursor changes to pointer on interactive text links.
- **Click:** Immediate response on text links.
- **Transition:** Uniform transition applied across all elements.
- **Keyboard:** Standard keyboard navigation focus.

## 8. Voice & Don'ts

The editorial voice is professional, direct, and objective, often using a third-person biographical introduction. It avoids marketing jargon and subjective adjectives, relying on understated text links for calls to action.

- **Tone:** Professional, direct, and objective.
- **Headline style:** Third-person biographical introduction.
- **CTA style:** Understated text links for contact.
- **Avoid:** Marketing jargon / Excessive whitespace without content / Decorative elements / Multiple font families / Subjective adjectives / Color accents

### Don'ts
- ❌ Don't use multiple font families — screenshot shows a single grotesque-sans family.
- ❌ Don't use different font weights for emphasis — screenshot shows uniform bold (700) weight.
- ❌ Don't use color accents or highlights — screenshot shows strictly black text on white.
- ❌ Don't use rounded corners or card containers — screenshot shows a raw, borderless text layout.
- ❌ Don't use drop shadows or depth effects — screenshot shows completely flat typography.
- ❌ Don't use decorative icons — screenshot uses only a single arrow character for links.

It deliberately avoids color accents, rounded corners, decorative icons, and the use of multiple font weights or families.

## System Prompt (paste into AI tool)

```
This is a highly restrained, brutalist portfolio site for a creative director. The design relies entirely on a strict, monochromatic palette (pure black #000000 ink on a pure white #ffffff background) with no accent colors. Typography is the primary structural element, utilizing a single grotesque-sans family (Suisse Intl) set almost entirely in a bold weight (700) across various small sizes (10px, 12px, 16px). Layout is a dense, multi-column text grid with minimal padding. Critical don'ts include: never use more than one font weight, never introduce color or decorative graphics, and never use rounded corners or shadows. The overall aesthetic is architectural and purely informational, focusing on absolute legibility and structural restraint.
```