first commit

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

@@ -0,0 +1,30 @@
+# 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