# Design from Reference: Hotjar Signup Page Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Hotjar - **Category:** Signup - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbcb758313d4c6c0cc78a1_6acbc9f0ad8ac57527873d84_cms-766b230b1c4ac9b6e86116e5.webp Analyze the screenshot first. If inaccessible, request it rather than guessing. ## Content {{content.instructions}} {{content.data}} Preserve essential messaging and factual accuracy. Adapt structure and copy length for visual balance; never invent product claims. ## Visual Design ### Overall aesthetic - **Character:** Conventional split signup page, combining a practical white form with a large heatmap-product illustration. ### Page composition - **Canvas:** 1440 × 821 screenshot px. - **Structure:** Centered logo in a short full-width header; left form occupies approximately 38% of page width, right gray illustration/proof panel fills the remainder. ### Information hierarchy - **Priority:** Trial heading and two green-check assurances precede Google signup, email divider, two inputs and green Get Started action. Illustration provides product context without competing with form entry. ### Typography - **Family:** Neutral sans serif, exact font unverified. - **Scale:** Estimated screenshot heading 26 px, proof heading 24 px, body 14–16 px, uppercase field labels 12 px and primary button 18 px. ### Colors & surfaces - **Sampled palette:** White #FFFFFF; pale-gray right panel #E7EAEF; illustration grays #575C67/#595E69/#A3A8AB; green CTA #69CB4B. - **Accents:** Blue Google button, small red brand mark and vivid heatmap colors within the illustration. ### Components - **Form:** Full-width Google signup, thin ruled email divider, square outlined name/email fields and full-width green CTA; small sign-in link below. - **Illustration:** Stylized laptop/browser with colorful heat spots; centered social-proof heading and supporting line beneath. - **Geometry:** Estimated screenshot form width 360 px, fields 50 px tall, buttons 60 px tall and 2–4 px corner radius. ### Visual rhythm - **Spacing:** Approximately 28–36 screenshot px between input groups; broad margins isolate the form from the illustrative panel. ### Responsive - **Observed:** Desktop only. - **Adaptation:** Place the form first at full mobile width and move or omit the supporting illustration; retain trial assurances near signup. ### Adaptation guidance - **Preserve:** Clear alternate signup routes, labeled fields and strong green completion action. - **Replace:** Use verified trial terms, genuine proof and accurate identity-provider options. Use this context to reproduce the reference's visual language: layout, typography, colors, spacing, borders, radii, and distinctive elements. The screenshot takes priority if descriptions conflict. ## Direction {{preferences.fidelityInstructions}} ## Output {{output.instructions}} Deliver a polished, cohesive design with precise alignment, hierarchy, and spacing. Produce the requested visual artifact, not just a description. If unsupported, explain the limitation.