Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Conduktor Account Setup
Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation.
## Reference
- **Product:** Conduktor
- **Category:** Account Setup
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acb675f994832179b5605e4_6acb6573b226993977e07925_cms-34e3b0031f1793af0ce2ba92.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:** Bright onboarding form with violet progression and playful line-art illustration.
### Page composition
- **Canvas:** 2880 ร 1642 screenshot px. Brand/three-step header above split layout: personal form left and people-with-rocket illustration right.
### Information hierarchy
- **Priority:** Welcome heading and short helper introduce first name, last name, phone/country, agreement checkbox, and Continue. Welcome aboard is the active step.
### Typography
- **Scale:** Estimated CSS at assumed 2ร capture: heading 40 px bold, body 16 px, labels 14 px semibold, controls 14 px. Family unverified.
### Colors & surfaces
- **Palette:** Sampled sRGB #FFFFFF, fields #F9F8F9, black #000000, dark #1B1524, borders #E4E2E4, and violet #4E3FF1. Pale blue colors the rocket.
### Components
- **Details:** Estimated 432 CSS px form width, 36 px rounded fields, split phone row, red required markers, violet links/action, thin top gradient, and bottom-right chat.
### Visual rhythm
- **Spacing:** Broad outer margins, 24 px form-group gaps, and balanced illustration placement.
### Responsive
- **Adaptation:** Mobile is not shown. Stack illustration below form and keep phone controls usable.
### Adaptation guidance
- **Transfer:** Preserve clear required/optional fields and visible setup progress. Use actual personal-data requirements and consent language.
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.