Dreem My Sleep Profile

# Design from Reference: Dreem My Sleep Profile Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Dreem - **Category:** Free Side Product - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbc7537369a31d47fc6db5_6acbc5cf4d71070f5fd612b1_cms-80ee2cb49fdb682f44e246fe.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:** Atmospheric sleep questionnaire with a star field, constellation and layered dark question cards. ### Page composition - **Canvas:** 1440 × 818 screenshot px. - **Structure:** Minimal top navigation with centered pink mark; constellation above a lower-centered stack of three offset cards. Front card contains centered question, wide dropdown and pink Next button. ### Information hierarchy - **Priority:** Current question and answer selector form the task; constellation and stacked sheets suggest a guided multi-step experience. ### Typography - **Family:** Rounded geometric sans serif, exact font unverified. - **Scale:** Estimated screenshot question 20 px with loose tracking, answer 15–16 px and uppercase button 14 px. ### Colors & surfaces - **Sampled palette:** Night-sky tones #151A27/#161B28/#171C29/#181D2A/#191E2B/#1A1F2C/#1B202D. - **Accents:** White stars/text and coral-pink brand/action; layered cards are lighter blue-gray. Exact accent hex not sampled. ### Components - **Card:** Approximately 570 screenshot px wide, gently rounded corners and subtle dark gradient; two rear sheets offset upward. - **Controls:** Full-width muted-gray dropdown with white chevron, compact coral rectangular Next button. - **Backdrop:** Dense tiny stars, sparse brighter glows and a circular constellation pattern. ### Visual rhythm - **Spacing:** Large open night-sky region separates top controls and questionnaire; approximately 48 px between question, answer and action. ### Responsive - **Observed:** Desktop only. - **Adaptation:** Fit card within 20 px gutters, reduce upper artwork height and preserve readable question/answer contrast. ### Adaptation guidance - **Preserve:** Quiet nocturnal atmosphere and one-question focus. - **Replace:** Use the appropriate questionnaire and actual answer options; do not infer sleep findings from this screen. 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.