Design de Blocos (Metro UI)

"Autenticamente digital. Quadrados limpos e nítidos que dependem puramente de tipografia e cores sólidas."

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. Cantos Nítidos: Absolutamente nenhum raio de borda. Tudo é um quadrado perfeito ou um retângulo nítido.
2. Dados em Tempo Real: Blocos viram, rolam ou desaparecem internamente para mostrar atualizações em tempo real sem a interação do usuário.
3. Rolagem Horizontal: A grade geralmente se expande infinitamente para a direita, incentivando a rolagem horizontal.

DNA Visual

• Cores: Alta saturação, cores sólidas. Um fundo escuro (preto puro) com blocos ciano, magenta, laranja e verde brilhantes.
• Tipografia: Sans-serifs extremamente limpos e leves (como Segoe UI Light). O texto é quase sempre branco puro.
• Ícones: Glifos simples, em wireframe, monocromáticos colocados centralmente ou no canto.

Implementação Web

• Exemplo de CSS:

body {
  background-color: #111;
  color: #fff;
  font-family: 'Segoe UI', sans-serif;
  overflow-x: auto; /* Horizontal scroll */
}

.tile-group {
  display: grid;
  grid-template-columns: repeat(4, 150px);
  grid-auto-rows: 150px;
  gap: 8px;
  padding: 40px;
}

.tile {
  background-color: #0078D7; /* Classic Windows Blue */
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  
  /* The "tilt" click effect */
  transition: transform 0.1s;
  transform-origin: center;
}

.tile:active {
  transform: scale(0.95);
}

.tile-wide { grid-column: span 2; }
.tile-large { grid-column: span 2; grid-row: span 2; }

/* Live Tile Animation */
.tile-live-content {
  animation: slideUp 5s infinite;
}

@keyframes slideUp {
  0%, 45% { transform: translateY(0); }
  50%, 95% { transform: translateY(-100%); } /* Slides up to reveal next item */
  100% { transform: translateY(0); }
}

Implementação de Aplicativo

SwiftUI

struct TileDesignView: View {
    let rows = [GridItem(.fixed(150), spacing: 8), GridItem(.fixed(150), spacing: 8)]
    
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            LazyHGrid(rows: rows, spacing: 8) {
                TileView(title: "Mail", color: Color(hex: "0078D7"), icon: "envelope")
                TileView(title: "Photos", color: Color(hex: "00CC6A"), icon: "photo", isLarge: true)
                TileView(title: "Weather", color: Color(hex: "2D7D9A"), icon: "cloud.sun")
                TileView(title: "Calendar", color: Color(hex: "D13438"), icon: "calendar")
            }
            .padding(40)
        }
        .background(Color(hex: "111111").ignoresSafeArea())
    }
}

struct TileView: View {
    let title: String
    let color: Color
    let icon: String
    var isLarge: Bool = false
    
    @State private var isPressed = false
    
    var body: some View {
        VStack(alignment: .leading) {
            Image(systemName: icon)
                .font(.system(size: 32, weight: .light))
                .foregroundColor(.white)
            Spacer()
            Text(title)
                .font(.custom("Segoe UI", size: 16))
                .foregroundColor(.white)
        }
        .padding(16)
        // Sharp corners are mandatory
        .frame(width: isLarge ? 308 : 150, height: isLarge ? 308 : 150, alignment: .leading)
        .background(color)
        .scaleEffect(isPressed ? 0.95 : 1.0)
        .animation(.spring(response: 0.2, dampingFraction: 0.5), value: isPressed)
        .onLongPressGesture(minimumDuration: .infinity, maximumDistance: .infinity, pressing: { pressing in
            isPressed = pressing
        }, perform: {})
    }
}

• Um LazyHGrid dentro de uma ScrollView horizontal replica perfeitamente a tela inicial do Windows Phone / Windows 8.
• Absolutamente SEM raio de canto.
• O estado isPressed acionando um .scaleEffect(0.95) replica a interação física de "inclinação" dos blocos do Metro.

Flutter

class TileDesignScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF111111),
      body: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        padding: const EdgeInsets.all(40),
        child: SizedBox(
          height: 308, // Duas linhas de 150px + espaçamento de 8px
          child: Wrap(
            direction: Axis.vertical,

…