# Design from Reference: June Dashboard Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** June - **Category:** Table - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbbc796325e7e23e4c9760_6acbbbcaa4008ddb7475ea50_cms-e11ce611c4d87ea28d9f6a4b.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:** Airy analytics dashboard with understated borders and periwinkle accents. ### Page composition - **Canvas:** 1440 × 1037 screenshot pixels. A roughly 70 px icon rail anchors a wide Events workspace with header, recommendation banner, search, nine visible table rows, pagination, and corner chat. ### Information hierarchy - **Priority:** Page title and live-feed action establish context; the tinted recommendation banner precedes searchable event names, counts, user-triggered toggles, and muted Slack actions. ### Typography - **Scale:** Approximate screenshot sizes: title 22 px, body and row text 14 px, uppercase column labels 12 px. Sans serif font family and CSS scale are unverified. ### Colors & surfaces - **Palette:** Sampled sRGB #FFFFFF canvas, #F0F1FE recommendation fill, #F1F3F5 neutral accents, #5E79F4 and #A0ABF8 periwinkle shades. Secondary text is cool gray. ### Components - **Details:** Banner has approximately 8 px corners and a violet outline; search is about 32 px high. Event names use small white shadowed tags, toggles are compact pills, and rows have thin dividers. ### Visual rhythm - **Spacing:** Main inset is around 65 screenshot px after the rail; rows are roughly 65 px high. Broad whitespace prevents the data table from feeling dense. ### Responsive - **Adaptation:** Mobile is not shown. Collapse navigation and allow table scrolling while retaining event name/count visibility. ### Adaptation guidance - **Transfer:** Preserve the recommendation-to-data sequence, quiet separators, and accent toggles. Use actual event metrics and accurately distinguish available from disabled actions. 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.