Back to Library
A

Asana

Asana

Visit Website

项目管理工具。温暖珊瑚色强调,干净的列表/看板/时间线布局

珊瑚色多视图切换任务管理团队协作自动化

Color Palette

primary
secondary
background
surface
text
muted
border

Typography

Heading FontAsana, system-ui, sans-serif
Body FontAsana, system-ui, sans-serif
Base Size14px
Line Height1.5
Weights400, 500, 600, 700

Heading Scale

h1Asana Heading
h2Asana Heading
h3Asana Heading
h4Asana Heading

DESIGN.md

# Asana Design System

## Visual Theme & Atmosphere
项目管理工具。温暖珊瑚色强调,干净的列表/看板/时间线布局

## Color Palette & Roles
| Token | Hex | Role |
|-------|-----|------|
| Primary | #F06A6A | Brand color |
| Secondary | #F1643E | Hover/secondary |
| Background | #FFFFFF | Main canvas |
| Surface | #F8F8F8 | Cards, panels |
| Text | #2D2E2E | Primary text |
| Muted | #8993A4 | Secondary text |
| Border | #E8E8E8 | Dividers |

## Typography Rules
- **Heading Font**: Asana, system-ui, sans-serif
- **Body Font**: Asana, system-ui, sans-serif

- **Base Size**: 14px
- **Line Height**: 1.5
- **Weights**: 400, 500, 600, 700

## Component Stylings
- **Buttons**: Primary accent color, clean rounded style
- **Cards**: Surface background, subtle borders, hover states
- **Navigation**: Clean, brand-colored indicators

## Agent Prompt Guide
Use Asana's design language: 项目管理工具.
Primary color #F06A6A on #FFFFFF background.
Typography: Asana.

Frequently Asked Questions

What is Asana's design style?

项目管理工具。温暖珊瑚色强调,干净的列表/看板/时间线布局

What is Asana's primary color?

Asana uses #F06A6A as primary color, #FFFFFF for background, and #2D2E2E for text.

What fonts does Asana use?

Heading font: Asana, system-ui, sans-serif. Body font: Asana, system-ui, sans-serif. Base size: 14px.

How to use Asana design system in my project?

Click the Copy button above the DESIGN.md code block to copy the complete design specification. AI Coding tools like Cursor can directly read DESIGN.md to generate code matching Asana's style.

Explore More Design Systems

Discover 50+ curated design systems for your AI Coding projects.

View All Design Systems