# Canva — DESIGN.md

Gradient document toolbar above a neutral canvas.

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

## Font
"Canva Sans", "IBM Plex Sans Arabic", "Noto Sans Variable", "Noto Sans", -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif; Arial

## Marketing — Light and accent surfaces

### Observed palette
- color: `rgb(15, 16, 21)`
- color: `rgb(139, 61, 255)`
- background: `rgba(15, 16, 21, 0)`
- color: `rgb(0, 0, 0)`
- color: `rgb(255, 255, 255)`
- color: `rgba(16, 18, 25, 0.698)`

### Observed typography
| Role | Size / line height | Weight | Tracking |
|---|---|---|---|
| Skip to main content | 14px / 22px | 400 | Not recorded |
| Canva home | 10px / normal | 400 | Not recorded |
| Design | 13.3333px / normal | 400 | Not recorded |
| All in one  Visual Suite | 60px / 78px | 700 | Not recorded |
| Productivity, meets creativity. Bring your en | 21px / 32px | 400 | Not recorded |

### Layout & hierarchy
- Gradient document toolbar above a neutral canvas.
- A narrow icon rail opens creation tools on the left.
- Page thumbnails and zoom controls sit below the canvas.

### Components & behavior
- Text styles are large stacked buttons.
- Effects use square visual previews.
- Drawing tools use a vertical floating palette.

## Product — Light and accent surfaces

### Observed palette
- color: `rgb(255, 255, 255)`
- background: `rgba(255, 255, 255, 0)`
- color: `rgba(255, 255, 255, 0.5)`
- color: `rgb(15, 16, 21)`
- background: `rgba(255, 255, 255, 0.898)`
- color: `rgb(0, 0, 0)`

### Observed typography
| Role | Size / line height | Weight | Tracking |
|---|---|---|---|
| File | 14px / 22px | 600 | normal |
| Alex Christou | 13.3333px / normal | 400 | normal |
| Canva AI | 10px / normal | 400 | normal |
| Search fonts and combinations | 14px / 22px | 400 | normal |
| Page Thumbnails | 15px / normal | 700 | normal |

### Layout & hierarchy
- Gradient document toolbar above a neutral canvas.
- A narrow icon rail opens creation tools on the left.
- Page thumbnails and zoom controls sit below the canvas.

### Components & behavior
- Text styles are large stacked buttons.
- Effects use square visual previews.
- Drawing tools use a vertical floating palette.

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

## Interaction inventory
- Text tools: Text styles for a new blank presentation. Cropped bottom 8 CSS px to exclude the automation pointer at the extreme edge. Same source capture appears in the walkthrough.
- Text effects: Effect choices for the selected heading. Cropped bottom 8 CSS px to exclude the automation pointer at the extreme edge. Same source capture appears in the walkthrough.
- Speaker notes: Speaker notes alongside the selected presentation slide. Cropped bottom 8 CSS px to exclude the automation pointer at the extreme edge. Same source capture appears in the walkthrough.
- Selected presentation page: Page selected with contextual page controls. Cropped bottom 8 CSS px to exclude the automation pointer at the extreme edge. Same source capture appears in the walkthrough.
- Canvas tools: Drawing and object tools alongside the sample presentation. Cropped bottom 8 CSS px to exclude the automation pointer at the extreme edge. Same source capture appears in the walkthrough.
- Shapes palette: Available shapes in the canvas tools palette. Cropped bottom 8 CSS px to exclude the automation pointer at the extreme edge. Same source capture appears in the walkthrough.

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

## Reference pages
- https://www.canva.com/visual-suite/
- https://www.canva.com/en_gb/pricing/
- https://www.canva.com/features/

## Capture scope
Existing signed-in account; new presentation and editor exploration. Original signup not observed. Public homepage redirects to private dashboard; Visual Suite is an explicitly labelled alternative, so homepage coverage remains a gap.

## Format inspiration
Existing Screenrove design guide structure.