# Design from Reference: Steep Account Setup Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Steep - **Category:** Account Setup - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acad56f86f1bee9c3650774_6acad49c701e38c794889a82_cms-b6a3ff93905709d63eba22cf.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:** Restrained workspace-creation screen with a white floating card and almost monochrome styling. ### Page composition - **Capture:** 2880 × 1630 screenshot pixels; estimated 2× CSS scale. - **Structure:** Centered card with title/helper, workspace-name input, optional logo upload and disabled Continue. User identity and Log out occupy a separated footer. ### Information hierarchy - **Priority:** Create Workspace heading leads to the required name; logo is explicitly optional. Footer identity is secondary. ### Typography - **Family:** Sans serif; exact family unverified. - **Estimated CSS sizes:** Heading 30px, body 16px, field/helper 14px and footer metadata 12px. ### Colors & surfaces - **Measured palette:** Canvas #F7F7F8, white #FFFFFF, disabled button #F5F5F5, subtle grays #F6F6F7/#F5F5F6 and dark text #191919. ### Components - **Elements:** Single outlined input, small upload icon tile, full-width disabled action, avatar/account details and outlined logout. - **Estimated geometry:** Card approximately 580px wide, 12px radius, 64px padding, input 56px high and button 48px high; soft shadow. ### Visual rhythm - **Spacing:** Generous gaps between instruction and form, and a large blank interval before the account footer. ### Responsive - **Suggested adaptation:** Fit card within 20–24px gutters and reduce padding on narrow screens. Mobile behavior is not shown. ### Adaptation guidance - **Transfer:** Preserve required/optional distinctions and disabled progression until valid input. Use actual account identity without decorative additions. 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.