Tile Design (Metro UI)

Tile Design (Metro UI)

"Authentically digital. Clean, sharp squares relying purely on typography and flat color."

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. Sharp Corners: Absolutely no border-radius. Everything is a perfect square or sharp rectangle.
2. Live Data: Tiles flip, scroll, or fade internally to show live updates without the user interacting.
3. Horizontal Panning: The grid often expands infinitely to the right, encouraging horizontal scrolling.

Visual DNA

• Colors: High saturation, flat colors. A dark background (pure black) with bright cyan, magenta, orange, and green tiles.
• Typography: Extremely clean, light sans-serifs (like Segoe UI Light). Text is almost always pure white.
• Icons: Simple, wireframe, monochromatic glyphs placed centrally or in the corner.

Web Implementation

• CSS Example:

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;