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: Prelude Add Number
Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation.
## Reference
- **Product:** Prelude
- **Category:** Add & Edit
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/697b763b56f96503e83107bf_s-Mh8EyTJMFipxLgHkMuo7WZDuLm0VoTU4gtIYKoU1A.avif
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 stepped onboarding flow. Numbered green circles (1 through 4) create a clear vertical progression that feels approachable, not overwhelming. Each step is an expandable accordion, which keeps the page from becoming a wall of forms. Step 4 is open, revealing the allow list setup area with an empty state illustration that's minimal but effective.
The Modal Does Its Job
That "Add Number" dialog is dead simple. Phone input with a country selector, two buttons, done. The hierarchy is obvious. "Add Number" gets the dark filled button, "Cancel" is text-only. No confusion about the primary action. The placeholder text shows the expected format, which is a small but thoughtful touch.
Restrained Palette, Strong Hierarchy
The color story is basically white, light gray, and green. Typography is clean sans-serif with good weight contrast between headings and body text. The top nav uses a pill-shaped green badge for "Verify API" that pops against the neutral toolbar. Balance indicator top-right showing โฌ0.00 keeps billing visible without being pushy. That "Skip to Dashboard" escape hatch at the bottom is a smart pressure release valve.