Design System
Tutorial Page Design
A step-by-step layout pattern for teaching users how to accomplish tasks inside Meridian. Clean, scannable, and conversion-optimized.
Anatomy
- 1Goal banner — one sentence describing what the user will achieve.
- 2Prerequisites — inline chips listing required setup steps.
- 3Numbered steps — each step has a bold title, a short paragraph, and an optional code snippet or screenshot placeholder.
- 4Result callout — a success-toned box confirming what the user just built.
- 5Next steps — two or three related tutorial links.
Color Tokens
Primary violet
Accent pink
Deep dark bg
Body text