Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Customer.io Contact Table
Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation.
## Reference
- **Product:** Customer.io
- **Category:** Table
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6aca27efaca7079066e8e8e2_6aca27110ec993085a6cfe18_cms-6de385069c00ba8eb3462155.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 customer-contact dashboard uses a dark teal top bar, pale workspace and a plain white data table.
- **Capture scale:** The screenshot measures 2880 × 2452 pixels. Approximate CSS dimensions assume a 1440px viewport at 2× density; this is unverified.
- **Tone:** Compact filters and a spacious two-column list favor operational clarity.
### Page composition
- **Global bar:** Workspace/test-delivery status sits left, with trial/upgrade/help and utility icons right.
- **Navigation:** A narrow icon rail precedes a wider Journeys sidebar containing product destinations.
- **Main header:** People sits above export/add actions and email-address/conditions filters.
- **Table tools:** People count and Merge sit left of view/pagination controls.
- **Contact list:** A white table contains selection checkboxes, email entries and created-time values.
- **Bottom:** Pagination repeats below the table, with small version/brand text at the workspace edge.
### Information hierarchy
- **Current area:** People is highlighted in the sidebar and repeated as the page heading.
- **Filtering:** Email address is selected beside Conditions; a search field appears below.
- **Primary action:** Add People is dark filled; Export to CSV and Merge are outlined.
- **Data:** Twenty-two contacts appear, with most created-time cells shown as dashes and one relative timestamp.
- **Test context:** A pale green badge explicitly identifies Test Delivery Mode.
### Typography
- **Family:** A neutral interface sans-serif is visible; exact identity is unverified.
- **Heading:** Approximately 18px CSS semibold.
- **Navigation:** Approximately 14px regular-to-medium.
- **Table:** Approximately 14px, with compact uppercase headers around 11px.
- **Filters:** Small uppercase labels and 14px control text.
- **Footer metadata:** Approximately 12px muted text.
### Colors & surfaces
- **Main surface:** Sampled #FFFFFF supplies table and navigation.
- **Workspace:** Sampled #F8F9F9 supplies pale background.
- **Top bar:** Sampled #00282C supplies dark teal.
- **Selected row:** Sampled #EAF0F1 supplies the People navigation state.
- **Text:** Sampled #3B4F50 and #60787B supply dark and muted teal-gray text.
- **Status:** Sampled #DDFFC8 supplies the test/upgrade green accent.
- **Borders:** Sampled #C6D7D8 contributes to thin control/table outlines.
### Components
- **Search:** A compact rectangular field includes a magnifier and email-search prompt.
- **Filter tabs:** Two small bordered segments distinguish email address and conditions.
- **Data table:** A rounded thin outline frames a header and evenly spaced checkbox/email rows; emails include small right chevrons.
- **Pagination:** Four small outlined arrow controls sit beside a range count.
- **Actions:** Export/Add use dropdown chevrons; Merge is a smaller outlined rectangle.
- **Sidebar:** Line icons and labels form compact rows, with pale selected fill.
- **Status badge:** A green dot accompanies the test-delivery label.
### Visual rhythm
- **Main inset:** Around 16px separates the workspace content from the sidebar.
- **Row cadence:** Contact entries repeat roughly every 37px.
- **Control layers:** Heading, filters, count/tools and table form distinct horizontal bands.
- **Whitespace:** The sparse created-time column leaves broad open space across the table.
- **Consistency:** Top and bottom pagination align to the same right edge.
### Responsive
- **Evidence limit:** Only desktop is observed; filtering and contact actions are unverified.
- **Navigation recommendation:** Collapse the sidebar into a drawer.
- **Table recommendation:** Preserve email readability with controlled horizontal scrolling.
- **Controls recommendation:** Wrap filter/action groups rather than compressing labels.
- **Selection recommendation:** Maintain accessible checkbox targets.
### Adaptation guidance
- **Data semantics:** Use table headers, row-specific selection labels and explicit pagination.
- **Privacy:** Use representative contact information in demonstrations.
- **State clarity:** Keep test-delivery context visible through contact actions.
- **Accessibility:** Label search and icon-only controls and provide focus states.
- **Scope:** The screenshot shows contact management only; no export, merge or messaging action was performed.
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.
.webp)
.avif){kind=small}
