What is Asana?
Asana's 2020 rebrand proved that productivity software doesn't have to feel urgent — a lavender-and-cream palette and a three-dot triangle turned a task manager into a calm, unhurried companion.
Asana in brief
Asana's visual identity is built on a deliberate contradiction: software designed to track deadlines and drive accountability that deliberately refuses to look hurried. The palette centers on a muted, dusty lavender purple — neither the cold violet of enterprise software nor the saturated lilac of consumer social apps, but something in between that reads as both professional and calm. Against this, a warm cream ground replaces the stark white of most productivity tools, softening every surface and inviting the eye to rest rather than scan.
Three accent colors — coral, a clear blue, and a warm yellow — appear together only in the iconic three-dots triangle mark, which has become the brand's most recognizable asset. Outside the mark, these colors operate as individual signals: coral for primary actions and warmth, blue for informational elements, yellow used sparingly as a highlight. The result is a palette that feels curated and intentional rather than varied or energetic.
Rounded geometry runs through every element of the system: buttons with generous corner radii, illustrated blobs that replace sharp-edged hero photography, soft gradient washes that tint entire page sections without harsh transitions. The overall effect is what the brand itself calls 'calm productivity' — a visual posture that says work can be organized without being stressful, and that clarity of focus is itself a form of rest.
Where does Asana come from?
Asana was founded in 2008 by Dustin Moskovitz, a co-founder of Facebook, and Justin Rosenstein, who had been an engineer at both Google and Facebook. The two left the social network with a specific conviction: that the tools people used to coordinate work were themselves creating more work. Internal task-tracking and communication overhead — the meetings about meetings, the email threads about email threads — had become a larger problem than the underlying tasks. Asana was conceived as a response to this overhead, a platform where work itself was organized transparently so that coordination conversations became unnecessary.
For its first decade, the company's visual identity was functional but unremarkable — a purple that read as generically 'tech' and a layout language that prioritized density over calm. By the late 2010s, as competitors multiplied and the broader SaaS market had grown visually sophisticated, Asana recognized that its product's philosophy needed to be expressed in its aesthetics. The company had long incorporated mindfulness practices into its work culture — a reflection of Moskovitz's interest in wellbeing — but this dimension was invisible in the interface.
In 2020, Asana engaged the London-based brand consultancy Wolff Olins to lead a comprehensive identity overhaul. Wolff Olins, whose portfolio includes landmark rebrands for companies including Tate, NYC, and GE, brought in typographer and identity designer Sagi Haviv to contribute to the project. The brief was to develop an identity that expressed the idea of 'calm productivity': that being organized should feel like relief, not pressure, and that a well-managed workflow is a form of mental clarity. The three-dot triangle mark — coral, blue, and yellow converging toward a common center — became the keystone of the new system, suggesting collaboration without hierarchy, balance without rigidity.
The timing of the rebrand had unexpected resonance. Released in early 2020, it arrived just as the global pandemic drove enormous numbers of knowledge workers into remote and distributed work arrangements. Tools for asynchronous coordination, shared task visibility, and structured project management suddenly moved from peripheral to essential. Asana's new visual identity — calm, spacious, and communicating clarity without urgency — turned out to be precisely the visual register that an anxious, newly distributed workforce responded to. The rebrand is now studied as a case of brand positioning and aesthetic decision-making that happened to be ideally suited to the historical moment in which it landed.
What defines the Asana look?
Dusty Lavender as Anchor
The primary brand color is a dusty, muted lavender purple that occupies the middle distance between cool and warm. It is saturated enough to read distinctly against neutral grounds but subdued enough to avoid the assertiveness associated with conventional tech purples. This specific tonal register — not quite corporate, not quite personal — is the identity's most deliberate achievement. It appears in navigation panels, gradient hero sections, and brand materials, always in a way that settles the eye rather than capturing it.
Cream Ground and Generous Whitespace
Rather than the clinical white used by most productivity and enterprise software, Asana's layouts rest on a warm cream ground that reduces eye strain over extended sessions and conveys a sense of considered craft. Whitespace is treated as a primary compositional element, not as the absence of content but as a signal of calm and organization. Sections breathe, cards have room around them, and density is consciously avoided even when content volume is high.
The Three-Dot Triangle Mark
The three dots — coral, blue, and yellow — arranged in a triangular formation are the system's most iconic element. Each dot is a solid circle of equal size; the three converge toward a shared center without touching, implying balance and mutual orientation. The mark is the only place in the identity where all three accent colors appear simultaneously. Outside the mark, coral, blue, and yellow function as individual semantic signals, never competing as a trio for the eye's attention.
Soft Gradients as Surface
Where most design systems of this era avoid gradients in favor of flat color, Asana deliberately embraces them — but in a tightly controlled register. Hero panels and large background sections use gentle tonal sweeps within a single color family, typically moving from the dusty lavender toward cream or from coral toward peach. These gradients are never aggressive or vivid; they function more like a wash of watercolor than a graphic gradient, adding atmospheric depth without introducing the visual tension that high-contrast gradients create.
Rounded Geometry Throughout
Hard corners are almost entirely absent from the Asana system. Every interactive element — buttons, input fields, cards, chips, tags — carries a rounded corner radius significant enough to read as a considered choice rather than a default. Illustrated elements in marketing materials are organic blobs and swooping curves rather than rectangles and polygons. This consistent commitment to soft geometry sets an emotional register: rounded forms are read cross-culturally as approachable, safe, and non-threatening — visual values that translate directly into the productivity-without-pressure brand promise.
Typography Balanced Between Warmth and Precision
The typefaces in the Asana system are humanist sans-serifs that carry warmth without sacrificing legibility at the small sizes required by dense interface layouts. Headlines are set with restrained weight contrast — large and clear but not aggressive. Body text is set at comfortable measures with generous line spacing, making long-form content in the product feel calm rather than compressed. The typographic system avoids both the cold rationalism of geometric sans-serifs and the quirky personality of display serifs, landing in a register that reads as trustworthy and approachable.
Illustration Over Photography
Marketing and onboarding materials rely heavily on custom illustration rather than stock or lifestyle photography. The illustration style uses the brand palette directly — muted lavender, coral, blue, and yellow on cream — with forms that echo the organic geometry of the identity: flowing shapes, stacked or nested blobs, and simplified figurative elements with rounded silhouettes. This approach ensures that every brand touchpoint feels cohesive and controlled, and avoids the tonal inconsistency that photography introduces when brand guidelines need to stretch across many different content contexts.
Who shaped Asana?
Moskovitz co-founded Facebook before leaving to start Asana with the specific goal of reducing the coordination overhead that enterprise software had normalized. His long-standing interest in mindfulness and organizational wellbeing — he has spoken and written extensively about sustainable work practices — shaped the brand's philosophical commitment to 'calm productivity'. The 2020 rebrand gave visible form to values that had been embedded in the company's culture since founding but had never been expressed in its visual identity.
Rosenstein, who had worked on Google Drive and the Facebook Like button before co-founding Asana, brought a product philosophy centered on reducing friction and invisible overhead in collaborative work. His technical and philosophical contributions to Asana's early architecture — particularly the idea that every task should have exactly one owner and that all relevant information should live in one place — provided the structural rationale that the 2020 visual identity later tried to make visible through clarity, spaciousness, and the absence of visual noise.
The London and New York-based brand consultancy Wolff Olins led the 2020 rebrand that produced the current Asana identity. Founded in 1965, Wolff Olins has a history of high-profile brand systems including the 2012 London Olympics identity and rebrands for Tate, Orange, and GE. For Asana, the firm developed the three-dot triangle mark, the extended palette, and the foundational design principles that position the brand as wellness-adjacent and emotionally calm — a significant departure from the competitive, achievement-oriented visual language common in enterprise productivity software.
Sagi Haviv, a partner at the identity firm Chermayeff and Geismar and Haviv, contributed to the mark development phase of the Asana rebrand. Haviv and his firm are known for logo systems that achieve immediate recognition through radical simplicity — their portfolio includes the US Open tennis logo, the NBC peacock, and brand marks for Harvard University Press and the Library of Congress. His involvement brought a rigorous logo-design philosophy to the three-dot triangle mark, ensuring that the icon would function at the smallest display sizes and in single-color contexts without losing legibility or meaning.
The broader cultural context that made the Asana rebrand legible and persuasive was a movement among knowledge workers and technology companies toward integrating wellbeing and mindfulness into professional life. Companies including Google, Salesforce, and Headspace had normalized meditation rooms, burnout conversations, and wellness benefits by the late 2010s. Asana's identity drew directly on this cultural shift — positioning calm, spaciousness, and the absence of visual stress not as aesthetic choices but as statements of values. The rebrand arrived as a fluent translation of an already-established cultural vocabulary into a software product's visual language.
How do you use Asana today?
The Asana identity style is one of the most directly transferable contemporary brand aesthetics into presentation and interface design work, because its underlying logic — calm over urgency, spaciousness over density, soft palette over high contrast — is legible and practical rather than art-historical. Applying it well requires internalizing the core tension it manages: the design must feel organized and precise enough to communicate professional capability, while remaining warm and unhurried enough to communicate psychological safety. Achieving that balance is the central design challenge, and every decision should be evaluated against it.
For presentation slides, the Asana approach rewards a cover page built around the dusty lavender as a large, breathing field — the title in a humanist sans-serif at generous scale, positioned with asymmetric calm rather than centered symmetry. Coral or blue can anchor a single accent element: an underline, a geometric block, or the three-dot mark itself if the context is brand-referential. Content slides should use the cream ground throughout, with generous margins and minimal content per slide — one idea, one supporting visual, clear typographic hierarchy. Data slides benefit from a restrained approach: a single chart type per slide, bars or segments colored using one accent from the palette, with the cream ground allowing the data shape to read cleanly without visual competition.
For web interfaces and digital dashboards, the style translates particularly well to tools where users spend extended sessions. The cream background reduces cognitive fatigue compared to pure white; the muted lavender in a sidebar or navigation panel separates function zones without the harsh contrast of dark-mode navigation. Interactive states — hover, focus, active — work well using the coral as the primary action color and the blue as the informational or secondary state. Pricing and feature comparison pages suit this palette because the soft hues allow tier differentiation through tonal variation within the lavender family without reaching for heavy black headers or aggressive color blocking. Rounded card components with minimal border treatment and no drop shadow, or a very soft ambient shadow, maintain the unhurried quality of the system.
For editorial and marketing design, the style functions well in long-form content and campaign work where sustained reading comfort is important. A Asana-inflected editorial layout uses generous line spacing and a comfortable measure for body text, with the cream or near-white ground serving as the continuous thread. Section headers in muted lavender or deep coral provide hierarchy without aggression. Full-width illustrated panels — using the organic blob and rounded-form illustration style with the brand palette — break up text-heavy spreads and maintain visual richness without introducing photographic tonal inconsistency. Campaign materials work particularly well with the three-dot motif used as a compositional device: three circles of varying sizes placed with considered asymmetry can anchor a cover, a social card, or a marketing banner while communicating brand recognition.
A common mistake when applying this aesthetic is interpreting 'calm' as permission for low contrast and poor readability. The Asana system achieves calm through palette and spacing, not through reduced contrast between text and ground — body text must still read cleanly, interactive elements must still signal affordance, and hierarchy must still be immediately legible. A second frequent error is overusing the gradient: the soft tonal washes work only in large hero and background contexts where they have room to breathe; applied to smaller elements like buttons, tags, or cards, they undermine the system's quiet authority and make individual components look fussy rather than considered. The three accent colors should also remain disciplined — coral, blue, and yellow together are reserved for the mark only, and deploying all three in the same layout panel creates visual noise that contradicts the brand's central promise.
Asana — FAQ
Is Asana purple a brand-specific color or a general design trend?
Both. The specific tonal register of Asana's lavender — dusty, muted, warm-leaning — is a deliberate brand choice made by Wolff Olins in 2020. But the broader embrace of soft purple and lavender tones in SaaS and technology branding was also a trend across that period, as companies sought to distinguish themselves from the saturated blue-and-green defaults of earlier enterprise design. Asana's version is notable for how precisely calibrated it is: not quite cool enough to feel remote, not quite warm enough to feel casual, occupying a specific tonal position that has become strongly associated with the brand. If you apply a more generic lavender, the result will feel trend-responsive but not brand-specific.
Can this style work for a product that is not a productivity tool?
Yes, with some recontextualization. The Asana aesthetic carries an implicit message — organized, professional, psychologically safe — that translates well to any product that benefits from those associations: project management tools, healthcare applications, financial planning platforms, educational products, or any service where trust, clarity, and reduced cognitive load are valued. It is less well-suited to products that need to project energy, excitement, or cultural edge: sports and gaming brands, nightlife and entertainment, fast fashion, or consumer tech products that compete on boldness and novelty. In those contexts, the palette's deliberate calmness will read as a mismatch rather than a differentiator.
How do I use the three-dot motif without looking like I am copying Asana?
The three-dot triangle is Asana's registered trademark, so direct reproduction of that specific configuration — equal-sized circles in coral, blue, and yellow arranged in a convergent triangle — should be avoided in any professional context. However, the underlying compositional logic of three balanced elements, or circular dots as accent geometry, can be adapted. Change the color assignment to fit your own palette, vary the sizes to create visual weight hierarchy, or shift the arrangement from triangular convergence to linear or scattered distribution. The compositional rhythm of three is a useful tool; the specific mark is protected. Treated as a compositional principle rather than a copied symbol, the approach remains useful.
Does this style work well in dark mode?
The Asana identity was designed as a light-ground system, and a direct dark-mode inversion creates challenges specific to this palette. The dusty lavender that reads as refined and calm on a cream ground tends to look washed out against dark backgrounds; the coral, which functions as a warm accent on light grounds, can become visually dominant to the point of harshness against dark. A considered dark adaptation would not simply invert the palette but would shift to a very deep, near-black version of the lavender as the ground color, use cream or off-white for body text, and reserve the coral and blue for interactive states only. The soft gradient washes that define the light-mode version's atmospheric quality are difficult to translate into dark contexts and may need to be replaced with flat tonal panels.
What distinguishes this style from generic 'soft UI' or pastel design trends?
Soft UI and pastel trends in the early 2020s typically combined multiple pastel hues — often four to seven colors drawn from across the spectrum — with high-saturation glassmorphism effects, blurred backgrounds, and diffuse light simulations. The Asana aesthetic is more restrained: it uses only one dominant hue (the dusty lavender), limits accents to three colors that appear together only in the mark, and avoids glassmorphism entirely in favor of flat or softly-gradated surfaces. The difference is between a palette designed by a specialist brand consultancy with a specific philosophical brief and a general stylistic trend. The Asana system has internal logic and constraints; soft UI trends tend to accumulate effects without a unifying principle. When applying the Asana aesthetic, the discipline of restraint — knowing what not to add — is what separates coherent execution from a generic pastel layout.
Related design styles
Glean Enterprise-SearchWarm enterprise AI. Cream ground, yellow focus, sage graph nodes, and sans ca…
Android Bugdroid GreenFriendly tech, reduced to geometry. Vivid green pops from Grey 900 and rounde…
GitLab 2023DevOps in daylight. Tanuki orange-to-purple gradient, Inter, warm enough for…
LinkedInCorporate trust, digitized. Authoritative blue frames white cards on warm cre…
MongoDB Leaf GreenDisciplined green, open warmth. Forest leaf forms and Spring accents breathe…
Stripe 2024Trust earns its glow. Indigo mesh, neutral type, and whisper cards float on n…