tile-design

Use CSS Grid with fixed 150px columns and rows, 8px gaps, and span classes for wide or large tiles. Set overflow-x to auto on the body for horizontal scrolling and apply a scale transform on :active for the press effect.

Place a LazyHGrid with fixed 150-point rows inside a horizontal ScrollView. Each tile is a VStack with a background color, no corner radius, and a scaleEffect driven by a pressed state to replicate the Metro tilt interaction.

LazyHorizontalGrid supports column spans but does not easily mix 2x2 large tiles with 1x1 tiles in a true Metro layout. For that, you need a custom Layout composable or a staggered grid approach.

Tiles must have absolutely no border radius, no shadows, and no gradients. Labels sit in the bottom-left corner, colors are flat and highly saturated on a dark background, and icons are simple monochromatic glyphs.

Avoid it when your product requires soft, rounded, or depth-based aesthetics, since Metro forbids corner radius, shadows, and gradients. It is also a styling reference only, so accessibility contrast and responsive behavior must be validated separately.