Folk Comments Empty State

# Design from Reference: Folk Comments Empty State Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Folk - **Category:** Empty State - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbb9eed37e66e942ffba56_6acb707c3156cd8dbc479d7b_cms-b1d070b2b5e2cffa4273a0d2.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:** A light contact-management workspace uses white panels, gray icons/rules and a yellow comment illustration to clarify an empty state. - **Evidence:** The raster is 1440 × 821 pixels. Approximate CSS dimensions assume an unverified 1× capture density. ### Page composition - **Sidebar:** A roughly 240-pixel rail contains workspace, search/messages/settings and private groups, with an import-completion message at the bottom. - **Contact column:** A narrow profile area shows avatar placeholder, name/company, quick-action icons and vertically grouped contact fields. - **Activity area:** A wide right region contains interaction/comment/reminder tabs, a comment composer and centered empty-state message. ### Information hierarchy - **Contact identity:** The large contact name and company mark anchor the profile. - **Selected activity:** Comments has a dark underline and zero count; adjacent activity categories are lighter. - **Empty state:** A yellow speech-note illustration precedes Add comment and one explanatory sentence. - **Data fields:** Small uppercase gray labels separate company, notes, role, email, phone, birthday and groups. ### Typography - **Contact/title:** Approximately 24 pixels semibold; empty-state heading is around 24 pixels. - **Controls/body:** Mostly 13–14 pixels, with supporting copy in muted gray. - **Field labels:** Around 11–12 pixels uppercase bold with modest tracking. Exact sans-serif identity is unverified. ### Colors & surfaces - **Measured palette:** ICC-to-sRGB sampling identifies #FFFFFF as the canvas, #EBEBEC as selected/neutral areas, #6F7275 as supporting gray and #181A1B as dark text. - **Measured illustration:** #F2C447 is the yellow comment motif; #E5E7EB supports fine outlines. - **Treatment:** Flat surfaces and fine borders dominate; small yellow stars mark selected profile values. ### Components - **Group row:** Networking has a pale rounded selection background and right-aligned count. - **Composer:** A broad outlined text area contains placeholder, formatting icons and a disabled-looking Add comment action. - **Profile tools:** Three small square icon controls sit below the name; New field and Visible fields appear at the column bottom. - **Empty illustration:** A simple yellow square with a folded speech-tail shape is centered beneath the composer. ### Visual rhythm - **Three-part layout:** Sidebar, profile and activity regions use consistent vertical boundaries. - **Profile cadence:** Large gaps separate field groups, contrasting with compact activity tabs and composer tools. - **Empty canvas:** Broad whitespace reinforces the absence of comments rather than showing placeholder records. ### Responsive - **Observed scope:** Only a desktop empty-comment state is shown; populated threads and editing interactions are not visible. - **Recommended layout:** Collapse navigation and stack profile details above activity, preserving the selected tab and composer. - **Recommended access:** Provide labels for icon tools and readable disabled-state contrast. ### Adaptation guidance - **Contact pattern:** Separate identity/attributes from chronological activity, with explicit counts and an actionable empty state. - **Content fidelity:** Use sample contact values in reusable designs rather than copying personal information. - **Implementation:** Confirm font/scale, define comment focus/submission states and retain accessible formatting controls. 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.