Preview image. Unlock full-res
Scrollable vertical layout showcasing service offerings and UI mockups using soft orange, purple, and blue gradients with rounded icon badges and side-aligned cards.
Summary
A sectioned vertical showcase combining soft gradient backgrounds, rounded icon badges, and floating UI mockup cards to present services or features with sophistication.
Visual description
A portrait-format design layout shown in full scroll. The top introduces three rounded icon badges (pink, orange, blue) containing service symbols, aligned horizontally above light copy. The middle section features four floating UI mockup cards, each with a distinct gradient background (orange, blue, purple, lavender) and positioned at alternating left-right angles, creating asymmetric depth. Each card displays a simplified interface. The bottom section reverses to a dark gradient background (deep purple to black) with a white CTA button, returning to light copy with rounded gradient corner details. Throughout, the color palette emphasizes soft pastels transitioning between warm and cool tones, creating visual flow and hierarchy across the scrollable space.
Key takeaway
Layer stacked gradient sections with asymmetrically positioned cards to create depth on a flat plane. Use rounded icon badges as visual breakers between sections. Pairing soft background gradients with clear white space around UI elements keeps the layout sophisticated and uncluttered.
Reuse notes
Ideal for SaaS onboarding, service showcases, and membership or networking platforms. Works well on mobile due to vertical stacking. The asymmetric card placement suggests movement without animation. Ensure copy has sufficient contrast on gradient backgrounds.
