Design em Camadas

"Contexto de empilhamento. Interfaces construídas a partir de camadas sobrepostas e independentes."

Quando Usar

Use este subestilo quando a solicitação do usuário corresponder à estética descrita acima. Esta é uma referência filha da habilidade design-it e não deve ser acionada diretamente.

Princípios Fundamentais

1. Sobreposição Explícita: Elementos se sobrepõem intencionalmente para quebrar a grade e mostrar profundidade.
2. Estratificação Clara: Cada camada deve ser visualmente distinta por meio de sombra, borda ou cor contrastante.
3. Rolagem Parallax: Camadas de fundo se movem mais lentamente que as camadas de primeiro plano durante a interação/rolagem.

DNA Visual

• Cores: Marrom Monocromático ou Neutro Sofisticado. A sobreposição funciona melhor quando o fundo é distinto dos elementos flutuantes.
• Tipografia: Frequentemente texto grande e sobreposto que abrange camadas de imagem e fundo.
• Espaçamento: Espaço negativo é necessário ao redor dos elementos sobrepostos para que não pareçam confusos.

Implementação Web

• Uso intensivo de position: absolute, margens negativas e z-index.
• Exemplo de CSS:

.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;
  padding: 40px;
  width: 50%;
  margin-top: 200px; /* Pulls it down over the image */
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  /* Optional: border to define edge */
  border-left: 4px solid var(--cta-highlight);
}

Implementação de App

SwiftUI

struct LayeredDesignView: View {
    var body: some View {
        ScrollView {
            ZStack(alignment: .top) {
                // Background Image Layer (Back)
                Image("architectural-bg")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(height: 400)
                    .offset(x: 40, y: 0) // Shifted right
                    .zIndex(1)
                
                // Content Card Layer (Front)
                VStack(alignment: .leading, spacing: 16) {
                    Text("Stacking Context")
                        .font(.largeTitle).bold()
                    Text("This card intentionally overlaps the background image to create depth without relying on a grid.")
                        .foregroundColor(.secondary)
                }
                .padding(40)
                .background(Color.white)
                .shadow(color: Color.black.opacity(0.1), radius: 30, y: 20)
                .offset(x: -40, y: 200) // Shifted left and pulled down
                .zIndex(2)
            }
            .padding(.bottom, 200) // Account for the offset
        }
    }
}

• ZStack é a base do design em camadas no SwiftUI.
• Use .offset() para quebrar intencionalmente o alinhamento e criar composições sobrepostas.
• Defina explicitamente .zIndex() se seus deslocamentos puderem causar ordens de pintura inesperadas.

Flutter

class LayeredDesignScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: SizedBox(
          height: 600, // Pilha de altura fixa ou use restrições
          child: Stack(
            children: [
              // Camada de Imagem de Fundo
              Positioned(
                top: 0,
                right: -40, // Deslocado para fora da tela à direita
                width: MediaQuery.of(context).size.width * 0.8,
                height: 400,
                child: Image.asset('assets/architectural-bg.jpg', fit: BoxFit.cover),
              ),
              
              // Camada de Cartão de Conteúdo
              Positioned(
                top: 250, // Sobrepõe a parte inferior da imagem
                left: 20, // Sobrepõe a esquerda da imagem
                width: MediaQuery.of(context).size.width * 0.7,
                child: Container(
                  padding: const EdgeInsets.all(40),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    boxShadow: [
                      BoxShadow(color: Colors.black.withOpacity(0.1), blurRadius: 30, offset: const Offset(0, 20))
                    ],
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,

…