Paul Hahn

Warm, approachable, and cleanly structured. Floating rounded canvas cards sit comfortably against soft neutral backgrounds, while a friendly portrait embedded directly into the hero headline establishes an instant human connection. Restrained periwinkle blue accents and spacious typography create an unhurried, reassuring freelance portfolio experience.

reassuring

Visit site

Rated

5.8/ 10

From 6 analysed sections. Two measured components and one judged by a model. Distinction is a rank within the library; the rest are scores in their own right.

AI scorejudged: 7.1
Systemmeasured: 5.4
Distinctionmeasured: 3.3

on the grid: 27%
vertical rhythm: 79%
type on a scale: 43%
contrast passing AA: 67%
unlike the library: 0.61
model craft: 6.8/10
model deviation: 3.0/10

Colour

Background#ffffff

Text#191d21

Accent#4d80d1

Surface#f2f2f2

Muted#5d6063

Typefaces

Display: Bricolage Grotesque
Body: Poppins
Mono: —
Source: google
Scale: 12 · 14 · 16 · 20 · 24 · 32

Layout

Grid: 12 columns
Container: 1000px
Spacing base: 8px
Radius: 16px · 24px · 32px

Capture

Category: portfolio
Sections: 6
Captured: 2026-09-06
Rhythm: light x7

Type rules

display headlines use tight negative tracking at -0.04em in sentence case
body text maintains a comfortable 53-character measure at 1.8 line-height
section eyebrows are prefixed with double slashes in uppercase

Colour rules

blue accent #4d80d1 is limited to interactive states, active cards, and category badges
content modules sit in off-white surface containers (#f2f2f2) on pure white canvases

Voice rules

write from a personal first-person point of view
keep explanations grounded and jargon-free

Holds it together

enclose distinct content sections within large rounded island containers
prefix all section category badges with double slashes
confine the blue accent to active card highlights and text link indicators

Contrast

text on background16.9:1 AAA

muted text on background6.3:1 AA

text on surface15.1:1 AAA

muted text on surface5.7:1 AA

accent on background3.9:1 AA Large

background on accent3.9:1 AA Large

Type, measured

Body: 16px / 1.8
Measure: 53 characters
Display: 96px / 1.2
Tracking: -0.04em display
Scale ratio: 1.57

Voice

Tone: approachable, clear, direct
Sentences: short
Person: first
Vocabulary: plain
Calls to action: starten, senden, kontaktieren

Built with

Builder: framer
Framework: —
Motion: —
WebGL: —
Nav: —
Length: 5.6 screens

Sections in page order

Rhythm — each block is a section, as wide as it is tall, in the colour it is on

00
hero
Strong
A clean, airy portfolio hero centering a friendly portrait integrated seamlessly into a bold introductory headline.
Mood
reassuring + playful
Layout
1 col · centered · airy
Open section
01
showcase
Strong
A structured, crisp portfolio showcase presenting client websites through dynamic angled mockups against a clean, bright backdrop.
Mood
reassuring + serene
Layout
2 col · grid · balanced
Open section
02
statement
Strong
Clean, approachable personal introduction section pairing calm typography with a tilted candid portrait.
Mood
reassuring + playful
Layout
2 col · split · balanced
Open section
03
feature grid
Clean and accessible service cards with a soft blue highlight establishing immediate visual hierarchy.
Mood
reassuring + serene
Layout
3 col · grid · balanced
Open section
04
faq
A calm, well-structured split FAQ section using numbered light gray accordion cards alongside concise introductory copy.
Mood
reassuring + serene
Layout
2 col · split · balanced
Open section
05
cta
Clean, rounded card layout presenting a friendly contact form paired with minimalist typography and soft dot patterns.
Mood
reassuring + serene
Layout
2 col · split · airy
Open section