Webflow New Features Emails

# Design from Reference: Webflow New Features Emails Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Webflow - **Category:** Product Update Emails - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbc138b7ca13cf70095a98_6acbc02e1d2516508748b958_cms-4a9577e866f3f2ac95b68214.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 feature-announcement email contrasts a black visual hero with a white explanatory area on a pale gray surround. - **Capture evidence:** The screenshot measures 1303 × 1123 pixels and shows the complete visible email. Measurements are image-pixel estimates; email CSS scale is unverified. - **Tone:** A bold feature statement and floating blue file icons create a focused product-update presentation. ### Page composition - **Brand:** A centered Webflow wordmark sits above the message card. - **Container:** A roughly 750px-wide rounded white column is centered in gray margins. - **Hero:** A black upper region contains a large headline, muted two-line explanation and scattered three-dimensional file-type icons. - **Lower region:** A centered subheading, supporting copy and blue action explain the feature's customization. - **Closing:** A short sign-off and handwritten-style team signature sit near the bottom. ### Information hierarchy - **Headline:** Upload all the files is the strongest text in the black region. - **Feature explanation:** Muted copy clarifies the new upload capability and hosting context. - **Supporting detail:** A smaller lower heading introduces customization of upload states and file types. - **Action:** Read all about it is the only large button. - **Closing identity:** The handwritten team signature is secondary to the feature and action. ### Typography - **Family:** A clean sans-serif serves headings/body; a handwritten script serves the signature. Exact identities are unverified. - **Hero heading:** Approximately 40px image size, medium-to-bold. - **Hero support:** Approximately 23px with 28px line-height. - **Lower heading:** Approximately 26px medium. - **Body/action:** Approximately 21–22px with 28px line-height. - **Signature:** A medium gray handwritten-style graphic anchors the closing. ### Colors & surfaces - **Surround:** Sampled #F0F1F3 supplies pale gray. - **Hero:** Sampled #000000 supplies the black upper panel. - **Lower panel:** Sampled #FFFFFF supplies the white content area. - **Action:** Sampled #4352FC supplies vivid blue. - **Secondary text:** Sampled #6B7075 and #363B43 contribute to gray text treatments. - **Illustration:** Dark and bright blue gradients model the floating file icons. ### Components - **Hero panel:** A large black rectangle with rounded upper corners holds centered text and artwork. - **File icons:** Angled document/file tiles display short format labels, varying in scale and depth. - **Primary button:** Approximately 234 × 68px image size, blue fill, small corner radii and white label with right arrow. - **Closing block:** A regular sign-off sits above a script signature. - **Container:** Small rounded lower corners finish the white message without a strong shadow. ### Visual rhythm - **Inner width:** Text remains centered within generous 40–50px side padding. - **Hero spacing:** Heading and description occupy the upper hero, with artwork filling the lower portion. - **Lower spacing:** Around 24px separates subheading and copy; larger gaps precede action and sign-off. - **Contrast transition:** A sharp black-to-white boundary distinguishes announcement from explanation. ### Responsive - **Evidence limit:** Only one captured email width is visible; client rendering is unverified. - **Container recommendation:** Use a fluid centered email with mobile gutters. - **Artwork recommendation:** Scale file icons proportionally and provide useful alternative text. - **Text recommendation:** Keep headline, explanation and action as live text where possible. ### Adaptation guidance - **Announcement template:** Retain one feature headline, one visual demonstration and one documentation action. - **Content accuracy:** Treat hosting/feature claims as historical email content unless current terms are verified. - **Accessibility:** Preserve contrast, descriptive links and a readable image-off version. - **Brand:** Use the authentic logo/signature assets only where appropriate. - **Scope:** This is a visual email description; no Webflow site change or publishing action is implied. 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.