Brands813
↑ ↓ to browse
View full design.md ↗
Asana· Productivityasana.com
Design System

Asana

Asana helps teams organize, track, and manage their work — across every team, project, and goal.

Color Palette13 tokens
background#ffffff
surface#f3f3f3
surface-elevated#f5f5f5
ink#000000
ink-muted#690031
primary#646f79
on-primary#ffffff
border#ffeaec
focus-ring#646f79
success#22c55e
warning#f59e0b
error#ef4444
shadow-soft#d9d9d9
Buttons
TypographyGoogle Font
Poppinsbrand uses Ghost
display-hero

Work done.

72px · 500 · -1px
display

Manage any project

50px · 500 · -0.5px
heading-section

Asana helps teams organize, track, and manage their work — across every team, project, and goal.

60px · 500 · -0.25px
heading-sub

12 tasks · 3 completed · 2 overdue

42px · 500 · 0px
body-large

Asana helps teams organize, track, and manage their work — across every team, project, and goal.

18px · 300 · 0px
IconsPh
Set: Ph · brand-matched
Formfocus ring
Email
you@company.com
Password
••••••••
Card · Shapes

Manage any project

Asana helps teams organize, track, and manage their work — across every team, project, and goal.

Productivity
none
sm
md
lg
Elevation
RING
CARD
ELEVATED
Controls
On
Off
✓Checked
Unchecked
Selected
Option
Alerts
Heads up — a new version of the design system is available.
Saved. Your changes are live across all surfaces.
Some tokens are missing a contrast-safe pairing.
Couldn’t reach the server. Retry in a moment.
Badges
SolidSoftOutlineNewv2.0
FAQ
Manage any project
Asana helps teams organize, track, and manage their work — across every team, project, and goal.
How does it integrate with my stack?
Is there a free tier?
Tabs
OverviewActivitySettings
DayWeekMonth
Stats
48.2k
Active users
+12.4%
$12.8k
MRR
+3.1%
99.9%
Uptime
−0.02%
Table
MemberPlanStatus
AQAvery QuinnPro Active
JLJordan LeeTeam Pending
SRSam RiveraFree Active
Avatars
AQJLSR+5
AQ
Avery Quinn
Online · Owner
Slider · Progress
Volume62%
Storage used78%
Tooltip · Popover
Brand-styled tooltipHover target

Keyboard shortcuts

Press ⌘K to open the command menu, ? for help.

Navigation bar
Banner
NewAsana just shipped a refreshed design system.Read more →
Pricing
Pro
$24 /mo
  • Unlimited projects
  • Priority support
  • Custom domains
Stepper
CartDetails3Payment4Review
Breadcrumb
HomeProductivityAsana
Menu
Profile
Settings
Billing
Sign out
Toast
Changes savedUndo
You have 3 new updates
Activity
Avery created a new project
2h ago
Jordan left a comment
5h ago
Sam shipped v2.0
1d ago
Notifications
AQAvery Quinn invited you to Asana.
2 minutes ago
JLJordan Lee approved your design tokens.
1 hour ago
SRSam Rivera mentioned you in a thread.
Yesterday
Code
theme.ts
// Asana tokens
export const theme = {
  primary: "#646f79",
  radius: "8px",
}
Calendar
March 2026
SMTWTFS28291234567891011121314151617181920212223242526272829303112
No resultsTry adjusting your filters or search for something else.
Loading
Pagination
‹123…12›
Brand moment

Together, teams accomplish more.

Asana · Productivity

Similar systems

Generated from shared tags, visual DNA, category, color, type, and radius.

Filter by this ↗
Craft79%

shared styles: Light, Editorial, Warm · same category: Productivity

Cape75%

shared styles: Light, Warm · same category: Productivity

Grammarly73%

shared styles: Light, Editorial · same category: Productivity

Readwise68%

shared styles: Light, Editorial, Warm · same category: Productivity

Tana68%

shared styles: Editorial, Warm · same category: Productivity

Ableton67%

shared styles: Light, Monochromatic · same category: Productivity