first commit

sn-infographic/references/layouts/s-curve.md

@@ -0,0 +1,36 @@
+# s-curve
+
+Graphics guide the eye in an S-shaped curve through the content.
+
+## Structure
+
+- Content nodes arranged along an S-shaped path
+- Path flows from top to bottom in a gentle double curve
+- Alternating left-right placement of content along the curve
+- Smooth, flowing visual rhythm
+
+## Best For
+
+- Multi-step processes with a flowing feel
+- Journey or narrative content
+- Content that benefits from visual rhythm
+- Alternatives to straight timelines
+
+## Visual Elements
+
+- Curved path or ribbon connecting nodes
+- Alternating left/right content placement
+- Smooth bezier curves rather than sharp angles
+- Optional decorative elements along the curve
+
+## Text Placement
+
+- Labels beside each node along the curve
+- Title at the top of the S
+- Conclusion at the bottom of the S
+
+## Recommended Pairings
+
+- `storybook-watercolor`: Flowing narrative paths
+- `crayon-hand-drawn`: Hand-drawn winding routes
+- `corporate-memphis`: Smooth process flows