maximalism

name	maximalism
description	Web and App implementation guide for Controlled Maximalism. Trigger when user wants lots of elements, dense content, but a highly curated and artistic presentation.
category	Creative & Media
source	antigravity
tags	["react","ai","llm","template","design","presentation","image","cro"]
url	https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/design-it/maximalism

Controlled Maximalism

"Dense and rich, but deeply intentional. Like an exquisitely curated museum of artifacts."

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. High Density: The screen is packed with information, imagery, and interactive elements.
2. Ornate Detailing: Use of decorative borders, intricate textures, and classic design flourishes.
3. Structured Chaos: Unlike Vibrant Maximalism, the layout here is based on a strict underlying grid that holds the massive amount of content together.

Visual DNA

• Colors: Monochromatic Brown, Yacht Club, or rich jewel tones (emerald, ruby, sapphire, gold).
• Typography: Ornate serifs (like Cinzel or Playfair Display) paired with dense, highly legible sans-serif body copy.
• Borders & Dividers: Extensive use of thin, elegant lines separating every piece of content.

Web Implementation

• Use dense CSS Grid layouts.
• CSS Example:

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; : ;
  :  dashed ;
}

 {
  : , serif;
  : ;
  : ;
  : center;
  :  solid ;
  : ;
  : ;
}

App Implementation

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(, size: isFeature   : ))
                .foregroundColor((hex: )) 
                .padding()
        }
        .frame(maxWidth: .infinity, minHeight: isFeature   : )
        .background((hex: ).opacity())
        .border((hex: ), width: )
        .overlay(
            
             {
                 isFeature {
                    ()
                        .stroke(style: (lineWidth: , dash: []))
                        .foregroundColor((hex: ))
                        .padding()
                }
            }
        )
    }
}

• A LazyVGrid with very tight spacing (e.g., 4) creates the necessary density.
• Extensive use of .border and .overlay(Rectangle().stroke(...)) to box in every piece of data, mimicking ornate framing.

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: [
          // Flutter's standard GridView doesn't span columns easily.
          // In a real app, use the `flutter_staggered_grid_view` package.
          _buildItem('1892'),
          _buildItem('Vol. II'),
          _buildItem('Arch'),
          _buildItem('Index', isOrnate: true),
          _buildItem('04'),
          _buildItem('XII'),
        ],
      ),
    );
  }

  Widget _buildItem(String title, {bool isOrnate = false}) {
    return Container(
      decoration: BoxDecoration(
        color: const Color(0xFF1E293B).withOpacity(0.9),
        border: Border.all(color: const Color(0xFF475569), width: 1),
      ),
      child: Stack(
        children: [
          if (isOrnate)
            Positioned.fill(
              child: Padding(
                padding: const EdgeInsets.all(4.0),
                // Requires path_drawing or cus