Layered Design

Layered Design is a design-style child skill ('stacking context - interfaces built from overlapping, independent layers'), part of the design-it family and not meant to be triggered directly. Three core principles: Explicit Overlap (elements intentionally overlap each other to break the grid and show depth), Clear Stratification (every layer must be visually distinct via shadow, border, or contrasting color), and Parallax Scrolling (background layers move slower than foreground layers during interaction or scroll).

Use it when the user's request matches this deliberately grid-breaking, overlapping-depth aesthetic - editorial hero sections, portfolio pieces, or landing pages that want visual tension between layers instead of a clean stacked flow. As a design sub-style, it's selected by the parent design-it skill's routing rather than invoked on its own.

Visual DNA works best with Monochromatic Brown or Sophisticated Neutral, since layering reads clearest when the background is distinct from the floating foreground elements, large overlapping text that spans across image and background layers, and deliberate negative space around overlapping elements so the composition doesn't feel cluttered. The web implementation relies heavily on position: absolute, negative margins, and z-index: a background image sits at z-index: 1 positioned to one side, while a text card sits above it at z-index: 2 with a large negative top margin (margin-top: 200px) pulling it down to overlap the image, given its own shadow and an accent-colored left border to visually separate it from the layer beneath.

.layer-text-box {
  z-index: 2;
  margin-top: 200px; /* pulls it down over the image */
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

SwiftUI builds the same effect on a ZStack foundation, offsetting the background image layer to one side at .zIndex(1) and the content card layer in the opposite direction plus downward at .zIndex(2) to create intentional overlap, with explicit .zIndex() calls to guarantee correct paint order when offsets might otherwise cause unexpected layering - .offset() is the deliberate mechanism for breaking grid alignment rather than an accident to avoid.

Designers and developers building editorial hero sections, portfolio pieces, or landing pages that want visual tension and depth from deliberately overlapping, stratified elements instead of a clean, non-overlapping stacked layout - done well, the overlap should feel like a deliberate compositional choice rather than an accidental layout bug the user has to squint past.