# Design from Reference: Asana 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:** Asana - **Category:** Account Setup - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbbf6a4d71070f5fd41325_6acbbe8f578bcc411175ab50_cms-3c403ca37bafac0af3ecc23c.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:** Sparse signup step with white form area and bold geometric artwork on the right. ### Page composition - **Canvas:** 1440 × 823 screenshot px. - **Header:** Logo and three-step breadcrumb progress across the top. - **Form:** Welcome title, account context, full-name field, Continue, opt-in checkbox, and alternate-login link. - **Artwork:** Narrow right strip with navy, pink, coral, and white semicircle blocks. ### Information hierarchy - **Primary:** Welcome title and full-name question. - **Action:** Small violet Continue button. - **Progress:** About you is emphasized in the top breadcrumb. - **Secondary:** Email updates opt-in and wrong-account link. ### Typography - **Family:** Neutral sans serif; exact family unverified. - **Title:** Approximately 30 screenshot px. - **Field question:** Approximately 20px, semibold. - **Body/input:** Approximately 16px. - **Progress labels:** Approximately 11px uppercase. - **Precision:** Screenshot-based estimates. ### Colors & surfaces - **Canvas:** #FFFFFF. - **Artwork pink:** #F4C5DA. - **Artwork coral:** #EC7481. - **Artwork navy:** #131E47. - **Input:** #F6F8F9. - **Action violet:** #7A6EFC. - **Primary text:** #151B27. - **Border:** #DADCE0. - **Precision:** Flat colors sampled from compressed image. ### Components - **Name field:** Wide pale input with thin bottom border rather than full heavy outline. - **Continue:** Compact violet rectangle with white label. - **Opt-in:** Small checked blue checkbox and one-line text. - **Progress:** Text steps divided by chevrons. - **Art:** Oversized geometric semicircles and rectangles, no illustration detail. ### Visual rhythm - **Spacing:** Large gaps between input and progression, broad unused canvas below. - **Alignment:** All form elements share left edge. - **Contrast:** Narrow saturated art strip balances otherwise plain white page. ### Responsive - **Observed:** Desktop only. - **Recommendation:** Hide/crop decorative strip and make input fluid on small screens. - **Progress:** Wrap or simplify step labels without losing current-state cue. ### Adaptation guidance - **Preserve:** One-question onboarding, visible progress, and simple continuation. - **Privacy:** Replace name and email context. - **Behavior:** Validation, opt-in handling, and next step 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.