📖 Step 3: Design - UI Components & Patterns#62 / 350
Visual Hierarchy
Visual Hierarchy
📖One-line summary
Guiding attention through size, color, and placement.
✨Example
Size, weight and color convey visual hierarchy
Most important heading
Second most important subheading
Body text should use comfortable sizing and color
Secondary info is shown small and muted
⚡Vibe coding prompt examples
>_
Improve the visual hierarchy of the landing page. Make the title big and bold, subtitle medium, body small, and make the CTA stand out the most.
>_
Tidy up the dashboard's visual hierarchy. Emphasize the most important KPI numbers as large, and treat supporting info as small text.
>_
Build a visual hierarchy inside the card component. Differentiate visual importance in order of title > description > meta info > action button.
Try these prompts in your AI coding assistant!