references/elements/canvas.md
Core canvas specifications and layout grids for Xiaohongshu infographics.
Aspect Ratios
| Name |
Ratio |
Pixels |
Note |
| portrait-3-4 |
3:4 |
1242×1660 |
Highest traffic on XHS (recommended) |
| square |
1:1 |
1242×1242 |
Second recommended |
| portrait-2-3 |
2:3 |
1242×1863 |
Taller format |
Default: portrait-3-4 for maximum engagement.
Safe Zones
Avoid placing critical content in these areas:
| Zone |
Position |
Reason |
| bottom-overlay |
Bottom 10% |
Title bar overlay on mobile |
| top-right |
Top-right corner |
Like/share button overlay |
| bottom-right |
Bottom-right corner |
Watermark position |
┌─────────────────────────────┐
│ [like/share]│ ← top-right: avoid
│ │
│ │
│ ✓ SAFE CONTENT AREA │
│ │
│ │
│ [title bar overlay area] │ ← bottom 10%: avoid key info
└─────────────────────────────┘
Grid Layouts
Density-Based Layouts
| Layout |
Info Density |
Whitespace |
Points/Image |
Best For |
| sparse |
Low |
60-70% |
1-2 |
Covers, quotes, impactful statements |
| balanced |
Medium |
40-50% |
3-4 |
Standard content, tutorials |
| dense |
High |
20-30% |
5-8 |
Knowledge cards, cheat sheets |
Structure-Based Layouts
| Layout |
Structure |
Items |
Best For |
| list |
Vertical enumeration |
4-7 |
Rankings, checklists, step guides |
| comparison |
Left vs Right |
2 sections |
Before/after, pros/cons |
| flow |
Connected nodes |
3-6 steps |
Processes, timelines, workflows |
| mindmap |
Center radial |
4-8 branches |
Concept maps, brainstorming, topic overview |
| quadrant |
4-section grid |
4 sections |
SWOT analysis, priority matrix, classification |
Layout by Position
| Position |
Recommended Layout |
Why |
| Cover |
sparse |
Maximum visual impact, clear title |
| Setup |
balanced |
Context without overwhelming |
| Core |
balanced/dense/list |
Based on content density |
| Payoff |
balanced/list |
Clear takeaways |
| Ending |
sparse |
Clean CTA, memorable close |
Grid Cells
For multi-element compositions:
| Name |
Cells |
Use Case |
| single |
1 |
Hero image, maximum impact |
| dual |
2 |
Before/after, comparison |
| triptych |
3 |
Steps, process flow |
| quad |
4 |
Product showcase |
| six-grid |
6 |
Checklist, collection |
| nine-grid |
9 |
Multi-image gallery |
Visual Balance
Sparse Layout
- Single focal point centered
- Breathing room on all sides
- Symmetrical composition
Balanced Layout
- Top-weighted title
- Evenly distributed content below
- Clear visual hierarchy
Dense Layout
- Organized grid structure
- Clear section boundaries
- Compact but readable spacing
List Layout
- Left-aligned items
- Clear number/bullet hierarchy
- Consistent item format
Comparison Layout
- Symmetrical left/right
- Clear visual contrast
- Divider between sections
Flow Layout
- Directional flow (top→bottom or left→right)
- Connected nodes with arrows
- Clear progression indicators
Mindmap Layout
- Central topic node
- Radial branches outward
- Hierarchical sub-branches
- Organic curved connections
Quadrant Layout
- 4-section grid (2×2)
- Clear axis labels
- Each quadrant with distinct content
- Optional circular variant for cycles
