# Design from Reference: Miro Invite Your Team 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:** Miro - **Category:** Invite Your Team Emails - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62ecad858ef108042a100d39_1659676944963-5eb53b18d3681d0a4e56f223_screencapture-mail-google-mail-u-1-2020-05-08-12_56_53.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 focused onboarding email combines a clean white panel, oversized navy invitation copy, a blue primary action, and cheerful yellow circles behind a product image. - **Evidence:** The screenshot is 1304 × 1136 image pixels. Measurements below describe observed image pixels; email CSS width and capture scale are unverified. ### Page composition - **Canvas:** A centered white panel spans approximately x277–1027, about 750 px wide, against a cool gray page background. Its top begins near y38 and its corners are softly rounded. - **Header:** The Miro wordmark and small former-brand annotation sit at upper left; an outlined Go to Miro button aligns at upper right. - **Message:** A large left-aligned heading, three-line supporting paragraph, and blue invitation button occupy the upper half with about 50 px side padding. - **Visual:** The lower half contains a wide whiteboard screenshot over cropped yellow circles. The artwork reaches the panel edges while the screenshot aligns with the text column. ### Information hierarchy - **Primary message:** The bold invitation heading dominates the text, followed by a muted paragraph explaining team collaboration. - **Action:** The filled blue Invite my Team button receives stronger emphasis than the smaller outlined header action. - **Supporting proof:** The whiteboard preview shows a grid of colorful notes and surrounding application tools. It illustrates collaboration rather than presenting actual email controls. ### Typography - **Family:** Text uses a conventional sans serif; exact family is unverified. The Miro wordmark is a brand asset. - **Headline:** Approximately 52 px bold with about 62 px line-height and compact neutral tracking. - **Paragraph:** Approximately 25 px, medium-looking weight, about 35 px line-height, in muted purple-gray. - **Buttons:** Primary label is approximately 25 px and medium weight; header action is approximately 20 px. Small former-brand lettering is uppercase with generous tracking. ### Colors & surfaces - **Measured colors:** Sampled image colors include cool background #F3F5F9, white #FFFFFF, product-canvas gray #EFEFEF, yellow #FAD033, and primary blue #3F52D9. - **Text:** Heading, brand, and outlined action use very dark navy; paragraph text uses a softer purple-gray. Exact text hex values were not independently sampled. - **Artwork accents:** Yellow, orange, and pink sticky notes create a warm progression inside the board image. Note shadows belong to the embedded product screenshot. ### Components - **Container:** Approximately 750 × 1050 px, white, with roughly 12 px corner radii and no prominent outer shadow. - **Primary action:** Approximately 276 × 75 px, solid blue, with a small 4–5 px radius and centered white label. - **Secondary action:** Approximately 160 × 60 px, white with a thin navy border and a small radius. - **Product preview:** Approximately 650 × 365 px, a landscape image with a gray canvas, narrow toolbars, and twelve notes arranged in four columns and three rows. - **Decorative circles:** Yellow disks vary substantially in diameter and clip at panel boundaries, creating a lively backdrop without additional text. ### Visual rhythm - **Alignment:** Main text, button, and preview share an x327 px left edge. The 50 px inset is consistent across the white panel. - **Spacing:** A large break separates the header from the headline; around 25–35 px separates headline, paragraph, and primary button. - **Balance:** Compact text content sits above a visually dense preview. White space around the invitation keeps the CTA easy to locate. ### Responsive - **Observed limit:** Only one email width is visible; actual mobile email behavior is unverified. - **Recommended fluidity:** Use a fluid email container with a maximum width, reduce side padding on small screens, and scale the product image proportionally. - **Recommended header:** Allow the logo and secondary action to stack if they collide. Reduce headline size while preserving readable body text and comfortable button targets. ### Adaptation guidance - **Preserve:** Retain one dominant invitation action, the navy/blue/yellow palette, and a real collaborative-board preview beneath the explanation. - **Email implementation:** Use robust email-compatible layout and inline styles, with live text for the message and actions and image alternatives for brand/artwork. - **Asset handling:** Keep decorative circles separate from essential text. Do not recreate miniature board tools as functional email UI. - **Validate:** Check image-blocked rendering, narrow screens, contrast, and link focus. Hover, loading, and invitation results are not visible. No team invitation was performed. 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.