# Design from Reference: Intercom Account Setup Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Intercom - **Category:** Account Setup - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acad5d4d05a3f53c0a6e5a3_6acad55ad63d2caea65bf74f_cms-413e03318d1f4dbc3e985a41.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:** Focused account-setup step with soft sky-blue gradient, minimal branding and a strong blue progression action. ### Page composition - **Capture:** 2880 × 1630 screenshot pixels; estimated 2× CSS scale. - **Structure:** Top progress strip, logo left and Sign in right; centered narrow password form with heading, visibility-toggle input, requirement helper and Continue pill. ### Information hierarchy - **Priority:** Create your password heading leads to one input and its requirement. Full-width Continue is the primary action. ### Typography - **Family:** Rounded sans serif; exact family unverified. - **Estimated CSS sizes:** Heading 28px, helper 16px and primary action 20px. ### Colors & surfaces - **Measured palette:** White #FFFFFF, blue #0059FF and gradient samples #A3D7FF, #AFDCFF, #E5F3FF and #C7E7FF. - **Contrast:** Dark heading/input outline and gray helper text remain legible over the pale gradient. ### Components - **Elements:** Half-width progress fill, password field with separated eye-icon segment, helper line, arrow button and floating chat launcher. - **Estimated geometry:** Form approximately 440px wide, input 64px high with 10px radius, action 46px high and pill radius. ### Visual rhythm - **Spacing:** Broad open margins isolate a short form; helper stays close to the field while Continue has a larger gap. ### Responsive - **Suggested adaptation:** Keep 24px viewport gutters, fluid form width and accessible visibility toggle. Mobile behavior is unverified. ### Adaptation guidance - **Transfer:** Preserve one task per step and visible progress. Display real password requirements and validation feedback. 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.