first commit

sn-infographic/references/layouts/overlapping.md

@@ -0,0 +1,36 @@
+# overlapping
+
+Text and images overlap, blurring foreground and background relationships.
+
+## Structure
+
+- Elements layered on top of each other with intentional overlap
+- Depth created through z-order, opacity, and shadow
+- Overlapping creates visual richness and complexity
+- Key elements remain legible despite overlap
+
+## Best For
+
+- Rich, layered editorial designs
+- Collage-style compositions
+- Content showing interconnection or integration
+- Visually complex artistic presentations
+
+## Visual Elements
+
+- Multiple overlapping layers
+- Drop shadows and opacity variations
+- Clear z-order hierarchy
+- Clipping masks or blend modes for integration
+
+## Text Placement
+
+- Text in the most legible layer
+- Avoid placing critical text under opaque elements
+- Title in a clear, non-overlapping zone
+
+## Recommended Pairings
+
+- `glitch-art`: Torn paper overlapping layers
+- `storybook-watercolor`: Painterly overlapping elements
+- `high-contrast-ad`: High-contrast overlapping shapes