Our logo

The “three dots” with a glow of energy in the center are a symbol of collaboration: three forms coming together to create something greater.

Logo spacing

Our primary logo is a horizontal lockup of our mark and logotype. When space is limited, use the vertical version. To ensure the logo stands on its own, please leave at least one “a”s worth of space around it.

Primary - Horizontal

Primary - Horizontal

Secondary - Vertical

Secondary - Vertical

Logo colors

Use these alternate logos on dark colored or gradient backgrounds, or for one color printing. Please default to our primary logo (above) before select an alternate logo.

Full Color on Navy

Full Color on Navy

White on Brand Gradient

White on Brand Gradient

White on Navy (only use when one-color printing, never on web)

White on Navy

Navy on White (only use when one-color printing, never on web)

Navy on White

Asana colors

Energizing color palette

Dark Green #37c597
Dark Teal #179dba
Dark Purple #4f4da7
Dark Gold #fd9a00
Dark Coral #e63b3b

Dark shades should be used to create contrast or depth where needed and for text when on white.

Core Green #3be8b0
Core Teal #1aafd0
Core Purple #6a67ce
Core Gold #ffb900
Core Coral #fc636b

The core shades from which the other colors are derived.

Bright Green #3bf7d1
Bright Teal #02ceff
Bright Purple #a177ff
Bright Gold #ffd200
Bright Coral #ff6d92

Bright shades are used to create extra energy such as hover states and activating illustrations.

Med Green #9dfbe8
Med Teal #80e6ff
Med Purple #d0bbff
Med Gold #ffe87f
Med Coral #ffb6c8

Medium shades are used sparingly, and only paired with the light shades as a border or icon.

Faded Green #c3eddf
Light Green #ebfcf7
Light Teal #e8f7fb
Light Purple #f0effa
Light Gold #fff8e5
Light Coral #feeff0

Light shades are used as color fills in places where a more subtle energy is required.

Gradients

In general, the gradient should flow from dark in the bottom left of the object to bright in the top right. However, in cases where directionality or focus is needed, the bright can be placed in any of the four corners and flow to dark in the opposite corner.

Neutral palette

The core color palette is mostly neutral, but shouldn’t be considered “shades of gray”. Pages should be mostly white, using the primary grays for contrast and focus.

White #ffffff
Gray 2 #eeeef0
Navy #273347
Navy Text #8897A3
Navy Title #b3bcc4

Secondary Grays

Gray 1 #f8f8f9
Gray 2 #eff0f1
Gray 3 #e1e2e4
Gray 4 #cdcfd2
Gray 5 #b9bcc0
Gray 6 #a1a4aa
Gray 7 #898E95
Gray 8 #676d76
Gray 9 #49505b
Gray 10 #1b2432

backgrounds

borders

text

borders

text

Log in

or

Forgot your password?

Sign Up

Please use your work email address, so we can connect you with your team in Asana.

Sign Up

Please use your work email address, so we can connect you with your team in Asana.

Enter a work email address

This email looks like a personal email address. If you want to be connected with your team, please use your work email address.

Enter a work email address

Why are we asking? Continue with my email

Oops, we couldn’t sign you up!

We tried, but there was a problem creating your account. Please close this window and try again!

Hey there, we’ve already met!

Add link to

Error: Please select a workspace before adding link.


Sorry, we don’t support this browser

Asana doesn’t work with the internet browser you are currently using. Please sign up using one of these supported browsers instead.