CHD-4

Item: CHD-4
Rating: 8

Drum machine built from children's heartbeats, auctioned for a heart-disease charity.

heartbeatdrummachine.com Save page

8.0/10MABTU rating

Home

DESKTOP · 1440 × 16,798/ ↗

MOBILE · 390

Section outline · Home

01heroRed product render, intro columns, Try it and Auction buttons720
02featureRender of screen and sequencer with explanation630
03storiesChild portrait, heart condition, circle diagram, ECG trace, repeated
04creditsCollaborators with render
05specsRed panel and specifications columns
06featureTablet and phone mock with Try it
07aboutText columns and donate button630

Rating · Home

Visual design8.3

UX & clarity7.2

Originality8.5

Craft & consistency8.2

Motion6.5

Performance & a11y8.7

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

Main colours

Light·off white background·vivid

Typography

DM Monoheading · mono · google IBM Plex Monobody · mono · google

Stack & style

Webflow Google Fonts jQuery

Minimal 3D Photography-led Swiss grid

Also: Cloudflare, Google Analytics

Design DNA

Light grey canvas, one signal red and black. Full-bleed product renders of the CHD-4 drum machine (red knobs, cables, circular sequencer) alternate with tender close-up photos of children with heart disease. Every text block is tiny uppercase monospace in a multi-column spec-sheet layout, and each child gets a circular sequencer diagram plus their ECG trace. Red and black rectangular buttons (Auction, Try it). Ends with a digital-version device mock, foundation credits and a donate button.

Worth borrowing

Turn data (each child's heartbeat) into a repeated circular diagram plus ECG line as a section motif.
Set all copy as tiny uppercase mono in spec-sheet columns next to big product renders.
Alternate cold product renders with warm human portraits to carry an emotional campaign.