Layered Design

"Stacking context. Interfaces built from overlapping, independent layers."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

1. Explicit Overlap: Elements intentionally overlap each other to break the grid and show depth.
2. Clear Stratification: Every layer must be visually distinct via shadow, border, or contrasting color.
3. Parallax Scrolling: Background layers move slower than foreground layers during interaction/scrolling.

Visual DNA

• Colors: Monochromatic Brown or Sophisticated Neutral. Layering works best when the background is distinct from the floating elements.
• Typography: Often large, overlapping text that spans across image and background layers.
• Spacing: Negative space is required around overlapping elements so they don't feel cluttered.