Cycle User Onboarding

# Design from Reference: Cycle User Onboarding Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Cycle - **Category:** User Onboarding - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acb72c6018523cfee2da45c_6acb706a9b286159c467bb7b_cms-3cbcd0c9a346c7b8f4a919e8.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:** A dark product-introduction step with a balanced split panel, concise explanatory copy and a simplified product illustration. - **Evidence scale:** Original 1440 × 821 pixels. Dimensions below are image-pixel estimates; actual CSS scale is unverified. ### Page composition - **Canvas:** Medium-charcoal viewport surrounds a centered approximately 1024 × 730 px rounded container, beginning near x208, y46. - **Split:** Two equal columns use subtly different dark fills, divided by a straight vertical boundary. - **Left:** White Cycle logo at upper left; a content block around the vertical center contains blue eyebrow, title, three-line explanation and Back/Next actions. - **Right:** Centered schematic document card with small integration icons, checklist rows and avatar; a small circular progress/loading-looking mark sits near the upper right. ### Information hierarchy - **Message:** The bold PRD-organization heading is the main textual landmark. - **Context:** Small blue uppercase eyebrow introduces the product-learning step. - **Navigation:** Blue Next is emphasized over gray Back, positioned at opposite ends of the copy block. - **Illustration:** Low-contrast document marks support the explanation without competing with it; no actual document text is readable. ### Typography - **Title:** Unverified sans-serif, approximately 24 px semibold with 30 px line height. - **Body:** Approximately 14 px regular, 24 px line height in light gray. - **Eyebrow:** Around 12 px semibold uppercase in blue. - **Buttons:** Approximately 14 px semibold white text, centered. - **Tracking:** Slightly open eyebrow spacing, otherwise neutral. ### Colors & surfaces - **Canvas:** Measured #404040 outer background. - **Split panel:** Near-black #212121 left and dark #292929 right. - **Illustration:** #313131 card surface with darker/lighter gray schematic marks. - **Accents:** Bright blue eyebrow, blue Next fill and checked illustration box. - **Type:** White branding/title and softer gray body copy preserve dark-mode hierarchy. ### Components - **Main shell:** Approximately 24 px radius with a soft dark shadow beneath. - **Copy block:** Roughly 396 px wide, inset about 60 px from the left panel edge. - **Buttons:** Approximately 66 × 32 px rounded rectangles; Back is gray, Next is blue. - **Illustration card:** Approximately 364 × 236 px, 12 px radius, fine lighter edge and broad soft shadow. - **Illustration details:** Three small integration-style square icons, one blue checked row, two unchecked rows, horizontal gray text bars and a tiny circular avatar. - **Top indicator:** A small incomplete gray ring is visible; animation and actual loading semantics are unverified. ### Visual rhythm - **Text grouping:** About 16 px separates eyebrow and title, with roughly 28 px before explanatory copy. - **Action spacing:** Buttons sit around 24 px below the paragraph. - **Balance:** Copy and illustration align around the same vertical midpoint, while the logo remains a distant top anchor. - **Restraint:** Large empty dark areas isolate the instructional content. ### Responsive - **Observed limit:** Desktop only; no mobile step layout is verified. - **Recommendation:** Stack copy above illustration and reduce outer padding while keeping Back/Next in a stable row. - **Short viewports:** Allow scrolling rather than clipping the title or navigation. ### Adaptation guidance - **Retain:** Explain one concept per step with a compact schematic and clear forward navigation. - **Implement:** Use adjacent dark surfaces, low-contrast illustration details and one blue action emphasis. - **Verify:** Confirm font, scale, progress semantics and navigation behavior independently; no setup step was advanced. 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.