# Design from Reference: Pitch 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:** Pitch - **Category:** Signup - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbcb668313d4c6c0cc7701_6acbc9035c8937341a57b506_cms-9592b04ce83a1c17924710b2.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:** Playful, creative signup with a clean white core surrounded by colorful three-dimensional hands and presentation-related objects. ### Page composition - **Canvas:** 1440 × 821 screenshot pixels; CSS estimates are approximately screenshot scale, with capture scale unverified. - **Structure:** Centered white panel roughly 800 × 615px against a pale gray-lavender background. Decorative assets enter from its edges, leaving a clear central column. ### Information hierarchy - **Priority:** Brand, bold welcoming headline, Google signup, email/password signup and sign-in link. - **Secondary:** Small data-processing and policy copy sits near the bottom inside the decorative frame. ### Typography - **Family:** Bold friendly sans-serif for heading and logo, neutral sans-serif for controls; exact font is unverified. - **Scale:** Estimated CSS headline 28–30px, brand 40px, controls 14px and legal copy 12–13px. ### Colors & surfaces - **Sampled palette:** Outer background #F6F6F9; white #FFFFFF; dark heading #2B2A35; shadow/edge variants #F5F5F8 and #F4F4F7. - **Accents:** Violet links and colorful purple, turquoise, coral and yellow illustration details create a lively frame. ### Components - **Actions:** Two equal-width white outlined signup buttons, approximately 300 × 48px CSS, with a Google icon in the first. - **Panel:** Estimated 16px outer corner radius and soft shadow. Illustration includes hands, a chart, drawing tools, app tiles and a looping line. ### Visual rhythm - **Spacing:** Large separation between headline and actions; 16–20px between controls and helper link. - **Framing:** Edge-cropped objects direct attention inward without interrupting the central form path. ### Responsive - **Guidance:** Mobile is not shown. Reduce or crop edge decorations, keep buttons full-width and protect legal-copy readability. ### Adaptation guidance - **Transfer:** Preserve the friendly visual frame and uncluttered two-choice signup path. Use original illustrations and the target authentication 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.