# Design from Reference: Meiro 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:** Meiro - **Category:** Signup - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acadbe4d05a3f53c0a86288_6acadb2de02e5734a681be55_cms-022cb2f5060324beb0ce5857.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:** Compact dark sign-in/sign-up card with a vivid lime primary action. - **Character:** Nearly black canvas, soft charcoal surfaces, white heading, muted gray details, and large rounded corners. ### Page composition - **Canvas:** 2880 × 1630 image px; CSS estimates assume an unverified 2× capture. - **Brand:** Centered white wordmark near top. - **Card:** Approximately 520 × 370 CSS px, centered horizontally and slightly above mid-height. - **Content:** Two-line greeting/title, email input, lime email action, OR separator, and Google option. - **Legal:** Small centered terms/privacy links below the card. ### Information hierarchy - **Primary:** Short friendly heading and lime Continue with email button. - **Input:** Single email field keeps the form simple. - **Alternative:** Google signup appears beneath a small OR label. - **Secondary:** Legal links are subdued and outside the card. ### Typography - **Family:** Neutral sans serif; exact family unverified. - **Title:** Approximately 24 CSS px, weight 600 under assumed 2×. - **Controls:** Approximately 14–16px; primary label semibold. - **OR:** Approximately 12px, uppercase. - **Legal:** Approximately 13px, underlined. - **Precision:** Font metrics and scale are estimates. ### Colors & surfaces - **Canvas:** #0E0F0F. - **Card:** #171818. - **Input and social action:** #202222. - **Primary lime:** #CAFF00. - **Heading:** #FFFFFF. - **Placeholder/legal text:** #7F8484. - **Primary-action label:** Near-black. - **Precision:** Hex values sampled from flat screenshot regions. ### Components - **Card radius:** Approximately 28 CSS px under assumed 2×. - **Card padding:** Approximately 40px horizontally. - **Input:** Approximately 440 × 50 CSS px with roughly 16px radius. - **Primary action:** Same width/height as input, lime fill. - **Google action:** Same dark rounded shape, centered multicolor mark and label. - **Legal links:** Two small links on one centered line. - **No password:** No password field or additional identity fields visible. ### Visual rhythm - **Spacing:** Equal-width controls form a simple vertical stack. - **Grouping:** Input and email action sit close together; OR provides a narrow break before Google. - **Whitespace:** Large empty canvas isolates the form. - **Emphasis:** Lime action is the only large saturated UI surface. ### Responsive - **Observed:** Desktop only. - **Recommendation:** Use a fluid card with viewport margins and preserve approximately 48px control height. - **Width:** Cap form width while allowing full-width controls on mobile. - **Legal:** Allow links to wrap naturally. ### Adaptation guidance - **Preserve:** Single-email entry, clear primary action, optional provider, and restrained dark palette. - **Brand:** Use the supplied logo and supported authentication methods. - **Content:** Adapt greeting and legal destinations accurately. - **Behavior:** No validation, verification, or provider interaction is demonstrated. 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.