Trevor Noah

Item: Trevor Noah
Rating: 7.8

Official site of the comedian, author, podcaster and host.

trevornoah.com Save page

7.8/10MABTU rating

DESKTOP · 1440 × 10,903/ ↗

MOBILE · 390

Section outline · Home

01heroGiant pink wordmark, cut-out head, latest-release ticker card
02introCentred statement with pink emphasis word
03mediaScattered tilted photo stickers with a View All Media pill
04scheduleCharcoal band, dated rows of shows with short blurbs
05quotePull quote credited to Born A Crime with pink emphasis
06booksExplore More pill; book covers did not render in capture
07aboutCut-out portrait with sticker speech bubble and bio column
08footerNumbered list of five destinations in large type beside cut-out

Rating · Home

Visual design8.2

UX & clarity7.3

Originality8.0

Craft & consistency7.6

Motion7.5

Performance & a11y7.7

This page scores 7.8; the site score weights the home page double.

Main colours

Dark·dark navy background·muted

Typography

Die Grotesk Cbody · sans · self-hosted

Stack & style

Lenis Webflow jQuery Three.js WebGL canvas

Bold typography Playful Photography-led Rounded / soft Hero carousel Marquee Page transitions Smooth scroll Sticky header Transparent header

Also: Google Tag Manager, Cloudflare, Google Analytics

Design DNA

Deep navy canvas, hot pink accent, off-white pills, and one heavy rounded geometric sans doing every job. The hero sets a giant pink 'Trevor Noah' wordmark with a cut-out of his head breaking through the baseline, a small 'Latest' ticker card in the corner and a row of social glyphs. Every band repeats a two-line header: white category over pink descriptor (Media / On The Screen, Books / On The Page, About / This Guy). Photos are loose stickers at angles, a charcoal band lists dated appearances in four columns, and the footer is a numbered list of five destinations.

Worth borrowing

Pair a white category word over a pink descriptor as the repeating section header.
Cut the subject out of the photo and let the head break through the top of the hero wordmark.
List appearances as a dated four-column table (date, title, blurb) instead of news cards.