---
name: Georgehatton
description: "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."
version: alpha

colors:
  background: "#ffffff"
  primary: "#000000"
  neutral: "#000000"
  line: "rgba(0, 0, 0, 1.0)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "-0.5px"
  body:
    fontFamily: grotesque-sans
    fontSize: 12px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "normal"
  small:
    fontFamily: grotesque-sans
    fontSize: 10px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "normal"

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

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

---

## Overview

A highly restrained, type-centric portfolio for a creative director.

*A pristine, brutalist gallery wall with meticulous black lettering.*

## Colors

Strict, high-contrast, monochromatic palette.

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Muted (`#000000`)** — uses `muted` token
- **Borders (`rgba(0, 0, 0, 1.0)`)** — uses `line` token

## Typography

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

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

## Layout

Multi-column text grid.

*Rhythm:* Strict, minimal padding and tight column gaps.

## Elevation & Depth

- Borders: 1px solid rgb(0, 0, 0)

## Shapes

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

## Components

- **button:** Text links with an upward-pointing diagonal arrow.
- **card:** Text-only layout without visible cards or containers.
- **hero:** Dense, left-aligned block of bold introductory text.

## Do's and Don'ts

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

---

## System Prompt (paste into AI agent)

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