The Ocean Cleanup

Item: The Ocean Cleanup
Rating: 7.4

Nonprofit developing technology to rid oceans and rivers of plastic.

theoceancleanup.com Save page

7.4/10MABTU rating

DESKTOP · 1440 × 8,121/ ↗

MOBILE · 390

Section outline · Home

01heroPress-event photo, white headline, help-clean link825
02missionNarrow left copy beside scroll-drawn vessel illustration
03problemCyan-accented headline over sparse navy space
04goalStatement with dotted plastic trail animation
05splitTwo 50/50 photo panels with outlined buttons
06ctaCyan band, three white cards with circular photos982
07partnersLogo row on white with thanks line253
08pressQuote carousel of three media cards with arrows
09newsFour photo cards with dates and read-update links734
10footerNavy footer, socials, newsletter field, four link columns

Rating · Home

Visual design7.6

UX & clarity7.0

Originality7.5

Craft & consistency7.3

Motion8.0

Performance & a11y7.0

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

Main colours

Mixed sections·white background·muted

Typography

Proxima Novaheading · sans · self-hosted Proxima Novabody · sans · self-hosted

Stack & style

Gutenberg blocks WordPress

Bold typography Photography-led Dark tech Hero video Logo cloud Service area list Smooth scroll Split screen Sticky header Testimonial slider

Also: reCAPTCHA, Amazon CloudFront, Google Analytics, Google Tag Manager

Design DNA

A deep ocean navy (#0B3A54) with cyan (#00C4E8) as the single accent. Headlines are condensed uppercase and mix white with cyan words inside the same sentence, each preceded by a short cyan rule. The long navy stretch is animated: a hairline drawing of the interceptor vessel trails a dotted plastic path that draws itself as you scroll, leaving the copy floating in a narrow left column. A split photo band pairs 'Cleaning the Ocean' and 'Intercepting in Rivers' at 50/50 with outlined buttons, then a full cyan band carries three white action cards with circular photos, a press quote carousel and a partner logo row.

Worth borrowing

Draw a hairline vessel-and-debris path down a long dark section as the scroll's only visual event.
Colour two or three words of a condensed uppercase headline in the accent to mark the claim.
Flip to a full accent-colour band for the three donate/work/subscribe cards so the ask is unmissable.