# Design from Reference: Specify 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:** Specify - **Category:** Verification Email - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbba04d37e66e942ffbd21_6acb70bf5a8f98ddabbff22e_cms-c73d1d90e594fbe5eeab6813.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:** Clean verification email with rounded white panel, violet branding and a small envelope illustration. ### Page composition - **Capture:** 1094 × 915 screenshot pixels; estimated CSS scale approximately 1×. - **Structure:** Centered panel with logo, confirmation heading, envelope graphic, greeting/prose, centered action and sign-off; social icons and repeated logo below. ### Information hierarchy - **Priority:** Confirm your email address heading leads to the violet Confirm email button; ownership explanation clarifies the task. ### Typography - **Family:** Sans serif; exact family unverified. - **Estimated CSS sizes:** Heading 26px bold, body 16px with 28px line height and action 16px. ### Colors & surfaces - **Measured palette:** Outer #F6F8FB, white #FFFFFF, violet #5562E0, dark #191E25, pale violet #A5A7F2 and signature gray #7B8CA4. ### Components - **Elements:** Envelope with notification badge, violet action, circular social icons and rounded sheet. - **Estimated geometry:** Panel 640px wide, 16px radius, 56px padding and 48px CTA with 6px radius. ### Visual rhythm - **Spacing:** Large gaps around illustration and action give the short transactional message a deliberate rhythm. ### Responsive - **Suggested adaptation:** Use fluid panel width and 20–24px gutters. Mobile rendering is not shown. ### Adaptation guidance - **Transfer:** Preserve one clear verification action and concise account-ownership guidance. 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.