# Ijpowell · Design system migration spec

> Source: https://www.ijpowell.co.uk  ·  Curated by OpenDesign  ·  en

> This site is a perfect example of a refined, gallery-style portfolio that uses extreme minimalism to let the work speak for itself.

## 1. Identity DNA

The Ijpowell system operates like a minimalist photography exhibition space, where the architecture itself recedes to let the work command the room. Every design decision—from typography to spacing—serves to frame content with the deliberate restraint of a gallery wall.

**One-liner:** A refined, minimalist portfolio site focused on art direction and interactive design.
**Keywords:** portfolio · minimal · art direction · freelance · gallery
**Analogy:** A minimalist photography exhibition space with clean typography and ample negative space.

## 2. Color

The palette is a study in restraint: strict monochrome using only black and white, with no chromatic color allowed anywhere in the system. This is not an absence of color, but a deliberate choice to let grayscale values create structure and hierarchy.

| 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 monochrome with zero chromatic color, relying entirely on black, white, and grayscale.

The principle is absolute: contrast through value alone, never through hue.

## 3. Typography

Typography speaks with a **transitional-serif** voice, used exclusively for all primary elements. The choice of weight 400 across every component creates a uniform, editorial texture—neither loud nor decorative, but quietly authoritative.

- **Display:** transitional-serif
- **Body:** transitional-serif

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 400 | -1px | large headline text in project cards |
| body | 17px | 1.25 | 400 | -0.425px | primary body and navigation text |

**Type rules:**
- Use -0.425px letter-spacing for all body text
- Keep font weight at 400 for all elements
- Use transitional-serif for all primary typography

## 4. Spacing

Spacing follows a flexible rhythm, generous padding surrounding the central media area to maintain breathing room.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Flexible spacing with generous padding around the central media area.

## 5. Surfaces

Surfaces are flat and structural. Borders are the only delineation—minimal 1px lines in grayscale, used sparingly for structural definition, while shadows are entirely absent.

- **Radius:** sm 0px · md 0px · lg 0px · pill 9999px
- **Borders:** Minimal 1px borders in grayscale, used sparingly for structural elements.

## 6. Layout

The layout skeleton is architectural: a fixed header and footer anchor the composition, while a single, centered media block holds the focus. There is no multi-column sprawl; the frame is singular, the focal point undeniable.

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

**Skeleton:** Fixed header with left, center, and right elements; centered media block; fixed footer.

## 7. Motion & Interaction

Motion is understated and uniform. All state changes use a smooth 1-second transition with a cubic-bezier curve, creating a sense of measured, deliberate movement rather than animation for its own sake.

- **Durations:** micro 220ms · small 400ms · medium 1000ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth 1-second transitions for all state changes.

- **Hover:** Subtle opacity or state change on navigation links.
- **Click:** Immediate response with smooth transition to the new state.
- **Transition:** 1s cubic-bezier(0.4, 0, 0.2, 1) applied to all transitions.
- **Keyboard:** Standard tab navigation through interactive elements.

## 8. Voice & Don'ts

The editorial voice is minimal, professional, and understated. Headlines use clean transitional-serif typography with tight tracking, while calls to action are simple text integrated into navigation or footer—never loud, never decorative.

- **Tone:** Minimal, professional, and understated.
- **Headline style:** Clean, transitional-serif typography with tight tracking.
- **CTA style:** Simple text-based calls to action, integrated into the footer or navigation.
- **Avoid:** Colorful gradients / Dense paragraphs / Decorative icons / Loud calls to action / Cluttered layouts

### Don'ts
- ❌ Don't use vibrant colors — screenshot shows a strictly monochrome black and white palette.
- ❌ Don't use sans-serif fonts — screenshot shows a transitional-serif font used exclusively.
- ❌ Don't add drop shadows or complex card styles — screenshot shows flat, border-framed media.
- ❌ Don't use thick, heavy font weights — screenshot shows all text at weight 400.
- ❌ Don't clutter the interface with multiple columns — screenshot shows a single, centered focal point.
- ❌ Don't use rounded corners on containers — screenshot shows sharp, square corners on media frames.

The system deliberately avoids color, sans-serif type, drop shadows, heavy weights, and cluttered layouts—each exclusion reinforcing the gallery-like atmosphere.

## System Prompt (paste into AI tool)

```
This is a minimalist freelance designer portfolio for Isaac Powell, specializing in art direction, brand, and interactive design. The visual language is strictly monochrome, utilizing only black (#000000) and white (#FFFFFF) with no chromatic accent colors. The typography is a clean transitional-serif font used at weight 400 with tight -0.425px letter-spacing. The layout is highly structured with a fixed header and footer framing a large, centered media showcase. Critical design constraints include: never introduce color into the palette, always use the transitional-serif font family, avoid decorative elements or drop shadows, and maintain a vast amount of negative space around the central content to preserve a gallery-like atmosphere.
```