# Design from Reference: Fernand Inbox Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Fernand - **Category:** Inbox - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbbd9cd6be908889c4e514_6acbbcc35fa786bc87aa0901_cms-78e9784c761a4ecefdc243da.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:** Exceptionally quiet support inbox with a thin pale rail, restrained navy text and generous blank space. ### Page composition - **Capture:** 1440 × 821 screenshot pixels; estimated CSS scale approximately 1×. - **Structure:** Narrow left rail with mascot, trial/upgrade and avatar; main centered list has Inbox/Waiting/All tabs, sort/search/new-message tools and three conversation rows. ### Information hierarchy - **Priority:** Subject lines lead each row, sender sits below and relative time aligns at the far right. Active Inbox tab and count define context. ### Typography - **Family:** Sans serif; exact family unverified. - **Estimated CSS sizes:** Tabs/subjects 16px, sender 14px and timestamps 12px. ### Colors & surfaces - **Measured palette:** White #FFFFFF, rail #F7FAFC, rules #E4E6EB, avatar tint #F9ECD5, count tint #EAEDF8 and subtle #F4F5F7. ### Components - **Elements:** Count badges, sort dropdown, square search/compose controls, small mascot avatars, row dividers and outlined Upgrade pill. - **Estimated geometry:** Rail 104px, list width approximately 920px, rows 80px high, 36px tools and 4px control radii. ### Visual rhythm - **Spacing:** Sparse three-row list occupies only the top; ample lower white space reinforces calm prioritization. ### Responsive - **Suggested adaptation:** Collapse rail, wrap tabs/tools and keep timestamps secondary to subjects. Mobile behavior is not shown. ### Adaptation guidance - **Transfer:** Preserve the subject/sender/time hierarchy and restrained chrome. Add density only as real conversation volume requires. 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.