# Design from Reference: Supabase Insert Row 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:** Add & Edit - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acadcbe8c9a73ab05f1336c_6acadc25fbf1299940ac14c9_cms-85d6c30ca5174719801d1b73.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 dense dark database editor uses near-black canvas, charcoal controls, fine grid lines, and green insertion/status accents. - **Evidence:** The screenshot is 2880 × 1642 px, inspected at 1400 px width. Dimensions below estimate a 1440 px CSS layout at 2× capture; ratio is unverified. - **State:** The Insert menu is open above an empty table. ### Page composition - **Global rail:** A narrow left icon strip provides product navigation. - **Table sidebar:** A roughly 255 CSS px panel contains schema selector, new-table action, search, and one selected table. - **Main header:** Organization/project breadcrumbs sit above toolbar and data/definition controls. - **Grid:** Column headers span the workspace; no records appear beneath them. - **Popover:** The Insert dropdown floats below the green toolbar button with three choices. - **Pagination:** A compact bottom bar shows page navigation, rows-per-page, and zero records. ### Information hierarchy - **Context:** Table-editor label, breadcrumbs, schema, and selected table establish location. - **Primary action:** Green Insert is the strongest toolbar control. - **Menu:** Each option has a line icon, brighter title, and muted helper sentence. - **Grid metadata:** Column names are brighter than small datatype labels. - **Status:** A green lock/status label appears near API and data controls. ### Typography - **Family:** A neutral interface sans serif is used, with technical datatype text. Exact identity is unverified. - **Page label:** Approximately 18 CSS px medium weight. - **Toolbar/menu:** Around 13–14 px; helper lines are muted at a similar scale. - **Grid headers:** Approximately 12 px semibold names with smaller datatype labels. - **Pagination:** Compact 12–13 px labels and counts. ### Colors & surfaces - **Measured palette:** Source samples include #1C1C1C, #232323, #2E2E2E, #222222, #1B1B1B, and #3E3E3E. - **Semantic accent:** Green identifies brand, selected table icon, insertion action, and security/status text. - **Text:** Light gray primary labels contrast with dimmer helper/datatype text. - **Separation:** Fine dark-gray rules divide rail, sidebar, toolbar, grid columns, and pagination. ### Components - **Insert control:** Small green rounded rectangle with chevron and white label. - **Dropdown:** Approximately 255 × 170 CSS px, charcoal, thin outlined, with three stacked icon/title/helper rows. - **Sidebar controls:** Compact schema dropdown, outlined new-table action, search field, and selected table row. - **Grid headers:** Checkbox gutter, key icon, column name/datatype, and trailing chevrons define each header cell. - **View switch:** Data and Definition controls share a compact segmented region. - **Pagination:** Small arrow buttons, page field, rows dropdown, and record count align left along the bottom. ### Visual rhythm - **Density:** Tight toolbars and sidebar controls contrast with the enormous empty grid region. - **Alignment:** Grid headers begin directly below the toolbar and align to fine vertical rules. - **Menu spacing:** Icons occupy a narrow left column; titles/helpers align consistently beside them. - **Canvas:** Minimal decoration keeps attention on table structure and insertion options. ### Responsive - **Observed limit:** Only desktop is shown; mobile/grid behavior is unverified. - **Recommended layout:** Collapse side navigation and preserve horizontal grid scrolling. - **Recommended menu:** Keep the dropdown within viewport bounds and maintain readable helper text. - **Recommended access:** Support keyboard menu navigation and clear focus without relying solely on green. ### Adaptation guidance - **Preserve:** Keep the compact technical hierarchy, distinct table/sidebar regions, and clear insertion entry point. - **Implement:** Use accessible menus, grid headers, named icon actions, and explicit empty-state metadata. - **State discipline:** The image shows an open insertion menu, not an inserted row or completed import. - **Validate:** Confirm fonts, CSS scale, grid overflow, empty-table behavior, and menu focus. Do not infer live database security from screenshot status text. 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.