# Design from Reference: Reply Upgrading Flow Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Reply - **Category:** Billing - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbc0697ce271b12870b545_6acbbfb58fac5a61406fe971_cms-ca387e8b1bed28877b71bfd7.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 - **Style:** Plain subscription-upgrade modal with white surfaces, thin separators and vivid green price/action accents over a gray-dimmed settings page. - **Scale:** Source 1440 × 821px. Measurements are screenshot pixels; CSS/device scale is unverified. ### Page composition - **Modal:** A roughly 1100 × 602px white panel is centered near x170/y110, with small corners and a pronounced soft shadow. - **Header:** Back arrow and Small Team plan name sit left; Current plan / Trial appears right. - **Body and footer:** Centered completion heading precedes a narrow billing summary. A separate footer band holds Upgrade at the far right. ### Information hierarchy - **Billing choice:** Billed annually and a small savings note appear opposite a large monthly equivalent. - **Quantity and total:** Team members count follows, then Total billed after a larger vertical gap. - **Action:** The green Upgrade button is the final visible progression action; no payment fields or confirmation state are shown. ### Typography - **Family:** Neutral sans-serif; exact font identity is unverified. - **Roles:** Estimated plan heading 24px, body labels 18px, monthly amount 42px and total 24px. - **Secondary text:** Current-plan label is tiny uppercase; savings and period suffix use muted blue-gray. ### Colors & surfaces - **Sampled palette:** ICC-aware sRGB samples include white #FFFFFF, dark shell #252631 and dimmed grays #959595, #919294 and #949494. - **Accent:** Bright green highlights price figures and Upgrade. Background gray samples belong to the scrim, not the original settings surface. - **Boundaries:** Fine pale horizontal rules separate header, summary rows and footer. ### Components - **Summary:** Approximately 570px-wide block with left labels and right-aligned amounts/count. - **Billing selector:** Text-style annual billing control with small downward chevron and savings helper beneath. - **Action:** Approximately 165 × 40px green rectangle, small corners and centered white label. - **Dismissal:** A close X appears outside the modal near its upper-right edge; a back arrow sits inside the header. ### Visual rhythm - **Spacing:** Broad white margins surround the narrow summary, with substantial separation before the total row. - **Alignment:** Amounts share a right edge; the footer action aligns with the modal's right padding rather than the summary. ### Responsive - **Recommended adaptation:** Only desktop is observed. Make the modal fluid, reduce large body margins and retain readable price/unit grouping. - **Controls:** Keep back, close and Upgrade accessible at short viewport heights. ### Adaptation guidance - **Preserve:** Keep billing cadence, team quantity and total distinct before the upgrade action. - **Adapt:** Use current plan data and truthful savings. Do not reuse the displayed amounts as current pricing or imply an unseen payment step. 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.