Asana
Email Header with Trial CTA
header Image CTA
Asana Email Components
Browse our collection of Asana-inspired email components. Each component is fully responsive and ready to use in your email designs.
4 components
Browse by
About Asana’s Email Design
Asana brings clarity and focus to email communications with clean, purposeful layouts that reflect their work management philosophy. Their emails feature the signature coral accent color, organized task-like structures, and clear visual hierarchy that helps teams stay aligned. Each email demonstrates how thoughtful design can make productivity tools feel approachable and empowering rather than overwhelming.
The brand’s email design emphasizes actionability and team collaboration. Asana emails use card-based layouts reminiscent of their task interface, clear progress indicators, and team-focused messaging that reinforces collaborative work. Their design balances professional B2B communication with a friendly, human approach that makes project management feel manageable.
Design Principles
- Clarity-focused hierarchy: Clean layouts with obvious primary actions and clear information structure
- Collaborative messaging: Team-centric copy and design that emphasizes shared progress and goals
- Purposeful color: Strategic use of coral and neutral palette to guide attention without distraction
- Progress visualization: Visual elements that show task completion, milestones, and team momentum
Key Components
Browse the collection above to explore task card layouts, team progress sections, feature announcement blocks, and collaborative CTAs—all inspired by Asana’s productivity-focused email design.
Using These Components
Each component is available in Figma and can be copied directly into your designs. They’re built with email-safe HTML and CSS, ensuring compatibility across all major email clients while maintaining Asana’s clean aesthetic.
Best Practices
- Design for action: Make primary CTAs obvious and create clear paths to task completion
- Show progress: Include visual indicators of completion, milestones, or team achievements
- Keep it organized: Use card-based layouts and clear sections like tasks in a project
- Balance professional and friendly: Maintain B2B credibility while being approachable and human
Frequently Asked Questions
How do I use Asana email components in Figma?
Click the "Copy Figma Component" button on any Asana component, then paste it directly into your Figma design file using Cmd+V (Mac) or Ctrl+V (Windows). The component will be ready to customize.
Are these Asana email components responsive?
Yes, all Asana email components are fully responsive and work across all major email clients including Gmail, Outlook, Apple Mail, and mobile devices.
Can I customize the Asana components?
Absolutely! Once copied into Figma, you can customize colors, fonts, spacing, images, and all other design elements to match your brand.
Do I need Emailify to use these components?
These components are designed to work seamlessly with the Emailify Figma plugin, which converts your designs to production-ready HTML email code. You can use them in Figma for free, and use Emailify when you're ready to export.