Generate a new design based on this screen using your own content.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
# Design from Reference: Customer.io Welcome Screen
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:** Welcome Screen
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6aca27eeaca7079066e8e8bf_6aca27139784a71bf8500282_cms-6b0539a8bf4aef1c772b0ecf.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
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.
First thing you notice is that green progress bar and the satisfying column of checkmarks. Customer.io's onboarding dashboard nails the "you're almost there" feeling without being pushy. The setup list on the left is dead simple. Green circle icons with checks. Nested items under "Setup messaging channels" for Slack, In-App, and Push. It breaks a complex process into small wins.
Dark Sidebar, Light Content, Clear Hierarchy
The dark navy sidebar with teal accents gives the navigation real weight. It contrasts hard against the white content area, making the welcome message pop. Typography is clean and confident. "Welcome to Customer.io, Antoine!" feels personal. The underline on the name is a small touch that adds warmth. Body text stays minimal and scannable.
That Video Embed Does Heavy Lifting
The embedded Journeys video is the visual anchor of the whole page. It shows the actual product with workflow diagrams, channel options, and campaign categories. Smart move. Instead of explaining features in paragraphs, they just show the tool in action. The green "Get started" button sits quietly below, ready when you are.