# Asana — DESIGN.md

Public pages use large editorial headings.

## Agent task
Use these observed references to build an original interface.

## Font
"TWK Lausanne", "Helvetica Neue", Helvetica, sans-serif

## Marketing — Light and accent surfaces

### Observed palette
- color: `rgb(13, 14, 16)`
- color: `rgb(13, 13, 13)`
- color: `rgb(255, 255, 255)`
- color: `rgba(62, 62, 62, 0.8)`
- color: `rgb(61, 61, 61)`
- background: `rgb(250, 250, 250)`

### Observed typography
| Role | Size / line height | Weight | Tracking |
|---|---|---|---|
| Asana Home | 16px / 24px | 500 | Not recorded |
| Products | 14px / 36px | 500 | Not recorded |
| Pricing | 14px / 21px | 500 | Not recorded |
| Contact sales | 12px / 18px | 500 | Not recorded |
| The OS for  human-agent teams | 102px / 91.8px | 300 | Not recorded |

### Layout & hierarchy
- Public pages use large editorial headings.
- Feature groups alternate light and dark sections.
- Pricing separates plan cards and comparison content.

### Components & behavior
- Pill calls to action.
- Expandable feature and FAQ groups.
- Tabbed product sections.

## Product — Not captured

### Observed palette
Not captured.

### Observed typography
| Role | Size / line height | Weight | Tracking |
|---|---|---|---|


### Layout & hierarchy
- Authenticated capture pending.

### Components & behavior
- No product measurements available.

## Implementation recommendations
- Preserve the observed hierarchy and spacing roles.
- Use original content and branding.
- Do not infer missing onboarding or paid workflows.

## Interaction inventory


## Avoid
Do not treat exploratory branches as a completed signup journey.

## Reference pages
- https://asana.com/
- https://asana.com/pricing
- https://asana.com/features

## Capture scope
Public pages captured. Google sign-in reached new-account terms acceptance; awaiting user confirmation. No authenticated product captures.

## Format inspiration
Existing Screenrove design guide structure.