# Design from Reference: Confetti Checkout Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Confetti - **Category:** Checkout - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbc685edc235600abc915d_6acbc0ccd6be908889c6149d_cms-0748540364eec5aa4a460d45.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:** Friendly subscription checkout modal over a dimmed habit-tracking dashboard. - **Character:** White card, rounded sans serif, blue prices and actions, and lightly tinted form fields. ### Page composition - **Canvas:** 1423 × 818 screenshot px. - **Modal:** Approximately 650 × 725px, centered, with roughly 50px internal padding and 10px corner radius. - **Header:** Upgrade title, muted subtitle, and circular close control at top right. - **Plans:** Two equal cards in one row; yearly option selected. - **Checkout:** Price summary and payment marks above cardholder/card fields and full-width pay action. - **Background:** Habit dashboard with blue header, weekly grid, and lists; darkened by overlay. ### Information hierarchy - **Primary:** Upgrade title and two plan choices. - **Selection:** Blue border and pale-blue fill identify the yearly plan. - **Price:** Large blue amounts anchor each option and checkout summary. - **Final action:** Full-width saturated-blue payment button. - **Reassurance:** Small renewal/cancellation line below the action. ### Typography - **Family:** Rounded, friendly sans serif; exact family unverified. - **Title:** Approximately 32 screenshot px, medium weight. - **Step heading:** Approximately 22px. - **Plan titles:** Approximately 22px, bold. - **Plan prices:** Approximately 30px, bold. - **Body and fields:** Approximately 16px. - **Pay action:** Approximately 22px, bold. - **Precision:** Font sizes are screenshot estimates, not verified CSS. ### Colors & surfaces - **Modal:** #FFFFFF. - **Action blue:** #037AFB. - **Field fill:** #EFF3FC. - **Selected plan fill:** #F3F7FF. - **Dimmed canvas:** #404040. - **Dimmed header:** #041E3F; not an undimmed product token. - **Text:** Dark neutral shades near #292F37 and #30343C. - **Shape:** Light-blue outlines, small card radii, and modest rounding on form fields. - **Precision:** Samples include compression; background values are affected by overlay. ### Components - **Close:** Pale circular button with gray X. - **Plan cards:** Approximately 264 × 134px each with roughly 26px gap. - **Badges:** Small emoji and discount text within plan heading. - **Fields:** Full-width cardholder input and unified card-number/expiry/security row. - **Payment marks:** Four small brand images beside annual summary. - **Pay button:** Approximately 550 × 65px, slight rounding. - **No external form interaction:** Screenshot shows a static checkout state. ### Visual rhythm - **Insets:** Title, plan step, summary, fields, and payment action align to the same left edge. - **Spacing:** Larger gap separates plan selection from billing details. - **Form rhythm:** Two pale fields and a blue action repeat the same width. - **Contrast:** Strong blue is reserved for selection, price, and payment. ### Responsive - **Observed:** Desktop modal only. - **Recommendation:** Constrain dialog to viewport margins, allow internal scrolling, and stack plans if necessary. - **Fields:** Keep payment controls readable and touch-friendly. - **Dismissal:** Keep close control reachable independently of content height. ### Adaptation guidance - **Preserve:** Plan comparison above checkout with clear selected state and one dominant payment action. - **Content:** Use current supplied pricing, discounts, and renewal terms. - **Brand:** Reuse blue consistently for selected plan, price, and submit. - **Behavior:** No payment, plan switching, or validation behavior can be inferred from the still. 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.