Slack Weekly Summary

# Design from Reference: Slack Weekly Summary Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Slack - **Category:** Activity Summary Email - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62ecad825cf5980598c2e4cf_1659677227596-5eafdeb8b41a9404a7c2a30a_screencapture-mail-google-mail-u-0-2020-05-04-11_20_42.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:** Calm weekly-summary email with white content cards on a very light-gray canvas. - **Character:** Black text, teal links, subtle section rules, small report illustration, and simple bubble chart. ### Page composition - **Canvas:** 1086 × 1545 screenshot px. - **Column:** Approximately 646px wide, centered. - **Top:** Slack mark above first rounded card. - **Cards:** Workspace summary and roles; activity paragraph/chart; plan information. - **Footer:** Thin multicolor diagonal-stripe border across the lower edge. ### Information hierarchy - **Primary:** Date range and weekly summary. - **Section headings:** Bold labels identify membership and administrative roles. - **Metrics:** Selected quantities are bold inline rather than isolated KPI tiles. - **Chart:** Bubble size and color visualize activity by week/day. - **Links:** Teal invitations, admin-list, stats, and plan links. ### Typography - **Family:** Arial-like sans serif; exact family unverified. - **Date heading:** Approximately 20 screenshot px, bold. - **Body:** Approximately 17–18px with 24px line-height. - **Section labels:** Approximately 18px, bold. - **Chart labels:** Approximately 14–16px, muted. - **Precision:** Font sizes are screenshot estimates. ### Colors & surfaces - **Canvas:** #F9F9F9. - **Cards:** #FFFFFF. - **Text:** Near-black. - **Links/chart:** Teal-blue, with a teal-to-purple legend gradient; exact flat tokens unverified. - **Dividers:** Thin pale gray. - **Footer motif:** Small yellow, blue, green, and magenta diagonal strokes. - **Precision:** Large sampled surfaces are reliable; text and chart shades vary with compression. ### Components - **Cards:** Approximately 8px radius, about 50px padding. - **Header illustration:** Small circular report icon above centered date. - **Role list:** Simple bullet with bold role count. - **Chart:** Week rows, day columns, variable circular markers, and small color legend. - **Plan block:** One paragraph with bold plan name and inline link. ### Visual rhythm - **Spacing:** Approximately 16px between cards; generous gaps within the first card. - **Alignment:** Body text and section rules share left/right insets. - **Hierarchy:** Inline bolding conveys metrics while retaining a conversational email tone. ### Responsive - **Observed:** Email capture only. - **Recommendation:** Use fluid centered width, smaller side padding, and responsive chart image. - **Typography:** Preserve readable text and avoid fixed line breaks. ### Adaptation guidance - **Preserve:** Weekly date framing, conversational metrics, distinct cards, and quiet links. - **Privacy:** Replace member names and workspace details with supplied data. - **Metrics:** Use actual summary values; do not transfer example counts or historical plan terms. - **Chart:** Provide meaningful labels and alternative text for the intended dataset. 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.