# Design from Reference: Moss Workspace team members Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Moss - **Category:** Team Members - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acf52571f4e2219bc53af27_rpImP5RhqY2HEGq2WpVyysWF4PVDkbkfkUS9lOgLD20.png 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:** Minimal dark team-settings page with mint upgrade action and one member row. ### Page composition - **Canvas:** 2880 × 1624 image px; CSS estimates assume unverified 2×. - **Sidebar:** Approximately 255 CSS px wide with Project/Workspace/Account groups. - **Main:** Team title/subtitle and one wide member card. - **Header:** Workspace/project breadcrumb. ### Information hierarchy - **Primary:** Team heading and member count. - **Action:** Mint Upgrade to Invite team member. - **Row:** Avatar, identity, You badge, and Owner role. ### Typography - **Family:** Neutral sans serif; exact identity unverified. - **Title:** Approximately 24px CSS. - **Body:** Approximately 14px. - **Group labels:** Approximately 10px uppercase/letter-spaced. - **Precision:** Estimated under 2×. ### Colors & surfaces - **Canvas:** #0A0A0A. - **Card:** #111111. - **Mint:** #ABE6C7. - **Selected nav:** #181818. - **Borders:** #242424. - **Secondary:** #A3A3A3. - **Precision:** Flat samples. ### Components - **Card:** Thin outline, approximately 12px radius. - **Avatar:** Small outlined initial circle. - **Badge:** Dark outlined You chip. - **Upgrade:** Mint rounded rectangle, black label. - **Sidebar:** Small outline icons and group dividers. ### Visual rhythm - **Whitespace:** Large empty lower canvas. - **Alignment:** Card/title share inset; role at far right. - **Contrast:** Mint action isolated against monochrome page. ### Responsive - **Observed:** Desktop only. - **Recommendation:** Collapse sidebar, wrap invite CTA, and stack member details on narrow screens. ### Adaptation guidance - **Preserve:** Member identity/role clarity and gated-invitation action. - **Privacy:** Replace names/emails. - **Behavior:** Upgrade/invitation actions unverified. 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.