PopApp Books Website

The problem

The old site was built on WordPress, which was heavy to maintain and to design for. It did not introduce the book or say who it is for. I redesigned it to tell the book's story and its process, and moved it to a static Astro site.

The home page

One page that tells the book's story, from the first look to the purchase.

Design system

The site is built from the book itself: its illustrations, the brush strokes from the crowdfunding campaign and the feel of printed paper. I turned that into a system that code can reuse.

• Color with rules. Cream, deep green, magenta, wine red, yellow and mint, plus a list of text and background pairs that pass contrast. White on pink is allowed only at 19px bold and up.
• Type. Greta Text Pro HL for headlines and Heebo for body text. I tuned Heebo's weights and size (size-adjust 93.4%) so it matches the reference font's color and x-height.
• Brush shapes as masks. Labels, stickers, steps and photo frames are SVG masks traced from the campaign's brush strokes, with a shared watercolor texture on top. Any shape works in any color and stays sharp at any size.
• Hand-drawn icons that take their color from the text, and illustrated objects from the book (microscope, test tube, skeleton) with a planned place on the site for each.
• One rule for section edges. Wavy section edges use a 48px band with a 24px midline, and each section overlaps the one above, so transitions never leave gaps. Phone sizes scale it down to 32px.
• Paper grain over the whole page, so it feels like the printed book.

What's live, and what's designed

• Live at popappbooks.me: a one-page story in Hebrew, from the demo video and spreads from the book through the Davidson Institute's scientific approval, parents' and teachers' quotes, awards, press and an FAQ. The book is ₪149 with free delivery to a pickup point, a coupon field at checkout, and a contact form and newsletter sign-up.
• Designed: the main page, purchase, after purchase, legal pages, the page people see when they receive the book (the app welcome) and a not-found page, each at desktop (1440), tablet (834) and phone (390) sizes. The purchase design also covers an expanded page, not live yet (one or two books, an optional bookmark and sticker add-on, home delivery, a quote form for schools and kindergartens).
• Print pieces designed from the same system: a postcard for the package, a two-page A4 teachers' guide and a "questions kids ask" sheet.

Built with Astro on Cloudflare, in Hebrew and right-to-left, and responsive across phone, tablet and desktop.