trevornoah-com
Playful, witty, and bold. Deep nocturnal navy backgrounds host surreal 3D torn-paper collage art and giant punchy grotesk typography. Soft pink accents spotlight humorously highlighted keywords while pill-shaped UI components keep the layout friendly and approachable.
Visit siteRated
6.9/ 10
From 16 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.7
- Systemmeasured
- 6.4
- Distinctionmeasured
- 5.9
- on the grid
- 64%
- vertical rhythm
- 11%
- type on a scale
- 100%
- contrast passing AA
- 80%
- unlike the library
- 0.24
- model craft
- 7.1/10
- model deviation
- 4.4/10
Colour
Background#1d2440
Text#f9fcf4
Accent#ff9bb4
Surface#2b2b2b
Muted#6f7ba9
Typefaces
- Display
- Die Grotesk D
- Body
- Die Grotesk C
- Mono
- —
- Source
- self_hosted
- Scale
- 15 · 19 · 21 · 24 · 61 · 99
Layout
- Grid
- 12 columns
- Container
- 1345px
- Spacing base
- 8px
- Radius
- 9999px · 16px
Capture
- Category
- portfolio
- Sections
- 16
- Captured
- 2026-08-31
- Rhythm
- dark x16
Type rules
- display type is set in tight-tracked grotesk with pink highlighting on key conceptual words
- body text maintains an optimal measure around 69 characters per line
- section eyebrows use stacked two-tone title-cased titles
Colour rules
- primary background is deep navy #1d2440 with charcoal #2b2b2b accent sections
- soft bubblegum pink #ff9bb4 is reserved exclusively for typographic keyword emphasis, speech bubbles, and category sub-labels
- interactive primary buttons are high-contrast off-white pills with dark navy text
Voice rules
- keep headlines conversational and wry
- use two-line stacked category headers with pink subtitles
Holds it together
- highlight exactly one critical word per statement headline in pastel pink
- frame photography and subject portraits with white sticker outlines and ripped-paper edges
- structure major content indices in wide horizontal tabular rows with minimal dividing lines
- use fully rounded pill buttons for all primary calls to action
Contrast
text on background14.7:1 AAA
muted text on background3.7:1 AA Large
text on surface13.7:1 AAA
accent on background7.7:1 AAA
background on accent7.7:1 AAA
Type, measured
- Body
- 19px / 1.4
- Measure
- 69 characters
- Display
- 361px / 0.95
- Tracking
- 0em display
- Scale ratio
- 2.09
Voice
- Tone
- witty, curious, approachable
- Sentences
- short
- Person
- third
- Vocabulary
- conversational
- Calls to action
- get, view, read, explore
Built with
- Builder
- webflow
- Framework
- —
- Motion
- —
- WebGL
- yes
- Nav
- top_bar, 11 items
- Length
- 11.9 screens
Sections in page order
16- 00
hero
A surreal and playful collage hero featuring torn-paper imagery, vibrant 3D elements, and bold pink typography against a deep navy canvas.
- Mood
- playful + energetic
- Layout
- 1 col · centered · airy
- 01
statement
A confident, minimalist typographic statement on deep navy, elevated by tight tracking and a soft pink highlight.
- Mood
- energetic + contemplative
- Layout
- 1 col · centered · airy
- 02
statement
A deeply minimal transition section setting a quiet, poised rhythm with centered two-tone typography floating in vast dark navy space.
- Mood
- serene + energetic
- Layout
- 8 col · centered · airy
- 03
showcase
A dynamic composition of rotated photography cards floating across an airy, deep navy background.
- Mood
- playful + energetic
- Layout
- 6 col · asymmetric · airy
- 04
cta
A spacious dark navy transition featuring floating peeled sticker cards and a centered pill button invite.
- Mood
- playful + serene
- Layout
- 16 col · centered · airy
- 05
statement
Stark and quiet section divider anchored by crisp, centered two-tone typography against deep dark backgrounds.
- Mood
- serene
- Layout
- 12 col · centered · airy
- 06
statement
Playful collage-style statement featuring a peek-a-boo cutout portrait intertwined with bold centered typography.
- Mood
- playful + energetic
- Layout
- 1 col · centered · airy
- 07
statement
Minimal dark typography transition with generous negative space and soft pink accents.
- Mood
- serene + contemplative
- Layout
- 12 col · stacked · airy
- 08
announcement
A clean, dark tabular row cleanly aligning date, event title, and narrative description across a disciplined grid.
- Mood
- serene + clinical
- Layout
- 12 col · grid · airy
- 09
announcement
A quiet, sparse tabular row presenting an event release with delicate pink accent typography on a charcoal ground.
- Mood
- serene + contemplative
- Layout
- 12 col · grid · airy
- 10
announcement
A crisp, dark-mode tabular news row with understated Swiss typography and a subtle pink timestamp.
- Mood
- clinical + serene
- Layout
- 12 col · grid · airy
- 11
announcement
A stark, dark news listing row cleanly structured across typographic columns with a soft pink date accent.
- Mood
- contemplative + serene
- Layout
- 12 col · grid · balanced
- 12
statement
A bold, centered typographic quote set in high-contrast neo-grotesk with a subtle pink highlight against deep navy.
- Mood
- energetic + playful
- Layout
- 1 col · centered · airy
- 13
cta
A minimal deep navy transition area featuring sparse centered typography and the top edge of a pill button.
- Mood
- serene
- Layout
- 1 col · centered · airy
- 14
showcase
Deep navy index section pairing a clean numbered list and pill button with an offset sticker cutout portrait.
- Mood
- playful + energetic
- Layout
- 8 col · asymmetric · airy
- 15
nav
A playful sticker-cutout portrait peeks into a full-screen navy navigation overlay with bold numbered links.
- Mood
- playful + energetic
- Layout
- 2 col · split · airy
