first commit

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

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