Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Billflow Signup Page
Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation.
## Reference
- **Product:** Billflow
- **Category:** Signup
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acacfa11025e911ae50eb8e_6acacf36ba38b07cf05cf1ed_cms-c0cfc2686293439d4ef2296d.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:** Benefit-led signup with pale blue form backdrop and restrained blue actions.
### Page composition
- **Canvas:** 1440 × 800 screenshot px. White left column with Servicebot logo and three benefits; pale right region with dotted decoration and centered white signup card.
### Information hierarchy
- **Priority:** Benefit statements support the Sign Up form, which has introductory terms/login link, full name, work email, and Register.
### Typography
- **Scale:** Approximate screenshot heading 32 px bold, benefit headings 18 px, body 14 px, form labels 14 px. Sans serif family/CSS scale unverified.
### Colors & surfaces
- **Palette:** Sampled sRGB #FFFFFF, #ECF1F5, input #FBFDFF, blue #4C82FB, #EBF0F4, and pale dot #D4E6F5.
### Components
- **Details:** Approximately 440 screenshot px card width, 10 px corners, soft shadow, 48 px fields, blue circular benefit icons, and full-width Register.
### Visual rhythm
- **Spacing:** About 24 px card padding, 20 px field gaps, and broad 48 px benefit spacing.
### Responsive
- **Adaptation:** Mobile is not shown. Stack a compact benefits introduction above form.
### Adaptation guidance
- **Transfer:** Preserve short two-field registration and supporting benefits. Replace pricing-model/test-mode claims with verified product terms.
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.