agent-skills/sn-infographic/references/layouts/step-staircase.md

step-staircase

A stair-step arrangement rising or descending to show progression.

Structure

• Steps arranged diagonally, each higher (or lower) than the previous
• Each step represents a stage, level, or milestone
• Directional arrows or connectors between steps
• Clear start at bottom-left and end at top-right (or reverse)

Best For

• Growth or escalation narratives
• Skill or maturity level progressions
• Pricing tiers
• Achievement or unlock sequences

Visual Elements

• Staircase shape with distinct step blocks
• Icons or numbers on each step
• Upward arrow or trajectory line
• Color gradient from start to end

Text Placement

• Step label on or beside each step
• Brief description below each step
• Title at top or along the staircase

Recommended Pairings

• corporate-memphis: Business growth stages
• paper-collage: Friendly skill progressions
• high-contrast-ad: High-contrast achievement steps