# Design from Reference: Superlist Magic Link Email Sent Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Superlist - **Category:** Empty - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acad51b5a5fdf4c30310db7_6acad44181d0b61fedf58ec1_cms-9297e4bd2946e6fcb74fc56b.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:** Minimal authentication confirmation with a centered message, very pale lavender-white canvas and dark violet typography. - **Personality:** A small dimensional red app mark and two hand-drawn violet arrows add character to an otherwise quiet screen. - **Capture:** The image measures 2880 × 1630 pixels. CSS estimates assume a 2× capture, equivalent to approximately 1440 × 815 CSS pixels; actual scale and font identity are unverified. ### Page composition - **Outer frame:** A thin pale-lavender surround encloses a nearly full-viewport light panel with approximately 12-pixel CSS corner rounding and 8-pixel outer inset. - **Centered stack:** A narrow vertical composition contains the app mark, two-line headline, arrow illustration, delivery explanation, resend prompt and alternate-account button. - **Placement:** The stack begins around y146 CSS pixels and ends around y669, leaving generous space on both sides and beneath it. - **Content width:** The lower controls span approximately 370 pixels; the headline occupies a slightly narrower measure. ### Information hierarchy - **Primary state:** The large two-line heading communicates that an email is on its way. - **Delivery detail:** Smaller centered copy identifies magic-link delivery and places the destination address on its own line; the address is content rather than a reusable design token. - **Recovery actions:** A resend link appears within a short question, followed by a separate alternate-account action. - **Visual direction:** Two violet arrows point from the heading area toward the delivery explanation. ### Typography - **Family:** A clean sans-serif with rounded forms is visible; exact identity is unverified. - **Headline:** Approximately 56-pixel CSS size, bold weight, around 62-pixel line height and tight tracking. - **Delivery copy:** Approximately 18 pixels with 30-pixel line height, regular weight and centered alignment. - **Recovery controls:** Approximately 14–15 pixels; the resend phrase is semibold, while the alternate-account label is regular. - **Color consistency:** Headline, explanation and controls share the same dark-violet family, with hierarchy created mainly through scale and weight. ### Colors & surfaces - **Measured canvas:** The main surface samples #FAFAFC. - **Measured surround:** Pale lavender #E7E6F1 frames the panel; a related light boundary sample is #E9E9F1. - **Measured text:** Deep violet #26253D carries the principal message and supporting text. - **Measured illustration accent:** The hand-drawn arrows include #9089FF. - **Brand mark:** The small rounded-square logo uses a vivid red-orange gradient with a folded dimensional symbol. ### Components - **App mark:** Approximately 40 × 40 CSS pixels, centered above the headline, with softly rounded corners. - **Arrow artwork:** Two separate curved, hand-drawn strokes occupy an approximately 160 × 95-pixel region between headline and explanation. - **Resend prompt:** A centered inline sentence uses a semibold link as the recovery action; no timer or sent-again feedback is visible. - **Alternate-account button:** Approximately 370 × 40 pixels, fully rounded, with a thin pale-lavender outline and transparent/light fill. - **State scope:** The screen shows confirmation after submission; there are no visible form fields or loading indicators. ### Visual rhythm - **Headline spacing:** The logo sits about 32 pixels above the heading; the two heading lines form a compact dominant block. - **Illustration break:** The arrows create a visual pause before the delivery text instead of adding a bordered status card. - **Recovery spacing:** A larger gap separates delivery details from the resend prompt, followed by about 20 pixels to the outlined action. - **Whitespace:** The narrow central stack and broad empty margins keep attention on the confirmation and recovery path. ### Responsive - **Recommendation — width:** Keep the stack centered with fluid side gutters and a maximum width near 370 pixels. - **Recommendation — heading:** Reduce the headline on narrow screens while preserving a deliberate two-line or balanced multi-line shape. - **Recommendation — address:** Allow long destination addresses to wrap safely without overflowing. - **Recommendation — controls:** Preserve the alternate-account button's full available width and provide a comfortable resend touch target. No mobile state is shown. ### Adaptation guidance - **Keep the state explicit:** Lead with successful email dispatch and then explain the magic-link destination. - **Preserve recovery choices:** Keep resend and account switching distinct and easy to locate. - **Reuse restrained tokens:** Carry the sampled pale canvas, dark-violet text, fine outline and violet illustration accent into related authentication states. - **Avoid unnecessary structure:** Retain the open centered composition without adding dense navigation or an enclosing form card. - **Define subsequent feedback:** Implement resend confirmation, rate-limit and delivery-error states separately; none is evidenced in this screenshot. 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.