# Handsomefrank · Design system migration spec

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

> Worth including as an example of bold, illustration-focused agency portfolio design with playful typography

## 1. Identity DNA

Handsome Frank operates like a gallery where each illustration commands the entire wall. The design system is built to serve that singular purpose: making bold creative work impossible to ignore.

**One-liner:** A bold, illustration-focused creative agency portfolio with playful typography and vibrant color blocks.
**Keywords:** playful · bold · creative · agency · portfolio
**Analogy:** A vibrant creative studio showcasing illustrators

## 2. Color

The palette is built on stark contrast—black text on white fields—with vibrant, saturated color blocks that demarcate sections and create immediate visual rhythm.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#2C2C2C` | placeholder |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** High-contrast pairing of black on white with vibrant, saturated color blocks for section differentiation

Color is used structurally, not decoratively, to define territory on the page.

## 3. Typography

A transitional serif lends playful authority to headlines, while a grotesque sans-serif provides clear, neutral support for body text. The pairing is direct, avoiding excessive stylistic flourish.

- **Display:** transitional-serif
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 70px | 1.0 | 700 | -1.6px | Hero headlines and primary section titles |
| heading | 38px | 1.0 | 400 | -0.8px | Secondary headlines and subheadings |
| body | 22px | 1.36 | 400 | 0 | Body text and descriptions |

**Type rules:**
- Use transitional serif for all major headlines to convey playfulness and authority
- Use grotesque sans-serif for body text and secondary information for readability
- Apply tight letter-spacing (-1.6px) to large display text for visual impact

## 4. Spacing

Generous whitespace defines the rhythm, with large padding values around content blocks creating breathing room for both type and illustration.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** generous whitespace with large padding values around content blocks

## 5. Surfaces

Surfaces are flat and unadorned, relying on color and typography alone for hierarchy. Borders and shadows are deliberately absent, keeping the focus on content.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Borders:** minimal to none, relying on color blocks and typography for hierarchy

## 6. Layout

The layout skeleton is asymmetric, built from full-width color blocks that overlap with illustrations. It prioritizes large, singular statements over balanced grids.

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

**Skeleton:** asymmetric layouts with large color blocks and overlapping illustrations

## 7. Motion & Interaction

Motion is used with restraint, supporting interaction through smooth transitions and fluid transform animations. The philosophy is to make digital movement feel physical and responsive.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.23, 1, 0.32, 1)`
- **Patterns:**
  - smooth transitions for hover states
  - transform animations for interactive elements
  - cubic-bezier easing for fluid motion

- **Hover:** subtle scale and color transitions
- **Click:** immediate visual feedback with transform changes
- **Transition:** all properties with 0.4s duration using custom cubic-bezier easing
- **Keyboard:** standard focus management with visible outlines

## 8. Voice & Don'ts

The editorial voice is confident and declarative, using bold serif headlines and playful, direct language. It avoids corporate formality, passive constructions, and dense jargon.

- **Tone:** confident, playful, and authoritative
- **Headline style:** bold declarative statements with serif typography
- **CTA style:** playful onomatopoeia (Tssss-chk!)
- **Avoid:** formal corporate language / passive voice / jargon-heavy descriptions

### Don'ts
- ❌ don't use thin weights — screenshot shows bold 700 weight throughout
- ❌ don't apply rounded corners to major elements — screenshot shows sharp edges on color blocks
- ❌ don't use muted pastels — screenshot shows vibrant saturated colors (teal, red, orange)
- ❌ don't center-align all text — screenshot shows left-aligned project descriptions
- ❌ don't use small type sizes for headlines — screenshot shows large 70px display type
- ❌ don't add shadows or depth effects — screenshot shows flat color blocks without elevation

The system deliberately omits thin font weights, rounded corners on major elements, muted pastels, and universal text centering.

## System Prompt (paste into AI tool)

```
Handsome Frank is a bold, illustration-focused creative agency portfolio using transitional serif fonts for headlines and grotesque sans-serif for body text. Key colors include black (#000000) and white (#FFFFFF) for contrast, with vibrant section backgrounds like teal (#2BA58E), red (#E23B3B), and orange (#F4A261). The design emphasizes large, expressive typography (70px display, 38px heading) with tight letter-spacing. Critical don'ts: avoid thin font weights, never add rounded corners to major color blocks, don't use muted pastels, and don't center-align all text. The site showcases illustrators through full-viewport color blocks with overlapping illustrations and bold declarative headlines.
```
