# Design from Reference: Rise Welcome Screen Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Rise - **Category:** Welcome Screen - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acadb67494a081980ea06dd_6acad9ec45c63c780157f864_cms-ec221278086ce84323483eb1.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:** Soft lavender calendar interface with a video-led onboarding modal. ### Page composition - **Canvas:** 5760 × 3260 screenshot pixels; CSS estimates assume approximately 4× scale, inferred rather than verified. - **Structure:** Calendar/sidebar behind a centered modal; six-step checklist on modal left, large video and explanatory instructions on right. ### Information hierarchy - **Priority:** Selected Flexible meetings step leads to video, bold topic heading, four numbered explanations and Mark complete action. ### Typography - **Family:** Neutral sans-serif; exact font is unverified. - **Scale:** Estimated CSS topic title 20px, checklist 14px, explanatory body 14px and utility text 12px. ### Colors & surfaces - **Sampled palette:** Pale lavender #F7F7FC; white-tinted #FDFDFF; subtle variants #F6F6FB, #F5F5FA and #F0F0F5. - **Accents:** Violet numbered circles, selected step and completion action; muted lavender-gray text. ### Components - **Modal:** White rounded frame with soft shadow, narrow checklist divider, video play overlay and separated bottom action row. - **Background:** Mini month calendar, onboarding checklist and calendar sources remain visible. Estimated 16px modal radius and 4–6px button radius. ### Visual rhythm - **Spacing:** Compact 12–16px checklist rows contrast with broad video area; 24px content padding. ### Responsive - **Guidance:** Mobile is not shown. Collapse checklist into step navigation and stack video/instructions. ### Adaptation guidance - **Transfer:** Retain video-plus-checklist learning structure. Use original tutorial content and accurate completion steps. 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.