# Design from Reference: Zencal Meeting Confirmation Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Zencal - **Category:** Empty - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acb699d5e515b69c7964f37_6acb67cc672175f31f2310cf_cms-395e832def9185a08f215d0f.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:** A celebratory meeting-confirmation screen with a pale summary card, green success symbol and multicolor confetti across a white canvas. - **Focus:** The confirmation and meeting details remain central despite the decorative overlay. ### Page composition - **Capture scale:** The source measures 2880 × 1642 pixels. A roughly 1440 × 821 CSS-pixel viewport at 2× scale is plausible but unverified. - **Header:** A pale strip contains the green Zencal wordmark at left and a small language flag at right. - **Summary card:** A centered pale-gray panel around 690 × 440 estimated CSS pixels sits in the upper-middle area. - **Contents:** A circular thumbs-up badge overlaps the card's top edge, followed by heading, email-confirmation sentence, summary labels and Add to calendar. - **Decoration:** Confetti pieces scatter across the full viewport, including over the card. ### Information hierarchy - **Success:** “Your meeting is confirmed!” is the dominant heading. - **Next expectation:** A short sentence explains that confirmation/details will arrive by email. - **Summary:** Topic, date, timezone and meeting place use bold labels with regular values. - **Action:** Add to calendar is the only visible action inside the summary; no additional booking form is shown. ### Typography - **Family:** A clean sans serif is visible; exact identity is unverified. The wordmark uses a separate serif-like logo treatment. - **Heading:** Approximately 28 estimated CSS pixels, medium weight. - **Body/details:** Around 16 pixels with 24-pixel line height. - **Labels:** Bold inline labels distinguish metadata without separate columns. - **Action:** Approximately 16 pixels, regular to medium, beside a calendar icon. ### Colors & surfaces - **Measured palette:** ICC-aware sRGB sampling yields white #FFFFFF, card #F8F8F8, header #F2F6F8, dark text #202529 and success green #005342. - **Confetti accents:** Sampled pink #FF7BF3 and red #F00035 join blue, orange, yellow, green and purple pieces. - **Treatment:** The card has small rounded corners and little shadow; the Add to calendar button is white/light gray with a more visible soft shadow. ### Components - **Success badge:** A green circle with a white thumbs-up symbol sits partly above the panel. - **Summary block:** Compact stacked lines present the captured meeting metadata. Personal/scheduled values need not be reproduced. - **Calendar action:** A light rounded rectangle around 172 × 46 estimated CSS pixels combines an outlined calendar icon and label. - **Confetti:** Small rotated rectangles and squares form a decorative full-screen layer; animation is unverified. ### Visual rhythm - **Spacing:** Heading, explanatory sentence and summary are separated by moderate gaps, with the action directly below metadata. - **Alignment:** All card text/actions share one left inset, while the card itself centers on the page. - **Contrast:** The dark green badge provides a stable success anchor against the busy colored confetti. ### Responsive - **Recommendation:** Make the card fluid with comfortable phone gutters and allow long topics to wrap. - **Recommendation:** Reduce confetti density over text and respect reduced-motion preferences if animated. No mobile state is shown. ### Adaptation guidance - **Preserve:** Retain explicit success text, clear meeting metadata and one calendar action. - **Implement:** Keep details as accessible text and provide timezone clarity in any live flow. - **Content integrity:** Treat the shown date/location as captured state, not a current scheduled event. 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.