agent-skills/sn-infographic/references/styles/instructional-visual.md

instructional-visual

Illustrated instructional design. Clear step-by-step guidance through simple, universal visuals.

Color Palette

• Primary: Neutral base with 2–3 functional accent colors
• Background: White or very light gray
• Accents: Action color (blue/green), warning color (orange/red)

Visual Elements

• Simple line-art illustrations of hands, objects, actions
• Numbered step indicators (bold circles or squares)
• Arrow connectors showing sequence
• Do/Don't visual pairs with clear marking
• Minimal detail—silhouette-level clarity
• Consistent character/object style throughout
• No photorealism—abstract enough to be universal

Typography

• Clear sans-serif, medium weight
• Short imperative labels ("Press", "Insert", "Rotate")
• Large step numbers
• Minimal prose—visuals carry the meaning

Best For

Assembly instructions, how-to guides, safety procedures, onboarding flows, product usage, educational step-by-step content