CURATED · OPEN · FREE

Handsomefrank

A bold, illustration-focused creative agency portfolio with playful typography and vibrant color blocks.

AgencyPortfolioBold TypographyExpressiveClean
Handsomefrank screenshot
↓ Download design system (40 MB)Open in OpenDesign

Visit: https://www.handsomefrank.com

📦 Browse pack contents →

01

Identity DNA

playfulboldcreativeagencyportfolio

A vibrant creative studio showcasing illustrators

02

Color

#000000Ink
#FFFFFFBG
#2C2C2CMuted
rgba(0,0,0,0.1)Line

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

03

Typography

transitional-serif · grotesque-sans

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

04

Spacing

4px
8px
16px
24px
32px
48px
64px
96px

generous whitespace with large padding values around content blocks

05

Surfaces

sm · 4px
md · 8px
lg · 12px
pill · 999px

minimal to none, relying on color blocks and typography for hierarchy

06

Layout

1280container
12columns
24pxgutter
768 / 1024breakpoints

asymmetric layouts with large color blocks and overlapping illustrations

07

Motion & Interaction

220msmicro
400mssmall
800msmedium
cubic-bezier(0.23, 1, 0.32, 1)easing

smooth transitions for hover states · transform animations for interactive elements · cubic-bezier easing for fluid motion

subtle scale and color transitions · immediate visual feedback with transform changes

08

Components

09

Voice & Don'ts

10

Inside the pack — real screenshots

Handsomefrank — 桌面首屏（hero）
桌面首屏（hero）
Handsomefrank — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Handsomefrank — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Handsomefrank — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Handsomefrank — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Handsomefrank — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Handsomefrank — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Handsomefrank — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Handsomefrank — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Handsomefrank — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Handsomefrank — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Handsomefrank — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Handsomefrank — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Handsomefrank — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Handsomefrank — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Handsomefrank — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Handsomefrank — 移动首屏
移动首屏

Captured from the live site · real computed styles

11

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko