Granola Homepage
Structure Transfer

Productized design instructions

Written after the working product was built, then organized into goal, visual language, layout, interaction, motion, accessibility, use cases, and limits.

Design a calm public homepage for a serious AI work product. Use an editorial software structure while keeping every brand, line of copy, person, screenshot, and product asset original.

Product goal: make a meeting-memory tool feel useful, private, and mature before explaining every feature.
Hero: create a desktop text-and-product split with one large serif promise, a compact supporting line, one primary action, and a layered product scene that stays pinned. Delay its scale change, add one live note line, and move its material, paper, note, and call layers at different speeds through the opening scroll.
Rhythm: alternate very large quiet fields with dense proof moments. Use one dark statement section as an attention reset before returning to neutral paper.
Color: use warm off-white paper, charcoal ink, soft gray-green surfaces, and one restrained forest-green signal. Avoid gradients, neon, glow, and decorative glass.
Typography: use an expressive, narrow editorial serif for promises and outcomes, and disciplined sans for navigation, descriptions, controls, and evidence. Use Newsreader and DM Sans as open substitutes for the source roles.
Workflow: explain before, during, and after states. Give every stage one practical outcome and one visible piece of product evidence.
Interaction: include touch-safe stage tabs and a large conversation-memory composer with in-view typewriter motion, manual editing, context switching, empty-error, loading, and success states.
Motion: use scroll-driven opacity and transform changes for the hero product state. Do not attach a window scroll listener. Respect reduced motion.
Responsive behavior: collapse the hero and workflow to one column, preserve the primary action above the fold, use a compact menu, and prevent horizontal scrolling at 320px.
Accessibility: provide one h1, semantic landmarks, labeled controls, visible focus, aria-live feedback, meaningful alt text, and color-independent selected state.
Attribution: keep the independent-study notice and direct source link on the audit page, not inside the replica experience.
Avoid: copied source copy or assets, fake customer logos, generic card grids, repeated eyebrow labels, inflated AI claims, testimonial overload, and a landing page with no working product moment.