# Design from Reference: Rise Signup 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:** Signup - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acadb67494a081980ea06e1_6acad9ec81d0b61fedf6c9bd_cms-fa2394663fe5e250a9df49c9.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:** Minimal calendar signup with a white conversion column beside a large cropped dark product preview. ### Page composition - **Canvas:** 5760 × 3260 screenshot px; CSS estimates assume 4× capture. - **Structure:** Equal vertical halves; narrow left stack centered vertically with colorful symbol, two-line headline, short deck and three account actions. Right light-gray half contains an oversized dark calendar cropped at right/bottom. ### Information hierarchy - **Priority:** Headline leads into filled Connect Google action; outlined Microsoft alternative and Sign in follow. Product preview provides immediate visual context. ### Typography - **Family:** Modern sans serif, exact font unverified. - **Scale:** Estimated CSS headline 32–34 px bold, body 16 px and buttons 14–16 px. ### Colors & surfaces - **Sampled palette:** White #FFFFFF, dark calendar #1C1C1D, right surround #F7F7FA, purple event #412F5D, primary violet #7360F4, brown event #5E3728 and green event #31503E. ### Components - **Actions:** Equal-width rectangular buttons with approximately 6 CSS px corners; provider symbols and centered labels; thin divider above Sign in. - **Product:** Desktop calendar window with month picker, people list, calendar toggles and colored timed events; faint grid lines and rounded event blocks. - **Brand:** Small orange sunrise-like mark above a violet semicircle. ### Visual rhythm - **Spacing:** Estimated CSS content width 320 px; approximately 28–40 px between introduction and actions, 14 px between buttons. Large white margins keep signup focused. ### Responsive - **Observed:** Desktop only. - **Adaptation:** Prioritize signup stack on mobile and show a smaller focused calendar crop below. Preserve clear provider alternatives. ### Adaptation guidance - **Preserve:** Sharp white/dark split, restrained copy and violet primary action. - **Replace:** Use real supported identity providers and authorized calendar examples; do not reproduce personal calendar information. 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.