# Design from Reference: ProductBoard Sign Up Flow Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** ProductBoard - **Category:** Account Setup - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbc89ad69dbc5db1009320_6acbc63d8356f50744ae70d8_cms-8c1505765f26a6ca1d614cbc.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 - **Style:** Minimal teammate-invitation step with white form and purple-blue abstract side artwork. ### Page composition - **Canvas:** 1440 × 821 screenshot px. - **Split:** Form roughly 60% width, decorative gradient 40%. - **Form:** Brand, invitation headline, skip reassurance, three work-email fields, Invite and Skip this. - **Artwork:** Large translucent overlapping curves. ### Information hierarchy - **Primary:** Invitation headline. - **Input:** Three equally styled email fields. - **Action:** Blue Invite and outlined Skip this. - **Secondary:** Reassurance that invitations can be sent later. ### Typography - **Family:** Neutral sans serif; exact identity unverified. - **Title:** Approximately 28 screenshot px, bold. - **Body:** Approximately 16px. - **Labels:** Approximately 11–12px uppercase. - **Controls:** Approximately 14px, semibold. - **Precision:** Visual estimates. ### Colors & surfaces - **Canvas:** #FFFFFF. - **Invite pale blue:** #8CC7FC. - **Borders:** #D5DDE3. - **Muted text:** #ACB6BF. - **Artwork violet:** Sample #714BC9, with spatial gradient variation. - **Text:** #000000/near-black. - **Precision:** Screenshot compression affects shades. ### Components - **Inputs:** Approximately 400 × 44 screenshot px with thin outlines. - **Actions:** Equal-width blue/outline rectangles with small radius. - **Labels:** Numbered email-address prompts. - **Help:** Circular launcher over artwork lower-right. ### Visual rhythm - **Spacing:** Large gaps between header, inputs, and actions. - **Alignment:** All form elements share a left edge. - **Whitespace:** Broad empty lower area keeps attention on three inputs. ### Responsive - **Observed:** Desktop only. - **Recommendation:** Hide/crop artwork, make fields fluid, and preserve obvious skip option. ### Adaptation guidance - **Preserve:** Optional team invitation with equal fields and clear alternative. - **Privacy:** Use empty/supplied email values. - **Behavior:** Sending invitations and validation are not demonstrated. 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.