# Design from Reference: Fellow 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:** Fellow - **Category:** Account Setup - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbbf7a4d71070f5fd4151c_6acbbea27ce271b128703690_cms-1d7195c9fa133f5fa0afe8ea.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:** Friendly split-screen onboarding with soft illustrated branding on the left and a spacious workspace form on white. ### Page composition - **Capture:** 1440 × 822 screenshot pixels; estimated CSS scale approximately 1×. - **Structure:** Left 40% identity panel with welcome logo, large workspace icon and faint doodles; right Back control, Workspace setup heading/logo editor, name/URL fields and Continue. ### Information hierarchy - **Priority:** Form heading introduces two required entries. Descriptions clarify naming and URL use; fixed .fellow.app suffix explains the resulting address. ### Typography - **Family:** Rounded sans serif; exact family unverified. - **Estimated CSS sizes:** Form title 28px, field labels 18px, descriptions 16px and primary action 20px. ### Colors & surfaces - **Measured palette:** White #FFFFFF, pale illustrated background #F5F6F9 with #F5F6FA/#F6F6FA variations, orange logo #EA4A33 and disabled gray #E6EAED. ### Components - **Elements:** Circular workspace mark, edit-logo affordance, outlined inputs, appended URL suffix and disabled Continue. - **Estimated geometry:** Form width 448px, input height 60px, 4px radii and 64px major field gaps. ### Visual rhythm - **Spacing:** Large open vertical intervals and sparse left illustrations create an unhurried setup experience. ### Responsive - **Suggested adaptation:** Reduce the decorative panel to a compact header and use a full-width form with 24px gutters. Mobile behavior is not shown. ### Adaptation guidance - **Transfer:** Preserve workspace identity preview and clear URL construction. Validate actual availability before enabling progression. 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.