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: Asana Integrations 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:** Asana
- **Category:** Integrations Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acad96ebd9ce0e960551ee2_6acad8e683d98bb98187f6a7_cms-fb94bb831bc244cc8cfbcfcd.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.
Asana’s Microsoft Apps integration page epitomizes modern SaaS minimalism fused with professionalism. Clean white space dominates, interspersed with bursts of Asana’s signature vibrant gradients—infusing energy without overwhelming the content. The overall mood is confident yet welcoming, instilling trust through clarity and simplicity. ###
Layout and Structure
The page unfolds with a bold hero section featuring a concise headline, subtext, and an eye-catching CTA button, immediately orienting visitors. Flowing below are clearly segmented sections: a visual integration showcase, interactive feature highlights, and partnership cues. The absence of clutter and the logical arrangement of sections make for an intuitive browsing journey. ###
Visual Elements
Illustrations use flat design and soft shadows to underscore collaborative workflows. Branded Microsoft and Asana logos reinforce credibility. Dynamic screenshots and product interface elements demonstrate integration points. There are no intrusive videos or animations—motion is subtle, supporting information without distraction. ###
Color Palette and Typography
A luminous palette of whites, violets, and lively accent gradients conveys freshness and dynamism. Asana’s signature orange and pink gradients draw user attention to calls to action. Typography is crisp—rounded sans-serif fonts for headlines (with generous sizing, strong hierarchy) and clean body text for readability. ###
User Experience Patterns
Sticky top navigation and persistent CTAs ensure users can act from anywhere on the page. Strategic anchor links guide exploration, while form fields for adding the app are streamlined and visible above the fold. Microinteractions highlight clickable areas, reinforcing user engagement. ###
Unique or Notable Design Choices
Standout features include layered card-style interface previews, visually mapping out integration workflows, and consistent use of brand color gradients. The imagery and structure work harmoniously to amplify the feel of effortless collaboration, positioning the product as both powerful and approachable. The tone radiates reliability with a subtle spark of creativity—ideal inspiration for SaaS teams aspiring to balance efficiency with personality.