---
name: Handsomefrank
description: "Worth including as an example of bold, illustration-focused agency portfolio design with playful typography"
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  neutral: "#2C2C2C"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 70px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1.6px"
  heading:
    fontFamily: grotesque-sans
    fontSize: 38px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-0.8px"
  body:
    fontFamily: grotesque-sans
    fontSize: 22px
    lineHeight: 1.36
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

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

*A vibrant creative studio showcasing illustrators*

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Muted (`#2C2C2C`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** 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

## Layout

asymmetric layouts with large color blocks and overlapping illustrations

*Rhythm:* generous whitespace with large padding values around content blocks

## Elevation & Depth

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

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** circular menu button with hamburger icon, positioned top-right
- **card:** full-width color block sections showcasing projects
- **hero:** bold serif headline centered with large illustration, full viewport height

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```