first commit

sn-infographic/references/layouts/diagonal-composition.md

@@ -0,0 +1,36 @@
+# diagonal-composition
+
+Elements aligned along a diagonal or the whole composition is tilted.
+
+## Structure
+
+- Primary visual axis runs diagonally (typically top-left to bottom-right)
+- Elements arranged along or perpendicular to the diagonal
+- Creates movement and energy compared to horizontal/vertical layouts
+- Can be subtle (slight tilt) or dramatic (45° angle)
+
+## Best For
+
+- Dynamic or energetic content
+- Sports, tech, or action themes
+- Breaking monotony in grid-heavy designs
+- Directional flow narratives
+
+## Visual Elements
+
+- Diagonal bands or stripes as background
+- Elements rotated or aligned to the diagonal axis
+- Arrows or lines reinforcing the diagonal direction
+- Strong contrast along the diagonal
+
+## Text Placement
+
+- Title along or perpendicular to the diagonal
+- Supporting text in stable horizontal zones
+- Avoid rotating body text for readability
+
+## Recommended Pairings
+
+- `neon-futurism`: Futuristic diagonal energy
+- `high-contrast-ad`: Dynamic comic-style layouts
+- `corporate-memphis`: Modern diagonal accents