# Design from Reference: Folk 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:** Folk - **Category:** Account Setup - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbca408313d4c6c0cc41a5_6acbc84d996643535b5d083d_cms-a3af4243896aa8cc05c272f3.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 team-invitation onboarding with oversized black type and bold geometric shapes on a pale blue-white canvas. ### Page composition - **Capture:** 1440 × 789 screenshot pixels; estimated CSS scale approximately 1×. - **Structure:** Logo/Exit upper left, large centered personalized heading over yellow fan shapes, explanatory line, email input/member row, Next and three progress dots. ### Information hierarchy - **Priority:** Large invitation heading dominates; email entry and existing owner identity form a compact central task area. ### Typography - **Family:** Heavy sans-serif heading with regular interface sans serif; exact family unverified. - **Estimated CSS sizes:** Hero 72–76px, supporting copy 20px, form/member labels 14px and action 14px. ### Colors & surfaces - **Measured palette:** Canvas #F6F8FE, white #FFFFFF, near-black #181A1B, yellow #F2C447, warm pale #F7F3EB and blue #5182E1. ### Components - **Elements:** Decorative cropped circles/diamond, layered yellow fan, email input, owner card/avatar, black Next button, progress dots and chat launcher. - **Estimated geometry:** Form approximately 500px wide, 48px input, 60px member row, 8px radii and 36px action. ### Visual rhythm - **Spacing:** Large headline occupies the upper half; compact form and bottom progression are separated by generous open space. ### Responsive - **Suggested adaptation:** Reduce title to 36–44px, constrain decorative shapes and use full-width form within 24px gutters. Mobile behavior is unverified. ### Adaptation guidance - **Transfer:** Preserve the expressive headline and simple invitation task. Use real owner identity and avoid letting decoration obscure text. 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.