UI Monocromático

"Elegância através da restrição. Uma única tonalidade, explorada através de todos os seus tons claros, tons médios e escuros."

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. Tonalidade Única: Escolha uma cor base (por exemplo, azul escuro). Toda a UI é construída usando versões mais claras (tons claros) e mais escuras (tons escuros) dessa tonalidade exata.
2. Alto Contraste para Legibilidade: O tom mais escuro e o tom mais claro devem ter contraste suficiente para passar nos padrões de acessibilidade quando colocados juntos.
3. Textura em Vez de Cor: Como a cor é restrita, use texturas sutis, padrões ou opacidades variadas para diferenciar as seções.

DNA Visual

• Cores: Marrom Monocromático ou escolha uma tonalidade dominante de Elegância Terrena e extrapole-a.
• Tipografia: Limpa e discreta. O layout depende muito dos pesos das fontes para estabelecer a hierarquia, já que a cor não pode.
• Sombras: As sombras devem ser tingidas com a tonalidade base, nunca preto puro.

Implementação Web

• Use HSL (Hue, Saturation, Lightness) extensivamente em CSS para facilitar a criação da paleta.
• Exemplo de CSS:

:root {
  /* Base Hue: Deep Blue (210) */
  --mono-900: hsl(210, 80%, 10%); /* Very dark */
  --mono-700: hsl(210, 70%, 30%); /* Dark */
  --mono-500: hsl(210, 60%, 50%); /* Base */
  --mono-300: hsl(210, 50%, 80%); /* Light */
  --mono-100: hsl(210, 40%, 95%); /* Very light background */
}

body {
  background-color: var(--mono-100);
  color: var(--mono-900);
  font-family: 'Inter', sans-serif;
}

.mono-card {
  background-color: #ffffff; /* Or mono-100 */
  border: 1px solid var(--mono-300);
  border-radius: 8px;
  padding: 32px;
  /* Tinted shadow */
  box-shadow: 0 10px 25px hsla(210, 80%, 10%, 0.05);
}

.mono-btn {
  background-color: var(--mono-500);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 12px 24px;
  transition: background-color 0.2s;
}

.mono-btn:hover {
  background-color: var(--mono-700);
}

.mono-subtext {
  color: var(--mono-500); /* Use mid-tones for secondary text */
  font-weight: 500;
}

Implementação de Aplicativo

SwiftUI

struct MonochromaticView: View {
    // Base Hue: Deep Blue (210 in 360-degree HSB/HSL)
    // In SwiftUI, hue is 0.0 to 1.0 (210/360 = 0.58)
    let mono900 = Color(hue: 0.58, saturation: 0.80, brightness: 0.10)
    let mono700 = Color(hue: 0.58, saturation: 0.70, brightness: 0.30)
    let mono500 = Color(hue: 0.58, saturation: 0.60, brightness: 0.50)
    let mono300 = Color(hue: 0.58, saturation: 0.50, brightness: 0.80)
    let mono100 = Color(hue: 0.58, saturation: 0.40, brightness: 0.95)
    
    var body: some View {
        VStack(spacing: 24) {
            // Card
            VStack(alignment: .leading, spacing: 12) {
                Text("Monochromatic Elegance")
                    .font(.title2).fontWeight(.semibold)
                    .foregroundColor(mono900)
                
                Text("Using only variations in saturation and brightness of a single hue.")
                    .foregroundColor(mono500)
            }
            .padding(32)
            .background(Color.white)
            .border(mono300, width: 1)
            .shadow(color: mono900.opacity(0.1), radius: 15, y: 5) // Tinted shadow
            
            // Button
            Button(action: {}) {
                Text("Primary Action")
                    .fontWeight(.bold)
                    .foregroundColor(.white)
                    .frame(maxWidth: .infinity)
                    .padding()
                    .background(mono500)
                    .cornerRadius(8)
            }
        }
        .padding()
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(mono100)
    }
}

• Defina suas cores usando Color(hue: saturation: brightness:). Isso garante uma harmonia monocromática matematicamente perfeita.
• Sempre tinga suas sombras com sua cor mono900. Sombras pretas puras parecem sujas em uma UI estritamente monocromática.

Flutter

class MonochromaticScreen extends StatelessWidget {
  // Tonalidade Base: Azul Profundo (210)
  // Flutter HSVColor usa Tonalidade 0-360, Saturação 0.0-1.0, Valor 0.0-1.0
  final Color mono900 = const HSVColor.fromAHSV(1.0, 210, 0.80, 0.10).toColor();
  final Color mono500 = const HSVColor.fromAHSV(1.0, 210, 0.60, 0.50).toColor();

…