Design Metro-style tile interfaces with grid layouts

Tile Design (Metro UI) is a design-it sub-style built on flat, colored squares with zero border-radius, live-updating internal content (tiles flip, scroll, or fade to reveal new data without user interaction), and a grid that expands infinitely to the right, encouraging horizontal panning - the Windows Phone/Windows 8 start-screen look. It is a child reference of design-it, applied when a request matches this specific aesthetic rather than triggered directly.

Use this sub-style for dashboards or launchers that want the Metro/Windows Phone tile grid - flat saturated colors on a near-black background, wireframe monochrome icons, and Segoe UI-style typography. Its own rules are strict: never add drop shadows or gradients to tiles, and always place the label text in the tile's bottom-left corner - deviating from either breaks the flat, purely-typographic Metro look this style depends on.

On web, tiles sit in a CSS grid (repeat(4, 150px) columns, 150px auto-rows) with tile-wide/tile-large classes spanning 2 columns or a full 2x2 block, a :active { transform: scale(0.95) } "tilt" click effect, and live-tile content animated via a slideUp keyframe that cycles translateY to simulate content flipping. Native implementations diverge in how they achieve the horizontal-flowing grid: SwiftUI uses a LazyHGrid inside a horizontal ScrollView (the most direct match), Flutter and React Native both achieve it with a column-first Wrap/flexWrap trick - a fixed-height container with direction: Axis.vertical (Flutter) or flexDirection: 'column' (React Native) inside a horizontal scroll, forcing children into columns that then flow left to right. Jetpack Compose's LazyHorizontalGrid is the closest built-in match but the skill notes it doesn't easily support tiles spanning multiple rows for a true 2x2 "large" tile - achieving that requires a custom Layout or a staggered grid.

.tile:active { transform: scale(0.95); }
.tile-large { grid-column: span 2; grid-row: span 2; }

As a design-it sub-style, it's invoked through the parent skill's aesthetic matching, and the tilt-press interaction is reproduced with each platform's own tools: SwiftUI's isPressed state driving .scaleEffect and a spring animation, Flutter's GestureDetector plus AnimatedScale, React Native's Animated.View with TouchableWithoutFeedback, and Compose's Modifier.scale() paired with detectTapGestures.

Designers and developers building a Metro/Windows-Phone-style tile dashboard or launcher who need the flat-color, live-tile, horizontally-panning grid reproduced consistently across web and native platforms - including the specific column-first flex-wrap workaround needed on Flutter and React Native to get tiles flowing left-to-right instead of top-to-bottom.