Heartbeat Drum Machine

A minimalist desktop landing page with a light gray background featuring a large red circular drum machine interface on the left and a black modular synthesizer interface on the right. The layout includes text describing CHD-4, branding for Plan8 and Teenage Engineering, and interactive controls for sound, speed, delay, and volume. The design uses a clean, technical aesthetic with thin lines and geometric shapes.The mobile version presents a vertically stacked layout on a light gray background. The black synthesizer interface appears first at the top, followed by the large red circular drum machine interface below it, with all branding and control labels rearranged for a single-column scroll.

The Heartbeat Drum Machine (CHD-4) website serves as a poignant digital intersection between medical awareness and avant-garde musical hardware. Created through a collaboration between Love Hultén and Teenage Engineering, the site showcases a modular synthesizer that translates the electrocardiograms of children with congenital heart disease into rhythmic patterns. It functions as both a product showcase and a powerful advocacy tool, using sound to humanize a medical condition that often lacks public visibility. The visual identity is striking and highly intentional, utilizing a brutalist, technical aesthetic that mirrors the precision of medical instrumentation and high-end audio gear. The design employs a high-contrast palette of deep blacks, clinical whites, and a visceral, rhythmic red. Through clean lines, schematic-style illustrations, and bold typographic elements, the site communicates a sense of sophisticated engineering while maintaining a deeply emotional core, targeting an audience of design enthusiasts, audiophiles, and social advocates.

Design

Colors
Buckets
Palette
#EBEBEB
#B4272F
#242021
#7B7879
#9F9B9B
#CAC7C7

Technology

JavaScript frameworks
Security
Pagespeed
Desktop
96
Performance
68
Accessibility
100
Best Practices
75
SEO
Mobile
37
Performance
68
Accessibility
81
Best Practices
75
SEO
Related websites
Advertisement
Learn more

Websites on Display is an independent web design inspiration gallery and archive. All website designs, screenshots, logos, and trademarks featured on this platform remain the exclusive intellectual property of their respective original creators, agencies, and brands. If you are a copyright holder and wish to have your work credited, or removed from the archive, please contact us and we will promptly accommodate your request.