# Design from Reference: Folio Verification Email Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Folio - **Category:** Verification Email - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acb6802c08cd859ff86947a_6acb6715955d9ae8dea57183_cms-e5b169b254963ef76e81ea67.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:** A dark verification email uses centered white/pale text, a gradient brand mark and a large code panel. - **Character:** Sparse composition and strong code emphasis prioritize the authentication message. ### Page composition - **Capture:** The original measures 2192 × 1912 pixels. Dimensions below refer to the 1400-pixel-wide inspection rendition, not verified email CSS. - **Brand/message:** Centered brand sits above a bold welcome heading, short greeting and verification introduction. - **Code region:** A roughly 480 × 120-pixel outlined dark panel contains a large six-digit code. - **Instruction:** Two centered lines below explain use and expiry, followed by a bold team signoff. - **Footer:** A thin rule precedes small product description, location line and four circular social icons. ### Information hierarchy - **Welcome:** Bold white text and waving-hand emoji lead the message. - **Code:** The large numeral group is the strongest functional element. - **Instructions:** Pale copy explains the verification step and time limit. - **Footer:** Muted gray copy and small social circles remain secondary. ### Typography - **Family:** Neutral sans serif; exact identity is unverified. - **Heading:** Approximately 36 inspection pixels, bold. - **Code:** Around 48 pixels, bold. - **Body:** Approximately 20 pixels with generous leading. - **Footer:** Around 15–16 pixels, muted. ### Colors & surfaces - **Measured base:** Deep navy #0A101C dominates. - **Code panel:** Dark slate #161C28 distinguishes the inset region. - **Text:** White #FFFFFF and pale #C2CCD9 supply primary/secondary contrast. - **Footer:** Gray #84888C reduces emphasis. - **Accent:** Pink/purple brand gradient and colored social circles provide limited saturation. ### Components - **Code panel:** Wide rounded rectangle with roughly 10-pixel corners, fine gray outline and centered numerals. - **Brand:** Small gradient ribbon symbol beside a white wordmark. - **Divider:** Thin low-contrast horizontal line spans the footer text width. - **Social row:** Four evenly spaced colored circles contain white platform glyphs. - **Message:** No button or input is visible; the code is presented as text. ### Visual rhythm - **Centering:** Every region shares a central axis. - **Spacing:** Large gaps separate brand, heading, code, instructions and footer. - **Focus:** The broad dark perimeter isolates the verification content. ### Responsive - **Evidence:** One email capture is observed; mobile rendering is unverified. - **Recommended width:** Use a fluid centered column and keep the code panel within safe side insets. - **Type:** Establish CSS scale independently of source pixels and retain readable instructions. - **Accessibility:** Keep the code selectable and legible, with sufficient contrast. ### Adaptation guidance - **Preserve:** Keep the dark palette, centered hierarchy and prominent code region. - **Security content:** Generate the actual code dynamically; do not copy the captured value. - **Scope:** The image shows a verification message, not successful authentication. - **Behavior:** Expiry and verification handling require explicit implementation. 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.