Maximalismo Controlado

"Denso e rico, mas profundamente intencional. Como um museu de artefatos primorosamente curado."

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. Alta Densidade: A tela é repleta de informações, imagens e elementos interativos.
2. Detalhes Ornamentados: Uso de bordas decorativas, texturas intrincadas e floreios de design clássico.
3. Caos Estruturado: Ao contrário do Maximalismo Vibrante, o layout aqui é baseado em uma grade subjacente estrita que mantém a enorme quantidade de conteúdo unida.

DNA Visual

• Cores: Marrom Monocromático, Yacht Club ou tons ricos de joias (esmeralda, rubi, safira, dourado).
• Tipografia: Serifas ornamentadas (como Cinzel ou Playfair Display) combinadas com corpo de texto denso e altamente legível em sans-serif.
• Bordas e Divisores: Uso extensivo de linhas finas e elegantes separando cada peça de conteúdo.

Implementação Web

• Use layouts densos de CSS Grid.
• Exemplo de CSS:

body {
  background-color: #0F172A; /* Deep slate */
  color: #E2E8F0;
  background-image: url('subtle-damask-pattern.png');
}

.max-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  padding: 16px;
}

.max-item {
  background-color: rgba(30, 41, 59, 0.9); /* Semi-transparent over pattern */
  border: 1px solid #475569;
  padding: 24px;
}

/* Ornate decorative borders */
.max-feature {
  grid-column: span 3;
  border: 2px solid #D4AF37; /* Gold */
  position: relative;
}

.max-feature::before {
  content: '';
  position: absolute;
  top: 4px; left: 4px; right: 4px; bottom: 4px;
  border: 1px dashed #D4AF37;
}

.max-title {
  font-family: 'Cinzel', serif;
  color: #D4AF37;
  font-size: 2.5rem;
  text-align: center;
  border-bottom: 1px solid #475569;
  padding-bottom: 16px;
  margin-bottom: 16px;
}

Implementação de Aplicativo

SwiftUI

struct MaximalismView: View {
    let columns = [
        GridItem(.flexible(), spacing: 4),
        GridItem(.flexible(), spacing: 4),
        GridItem(.flexible(), spacing: 4)
    ]
    
    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns, spacing: 4) {
                // Feature span
                MaxItem(title: "MUSEUM", isFeature: true)
                // Dense data blocks
                MaxItem(title: "1892")
                MaxItem(title: "Vol. II")
                MaxItem(title: "Arch")
                MaxItem(title: "Index")
            }
            .padding(16)
        }
        .background(Color(hex: "0F172A")) // Deep slate
    }
}

struct MaxItem: View {
    let title: String
    var isFeature: Bool = false
    
    var body: some View {
        VStack {
            Text(title)
                .font(.custom("Cinzel", size: isFeature ? 28 : 14))
                .foregroundColor(Color(hex: "D4AF37")) // Gold
                .padding()
        }
        .frame(maxWidth: .infinity, minHeight: isFeature ? 150 : 80)
        .background(Color(hex: "1E293B").opacity(0.9))
        .border(Color(hex: "475569"), width: 1)
        .overlay(
            // Ornate internal dashed border for the feature item
            Group {
                if isFeature {
                    Rectangle()
                        .stroke(style: StrokeStyle(lineWidth: 1, dash: [4]))
                        .foregroundColor(Color(hex: "D4AF37"))
                        .padding(4)
                }
            }
        )
    }
}

• Um LazyVGrid com spacing muito apertados (por exemplo, 4) cria a densidade necessária.
• Uso extensivo de .border e .overlay(Rectangle().stroke(...)) para enquadrar cada pedaço de dados, imitando molduras ornamentadas.

Flutter

class MaximalismScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF0F172A),
      body: GridView.count(
        crossAxisCount: 3,
        padding: const EdgeInsets.all(16),
        mainAxisSpacing: 4,
        crossAxisSpacing: 4,
        children: [
          // O GridView padrão do Flutter não se estende facilmente entre colunas.
          // Em um aplicativo real, use o pacote `flutter_staggered_grid_view`.
          _buildItem('1892'),
          _buildItem('Vol. II'),
          _buildItem('Arch'),
          _buildItem('Index', isOrnate: true),
          _buildItem('04'),
          _buildItem('XII'),

…