---
title: "Handsome Frank design system"
variant: extended
source: https://www.handsomefrank.com/
captured_at: 2026-10-12
theme: light
industry: agency
generator: Design DNA (https://four.wiralomi.com/style/handsomefrank-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Handsome Frank · Design System

> A vivid, playful stage for world-class illustration

**Theme:** light · **Industry:** agency · **Source:** https://www.handsomefrank.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Handsome Frank’s homepage pairs a dramatic, deep-indigo introduction with a generous showcase of its illustrators and commissioned work. Oversized display lettering, varied color-blocked project features, and artwork-first layouts make the agency’s creative range the central experience.

## North star

Give expressive illustration the spotlight, using confident color-blocked sections and oversized editorial type to guide the scroll.

## Overview

The page opens with a nearly full-screen deep indigo hero, a small white script wordmark, and centered oversized white display text with a vivid turquoise supporting line. A warm cream artist area follows, using a dense, image-led roster and a bold diagonal red-orange interruption to bring movement to the grid. Below, project features alternate between split layouts and compact paired panels, each using a strong, distinct section color—warm orange, deep green, blues, red, mint, and lilac—while the artwork and project copy remain legible. Large rounded, expressive serif display lettering contrasts with small, clean sans-serif descriptions and captions. Generous vertical section bands give each project room, while image grids and article covers tighten the rhythm near the bottom. The result is editorial and playful without relying on shadows: color, typography, illustration, and changing compositions provide the hierarchy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Gallery | `#f8f3ef` | `--color-warm-gallery` | neutral | Primary warm canvas behind artist listings and later editorial content. |
| Paper White | `#ffffff` | `--color-paper-white` | neutral | High-contrast heading and text color on dark, saturated project bands. |
| Sky Hairline | `#96c1f3` | `--color-sky-hairline` | semantic | Measured border accent; use sparingly for subtle dividers or outlines. |
| Signal Vermilion | `#df1a19` | `--color-signal-vermilion` | accent | Measured red text accent; supports punchy display details rather than the main canvas. |
| Coral Banner | `#ee4037` | `--color-coral-banner` | accent | Bold red-orange section and diagonal artist-grid overlay. |
| Cool Mist | `#eef4fb` | `--color-cool-mist` | neutral | Pale text color on colored sections where white needs a softer counterpart. |
| Electric Turquoise | `#24e3dc` | `--color-electric-turquoise` | accent | Bright turquoise hero supporting line and small interactive accent. |
| Electric Green | `#24e34c` | `--color-electric-green` | accent | Measured in a small link detail; not a defining page-wide brand color. |
| Soft Terracotta | `#e29675` | `--color-soft-terracotta` | accent | Warm secondary project text and display accents on darker bands. |
| Night Indigo | `#160572` | `--color-night-indigo` | brand | Deep indigo used for the homepage hero, dark text accents, and closing browse strip. |
| Hero Indigo | `#15047d` | `--color-hero-indigo` | brand | Dominant hero-field indigo in the screenshot; the primary page-defining brand color. |
| Coca-Cola Red | `#ea0706` | `--color-coca-cola-red` | surface | Bright red project band for the Coca-Cola and Bruno Mangyoku feature. |
| Read Blush | `#f2ebe6` | `--color-read-blush` | surface | Soft blush-cream background for the four-cover Read content grid. |
| Button Navy | `#12345c` | `--color-button-navy` | semantic | Measured newsletter subscribe-button background; a small utility color. |
| Apricot Feature | `#edaf78` | `--color-apricot-feature` | surface | Warm orange feature band introducing Matt Blease. |
| Bottle Green | `#043b33` | `--color-bottle-green` | surface | Dark green project band for the Sipsmith and Tobias Hall feature. |
| Powder Blue | `#a5c3ef` | `--color-powder-blue` | surface | Light blue animation feature band, paired with dark text and colorful illustration. |

### Semantic aliases

`--color-canvas` → `#f8f3ef` (Warm Gallery) · `--color-surface` → `#f2ebe6` (Read Blush) · `--color-surface-2` → `#edaf78` (Apricot Feature) · `--color-surface-3` → `#043b33` (Bottle Green) · `--color-surface-4` → `#a5c3ef` (Powder Blue) · `--color-text` → `#df1a19` (Signal Vermilion) · `--color-text-muted` → `#ffffff` (Paper White) · `--color-text-subtle` → `#eef4fb` (Cool Mist) · `--color-border` → `#96c1f3` (Sky Hairline) · `--color-accent` → `#df1a19` (Signal Vermilion) · `--color-accent-2` → `#e29675` (Soft Terracotta) · `--color-accent-3` → `#ee4037` (Coral Banner)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#df1a19` | `#f8f3ef` | 4.43:1 | AA-large |
| `#df1a19` | `#f2ebe6` | 4.14:1 | AA-large |
| `#df1a19` | `#edaf78` | 2.56:1 | fail |
| `#df1a19` | `#043b33` | 2.56:1 | fail |
| `#ffffff` | `#f8f3ef` | 1.1:1 | fail |
| `#ffffff` | `#f2ebe6` | 1.18:1 | fail |
| `#ffffff` | `#edaf78` | 1.91:1 | fail |
| `#ffffff` | `#043b33` | 12.51:1 | AAA |
| `#eef4fb` | `#f8f3ef` | 1:1 | fail |
| `#eef4fb` | `#f2ebe6` | 1.07:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Klarheit Grotesk Semibold | `--font-klarheit-grotesk-semibold` | webfont | 600 | Supporting sans-serif labels and compact interface copy. | Inter |
| Millik Regular | `--font-body` | webfont | 700 | Expressive display headlines, project titles, and prominent links. | DM Serif Display |
| Klarheit Grotesk Bold | `--font-klarheit-grotesk-bold` | webfont | 700 | Navigation and emphasis within short sans-serif interface labels. | Inter |

- **Klarheit Grotesk Semibold:** Measured at semibold; use for compact supporting text, keeping display hierarchy with Millik.
- **Millik Regular:** Despite the family label, measured bold in display roles; oversized, tight-leading serif with a playful editorial feel.
- **Klarheit Grotesk Bold:** Bold sans-serif counterpoint to display lettering; keep labels crisp and generally in natural case.

### Type scale — Perfect Fourth (ratio ≈ 1.32, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 700 | 0.95 | 0.02em | — | Millik Regular | Hero statement and oversized campaign or section headlines. |
| h1 | 70px | 700 | 0.98 | -0.023em | — | Millik Regular | Primary page or feature headline, with tight display leading. |
| h2 | 54px | 700 | 0.96 | 0 | — | Millik Regular | Large project and editorial section titles. |
| h3 | 42px | 700 | 0.95 | 0.038em | — | Millik Regular | Secondary campaign and feature headlines. |
| h4 | 38px | 700 | 0.98 | -0.042em | — | Millik Regular | Smaller project titles and supporting feature headings. |
| body | 20px | 700 | 1 | 0 | — | Millik Regular | Short supporting statements and prominent description copy. |
| caption | 12px | 700 | 1.36 | 0 | — | Klarheit Grotesk Regular | Artist names, fine print, and compact image captions. |
| nav | 24px | 700 | 1.36 | 0 | — | Klarheit Grotesk Bold | Menu labels and prominent navigation text. |
| link | 70px | 700 | 0.98 | -0.023em | — | Millik Regular | Large editorial links and calls to explore featured work. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 10, 15, 16, 18, 20, 24, 32, 36, 38, 40, 60, 80, 86 px.
- Section rhythm 80px · element gap 40px · card padding — · max content width 1267px.

The page uses broad, vertically stacked color bands and a spacious overall rhythm. The measured maximum content width is 1267px; the hero centers its headline, while project bands alternate between text-and-artwork splits and paired panels. The artist section is a dense image grid, with a diagonal red-orange overlay disrupting its regular pattern. Later, a four-column Read grid and six-column social strip create tighter editorial endings. Section spacing is generous, with measured 80px section and 40px element gaps.

## Shape & elevation

- Radius: button `50%` · input `9999px` · card `50%` · nav `50%` · xs `10px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.4s cubic-bezier(0.33, 1.51, 0.57, 0.99)` on interactive elements.

The page is predominantly flat: saturated section backgrounds and image placement establish depth instead of shadows. Hairline borders are a minor measured detail, not a framing system. The artist area adds visual layering through a large diagonal coral banner crossing the artwork grid; project images themselves provide the other depth and texture.

## Imagery

Illustration is the core visual material, shown as artist portfolios, commissioned campaign art, editorial covers, and playful character scenes. Project images sit beside large copy or fill paired color panels; the artist grid presents many distinct styles at a glance. Product photography appears within illustrated brand campaigns, and video content supports feature sections. Use artwork with its original colors and avoid generic stock imagery or uniform image treatments.

## Components

### Hero

Deep-indigo opening field with a compact white script logo, small circular turquoise menu control, centered Millik headline, and turquoise supporting line.

### Artist roster

Warm cream gallery of illustrator images and captions, interrupted by a large diagonal coral band and followed by an all-illustrators link.

### Project feature

Full-width color-blocked campaign section pairing illustration or product imagery with a Millik project title, concise description, and short link.

### Paired feature panels

Adjacent project cards with distinct backgrounds, separate artwork and text, and strong white headings.

### Newsletter form

Bright blue signup section with white headline, short copy, stacked rounded fields, and a dark subscribe button.

### Read grid

Blush-cream editorial area with a large dark heading and four colorful illustrated cover cards in a row.

### Browse strip

Full-width deep-indigo footer link with centered white text and a small orange circular marker.

### Measured component styles

- **Primary button** (“Subscribe Subscribe”): background #12345c · text #ffffff · radius 30px · padding 16px 16px 15px 32px · 400 20px Millik Regular
- **Link** (“Rob & Robin”): transparent background · text #000000 · radius 0px · padding 0px · 700 22px Klarheit Grotesk Regular
- **Input**: background #2875cf · text #ffffff · border 2px solid · radius 30px · padding 16px 16px 15px 32px · 400 16px Klarheit Grotesk Regular
- **Card**: background #ffff00 · text #000000 · radius 50% · padding 0px · 400 22px Klarheit Grotesk Regular
- **Navigation item** (“Home”): transparent background · text #000000 · radius 0px · padding 0px · 700 54px Millik Regular

## Do

- Let illustration lead each project feature.
- Use saturated, distinct color bands to separate stories.
- Set display headlines in expressive, oversized serif type.
- Keep supporting copy compact and readable.
- Vary split layouts with paired panels and image grids.
- Use turquoise as a focused accent against indigo.

## Don't

- Do not flatten the whole page into one background color.
- Do not replace the artist work with generic stock photography.
- Do not add heavy shadows or card chrome.
- Do not make every section use the same layout.
- Do not use the display face for dense explanatory paragraphs.
- Do not treat incidental illustration colors as global brand colors.

## Agent prompt

Build a new editorial page in the Handsome Frank style. Start with a confident Hero Indigo (#15047d) field, white Millik-like serif display type, and a focused Electric Turquoise (#24e3dc) accent. Use Warm Gallery (#f8f3ef) for quieter image-led content and assign each featured story its own strong color band, such as Apricot Feature (#edaf78), Bottle Green (#043b33), or Powder Blue (#a5c3ef). Let original illustrations dominate the compositions; pair them with concise descriptions in a clean sans-serif. Alternate split features, paired panels, and compact image grids rather than repeating one template. Keep the page flat and spacious, with hierarchy created by color, typography, and artwork instead of shadows. Finish with a clear editorial link or browse strip.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-viewport indigo field with centered headline and top-corner brand controls. | Primary positioning, Menu access | Centered display type, Turquoise accent line, Script wordmark |
| 2 | gallery | Warm, dense illustrator image grid with a diagonal overlay. | Browse artist work, View all illustrators | Image tiles, Artist captions, Coral diagonal band |
| 3 | feature-split | Single warm-orange campaign band with copy and feature media. | Explore feature | Oversized serif title, Warm color block, Campaign media |
| 4 | feature-split | Deep-green campaign feature pairing text with product artwork. | Read project | Split composition, Product image, Terracotta text accent |
| 5 | feature-grid | Two side-by-side colorful project panels with image-led compositions. | Open project links | Paired panels, White serif headings, Illustration and product imagery |
| 6 | feature-split | Blue campaign band split between prominent artwork and project copy. | Read project | Large illustration, White project title, Blue backdrop |
| 7 | feature-split | Red campaign band with product image beside project text. | Read project | Product photography, White heading, Bright red background |
| 8 | feature-split | Mint-green campaign band with illustration and text in a split composition. | Read project | Character illustration, White title, Dark accent phrase |
| 9 | feature-split | Powder-blue feature with copy and a large character illustration. | Explore animation | Illustrated character, Dark display text, Light-blue backdrop |
| 10 | newsletter | Bright-blue signup panel with stacked form fields and supporting artwork. | Newsletter signup, Email capture | White headline, Rounded inputs, Dark subscribe button |
| 11 | feature-grid | Two adjacent feature panels for agency information and podcast content. | Learn about agency, Listen to podcast | Split-color panels, Large serif headings, Illustrated scenes |
| 12 | video | Full-width violet feature band with text beside or over video content. | Watch film | Violet background, Bright yellow text, Video feature |
| 13 | content-feed | Cream editorial section with four cover tiles arranged in a row. | Browse articles, Open reading | Large section title, Four illustrated covers, Warm neutral canvas |
| 14 | gallery | White horizontal social strip with a row of small image thumbnails. | Follow social account, Browse updates | Social headline, Thumbnail strip, White background |
| 15 | footer | Short, full-width indigo footer call-to-action strip. | Browse illustrators | Centered link, Orange circular marker, Indigo band |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/handsomefrank-com