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

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