# Design from Reference: Supabase Empty Project 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:** Supabase - **Category:** Empty State - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acadcb68c9a73ab05f1320f_6acadc1683d98bb981885551_cms-2e3b0c466ddbae635928647b.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 - **Style:** Extremely sparse dark project dashboard with emerald creation actions. - **Character:** Flat charcoal canvas, thin dividers, compact sidebar, and centered empty state. ### Page composition - **Canvas:** 2880 × 1642 image px; CSS estimates assume an unverified 2× capture. - **Sidebar:** Approximately 255 CSS px wide with projects, organizations, account, docs, and logout. - **Main:** Breadcrumb, small New project action, organization heading, and wide dashed-outline empty-state region. - **Utilities:** Help, feedback, and notification controls upper-right. ### Information hierarchy - **Primary:** No projects state and central New Project action. - **Context:** Organization heading and breadcrumb. - **Secondary:** Duplicate small creation action above empty panel. ### Typography - **Family:** Compact sans serif; exact identity unverified. - **Organization heading:** Approximately 18 CSS px. - **Empty-state title:** Approximately 16px. - **Body/navigation:** Approximately 14px. - **Precision:** Values and assumed 2× are estimates. ### Colors & surfaces - **Canvas:** #1C1C1C. - **Borders:** #2E2E2E. - **Emerald:** #009C67. - **Controls:** #232323. - **Muted text:** #BBBBBB. - **Primary text:** #EDEDED. - **Precision:** Sampled screenshot colors. ### Components - **Empty region:** Wide low-height dashed border, small radius. - **Actions:** Compact green rounded rectangles; central action includes plus. - **Sidebar:** Text groups separated by full-width thin rules. - **Utility buttons:** Small outlined rectangles/icons. - **No data cards:** Lower canvas remains empty. ### Visual rhythm - **Whitespace:** Most of viewport unused, emphasizing first-project creation. - **Alignment:** Heading and empty container share main inset. - **Density:** Compact navigation contrasts with minimal main content. ### Responsive - **Observed:** Desktop only. - **Recommendation:** Collapse sidebar and maintain clear centered creation action. - **Empty state:** Let explanatory sentence wrap. ### Adaptation guidance - **Preserve:** Obvious first action and minimal empty-state hierarchy. - **Privacy:** Replace organization/account identity. - **Behavior:** Project creation and navigation are not demonstrated. 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.