Layered Design

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.

Web Implementation

• Heavy use of position: absolute, negative margins, and z-index.
• CSS Example:

.layer-container {
  position: relative;
  padding: 100px;
}

.layer-bg-image {
  position: absolute;
  top: 0; right: 0;
  width: 60%;
  height: 400px;
  object-fit: cover;
  z-index: 1;
}

.layer-text-box {
  position: relative;
  z-index: 2; /* Sits above the image */
  background: white;