# Al Murphy · Design system migration spec

> Source: https://www.al-murphy.com  ·  Curated by OpenDesign  ·  en

> This site is a prime example of a portfolio that prioritizes expressive, illustrative content over traditional UI patterns, making it a strong reference for playful, art-driven design.

## 1. Identity DNA

This design system operates as a digital sticker book of subversive pop-culture doodles. The identity is playful, illustrative, and deliberately loose, rejecting polished corporate aesthetics in favor of a vibrant, hand-made sensibility. It is a portfolio where the artwork itself is the primary interface and visual language.

**One-liner:** A playful, subversive illustration portfolio built on a grid of vibrant, sticker-like artworks.
**Keywords:** playful · subversive · illustrative · pop-art · sticker-culture
**Analogy:** A digital sticker book of subversive pop-culture doodles

## 2. Color

The palette is not a brand guide but a living spectrum extracted directly from the artwork. Every illustration contributes its own vibrant hues, set against a neutral light gray (#f5f5f5) grid background.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#f5f5f5` | main background |
| `--ink` | `#000000` | body text |
| `--line` | `rgba(0, 0, 0, 0.1)` | divider |

**Color principle:** A high-contrast, multi-colored palette derived entirely from the artwork, set against a neutral grid background.

The principle is that color is derived, not prescribed, creating a high-contrast, multi-colored canvas where each piece brings its own energy.

## 3. Typography

Typography is treated with the same playful disregard for convention as the illustration. Display-sans and humanist-sans categories (Arial/Helvetica) are used for navigation and links, with the text often adopting a caption-like, hand-drawn style to match the illustrative voice.

- **Display:** display-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 16px | 1.2 | 400 | 0px | navigation and links |

## 4. Spacing

Spacing follows an irregular rhythm, rejecting mechanical alignment to mimic the organic placement of stickers on a page.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** irregular

## 5. Surfaces

Depth is achieved through composition, not decoration. The flat illustrations sit directly on the canvas, with no drop shadows, borders, or border-radius to create artificial layers.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** none

## 6. Layout

The layout skeleton is a loose, organic grid reminiscent of a collage or sticker-covered notebook. It is a continuous canvas where illustrations overlap and interact freely, rather than a structured system of columns and rows.

- **Container max:** 1440px
- **Grid:** 12 columns, gutter 0px
- **Breakpoints:** 768 px

**Skeleton:** grid

## 7. Motion & Interaction

Motion is minimal and purposeful, used only to signal interactivity. A single 'all' transition on hover provides subtle feedback, keeping the focus on the static artwork rather than animated effects.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`

- **Hover:** pointer cursor on interactive elements
- **Click:** pointer cursor on interactive elements
- **Transition:** all
- **Keyboard:** standard

## 8. Voice & Don'ts

The editorial voice is playful and subversive, mirroring the tone of the illustrations. Any text, particularly headlines, adopts a casual, caption-like style to avoid a formal or corporate feel.

- **Tone:** playful
- **Headline style:** captions
- **CTA style:** n/a
- **Avoid:** corporate / formal / sterile

### Don'ts
- ❌ Don't use a rigid, corporate grid — screenshot shows a loose, sticker-like collage layout.
- ❌ Don't rely on a single brand accent color — screenshot shows a vibrant, multi-colored palette across artworks.
- ❌ Don't use traditional UI components like cards or chips — screenshot shows a continuous canvas of illustrations.
- ❌ Don't use a white background — screenshot shows a light gray grid background.
- ❌ Don't use formal, serif typography — screenshot shows playful, hand-drawn style lettering.
- ❌ Don't use drop shadows or border-radius for depth — screenshot shows flat illustrations with no UI shadows.

The system deliberately rejects the use of traditional UI components like cards, chips, or structured input fields, refusing to let interface patterns overshadow the expressive art.

## System Prompt (paste into AI tool)

```
Positioning: A playful, subversive illustration portfolio (al-murphy.com) showcasing sticker-like artworks on a digital canvas. Key colors: white/light gray (#f5f5f5) background with a vibrant, multi-colored palette derived from the art; ink is black (#000000). Font categories: display-sans for headings, humanist-sans for UI; actual fonts are Arial/Helvetica. Critical donts: 1) Don't use a rigid corporate grid — use a loose, organic sticker-culture layout. 2) Don't restrict the color palette — use vibrant, multi-colored illustrations. 3) Don't use standard UI components like cards or chips — let the art be the primary interface. 4) Don't use a pure white background — use a light gray grid. 5) Don't use formal, serif typography — use playful, casual sans-serifs. 6) Don't add depth via shadows or border-radius — keep the flat, illustrative style.
```
