first commit

sn-infographic/references/layouts/breaking-the-grid.md

@@ -0,0 +1,36 @@
+# breaking-the-grid
+
+Main elements extend beyond the frame or background area.
+
+## Structure
+
+- Primary subject or element bleeds past its container boundary
+- Creates a sense of depth and dynamism
+- Background or card boundary is visible but violated
+- Other elements remain within bounds for contrast
+
+## Best For
+
+- Dynamic product showcases
+- Character or mascot introductions
+- Energetic or action-oriented content
+- Layouts that need visual excitement
+
+## Visual Elements
+
+- Subject element extending beyond its card or frame
+- Drop shadow or layering to reinforce depth
+- Contained background elements for contrast
+- Optional motion lines or energy effects
+
+## Text Placement
+
+- Title within the contained area
+- Subject label near the breaking element
+- Supporting text inside the frame
+
+## Recommended Pairings
+
+- `high-contrast-ad`: Comic-style breakout characters
+- `claymation`: 3D clay figures popping out
+- `kawaii`: Cute characters breaking frames