Paul Hahn

Warm, approachable, and cleanly structured. Large rounded containers and soft neutral tones create an inviting backdrop for client case studies. A playful photo insert embedded directly inside the oversized hero headline instantly sets a personal, human tone.

warm clinical quiet

Visit site ↗

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: 16 columns
Container: 1000px
Spacing base: 8px
Radius: 12px · 24px · 32px

Capture

Category: portfolio
Sections: 4
Captured: 2026-08-27
Rhythm: light x4

Type rules

display headlines at 96px with negative tracking (-0.04em) in sentence case
body text set in Poppins 16px with 1.8 line height capped at ~53 characters per line
section eyebrows styled in uppercase with double-slash prefixes

Colour rules

slate blue accent (#4d80d1) reserved for highlighted cards, section indicators, and active text
soft off-white surface (#f2f2f2) creates subtle rounded container breaks against the pure white (#ffffff) canvas

Voice rules

write in a friendly first-person conversational tone
prefix section headers with double slashes

Holds it together

prefix uppercase section category eyebrows with double slashes ('//')
embed personal portrait cards directly into display headlines or adjacent to body statements
use soft light-grey rounded surfaces (#f2f2f2) to group hero content and form modules cleanly on a white background
highlight exactly one featured card in multi-card grids with the slate blue accent (#4d80d1)

Contrast

text on background16.9:1 AAA

muted text on background6.3:1 AA

text on surface15.1:1 AAA

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, friendly
Sentences: medium
Person: first
Vocabulary: plain
Calls to action: starten, senden

Built with

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

Colour, by area

accent on text, container

#ffffff 0%#f2f2f2 0%#4d80d1 0%#d1d1d1 0%#e8e8e8 0%#191d21 0%

Sections in page order

3 strongest marked · 4

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

00
hero
An airy and welcoming personal portfolio hero featuring a playful photo insert embedded directly inside the bold greeting headline.
Mood
warm + playful
Layout
14 col · centered · airy
Open section →
01
showcase
Strongest
Clean, structured portfolio grid showcasing web design case studies through isometric screen mockups and restrained typography.
Mood
clinical + quiet
Layout
2 col · grid · balanced
Open section →
02
feature grid
Strongest
Clean and friendly freelance portfolio section pairing soft rounded cards, approachable typography, and calm slate blue accents.
Mood
quiet + warm
Layout
16 col · stacked · balanced
Open section →
03
cta
Strongest
Clean and welcoming floating contact card with subtle rounded inputs and friendly typography on a light backdrop.
Mood
quiet + clinical
Layout
16 col · split · airy
Open section →