# Design from Reference: Loops Write An 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:** Loops - **Category:** Text Editor - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acadbf4d05a3f53c0a8644a_6acadb4dafcaef5001d5e190_cms-06bb0af0a4e04cfa9eabaff2.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:** Distraction-free email campaign editor with white canvas, narrow workflow navigation and compact controls. ### Page composition - **Capture:** 2880 × 1804 screenshot pixels; estimated 2× CSS scale. - **Structure:** Icon rail, numbered Compose/Audience/Schedule/Send/Metrics sidebar and centered editor with campaign title, name/subject rows, formatting tools and empty body. ### Information hierarchy - **Priority:** Active Compose step and campaign metadata precede the writing area; dark Next button anchors progression. ### Typography - **Family:** Sans serif; exact family unverified. - **Estimated CSS sizes:** Workflow labels 16px, title 18px, field/body 14px and helper 12px. ### Colors & surfaces - **Measured palette:** White #FFFFFF, subtle #F9FAFB/#F3F4F6, rules #E3E7EB, navy #0F1828 and muted #99A3B0. - **Accent:** Orange brand mark. ### Components - **Elements:** Numbered steps, subject placeholder, image/layout/button/divider tools, undo/redo, details link and small utility icons. - **Estimated geometry:** Combined navigation 272px, editor width about 576px, 32px action height and 24px toolbar spacing. ### Visual rhythm - **Spacing:** Compact upper editor leaves a large uninterrupted writing canvas. ### Responsive - **Suggested adaptation:** Collapse navigation, keep workflow progress accessible and let editor fill width. Mobile behavior is not shown. ### Adaptation guidance - **Transfer:** Preserve a quiet composing surface and clear campaign-step progression. 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.