HP Magic Words (Site of the Day - Jun 1, 2016) — UI design breakdown
Magic Words. The unwritten stories. HP made the first book written by people who’ve never written before. There are over 13 million illiterate people in Brazil. Just think of how many stories go unwritten. We traveled across the country in search of these people and their stories, and we printed them out one by one, using voice commands, in real time. Putting HP’s printers together with the Google speech API, we reinvented the way people preserve their memories. The website reunites the app/tool, the documentary and the book in a single responsive platform. Sourced from Awwwards. Use this page as a UI breakdown: reverse-engineer hierarchy, color roles, and interaction cues before you remix ideas into your own screens.
- Study how HP Magic Words separates primary actions from secondary content—note spacing, type scale, and focal contrast. Recognized as Site of the Day - Jun 1, 2016.
- Extracted palette (#2779A7): check which hues carry brand vs utility chrome.
- Ask: what would break first if this layout were a product dashboard—navigation clarity, scan order, or color contrast?
- Related themes: Art & Illustration, Culture & Education, Mobile & Apps, Animation, Parallax, Photographic.




