Design de Dashboard

"Dados em um relance. Organizado, escaneável e altamente funcional."

Quando Usar

Use este sub-estilo 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. Grade Modular: A tela é dividida em "widgets" ou cartões funcionais. Geralmente uma barra lateral à esquerda e uma navegação superior.
2. Hierarquia de Dados: Os números mais importantes (KPIs) são grandes e geralmente no topo. Gráficos ocupam o meio, e listas/tabelas ficam na parte inferior.
3. Fundos Suaves: Um fundo cinza claro ou off-white para que os cartões de dados brancos se destaquem claramente.

DNA Visual

• Cores: Slate Minimalista ou Elegância Terrena. Evite muitas cores. Use vermelho/verde estritamente para tendências positivas/negativas.
• Tipografia: Fontes sans-serif limpas e tabulares (Inter, Roboto Mono para números).
• Estilização: Sombras muito sutis ou bordas de 1px para separar os cartões.

Implementação Web

• Use CSS Grid para o layout macro (Sidebar, Header, Main).
• Exemplo de CSS:

body {
  background-color: #F8F9FA;
  color: #212529;
  font-family: 'Inter', sans-serif;
  margin: 0;
}

.dashboard-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 70px 1fr;
  height: 100vh;
}

.sidebar {
  grid-row: 1 / 3;
  background-color: #ffffff;
  border-right: 1px solid #e9ecef;
  padding: 20px;
}

.header {
  background-color: #ffffff;
  border-bottom: 1px solid #e9ecef;
  padding: 0 30px;
  display: flex;
  align-items: center;
}

.main-content {
  padding: 30px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  overflow-y: auto;
}

/* KPI Card */
.kpi-card {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  border: 1px solid #e9ecef;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.kpi-title { font-size: 0.9rem; color: #6c757d; }
.kpi-value { font-size: 2rem; font-weight: 700; margin-top: 8px; }
.kpi-trend.positive { color: #28a745; }

Implementação em Aplicativo

SwiftUI

struct DashboardView: View {
    // For iPad/Mac, NavigationSplitView is ideal.
    // For iPhone, we use a scrolling VGrid.
    let columns = [
        GridItem(.adaptive(minimum: 150), spacing: 16)
    ]
    
    var body: some View {
        NavigationView {
            ScrollView {
                LazyVGrid(columns: columns, spacing: 16) {
                    KPICard(title: "Revenue", value: "$45,231", trend: "+12.5%", isPositive: true)
                    KPICard(title: "Active Users", value: "2,405", trend: "+4.1%", isPositive: true)
                    KPICard(title: "Churn Rate", value: "1.2%", trend: "-0.4%", isPositive: false)
                    KPICard(title: "Avg. Session", value: "4m 12s", trend: "+0.1%", isPositive: true)
                }
                .padding()
                
                // Placeholder for Chart
                RoundedRectangle(cornerRadius: 12)
                    .fill(Color.white)
                    .frame(height: 250)
                    .overlay(Text("Chart Area").foregroundColor(.gray))
                    .padding(.horizontal)
            }
            .background(Color(UIColor.systemGroupedBackground))
            .navigationTitle("Overview")
        }
    }
}

struct KPICard: View {
    let title: String
    let value: String
    let trend: String
    let isPositive: Bool
    
    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            Text(title).font(.subheadline).foregroundColor(.secondary)
            Text(value).font(.title2).fontWeight(.bold)
            Text(trend)
                .font(.caption)
                .fontWeight(.semibold)
                .foregroundColor(isPositive ? .green : .red)
        }
        .padding()
        .frame(maxWidth: .infinity, alignment: .leading)
        .background(Color.white)
        .cornerRadius(12)
        .shadow(color: Color.black.opacity(0.02), radius: 4, y: 2)
    }
}

• Dashboards exigem grades .adaptive. LazyVGrid cuida do rearranjo automático de 4 cartões em uma linha no iPad para 2 cartões no iPhone.
• Use Color(UIColor.systemGroupedBackground) para fornecer aquele contraste sutil off-white contra cartões brancos nítidos.

Flutter

class DashboardScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF8F9FA),
      appBar: AppBar(

…