Metro UI Tiles

I was asked to design a mock-up of a 'Metro' style interface similar to the Windows 8 start screen. Having barely used Windows 8 all I could remember was that it was very flat looking. I use Windows 7 and Linux generally so I had to go searching for various things like colors, sizes, and fonts used.

Now completed I thought I'd put those findings all in one place just to make it easier should anyone go looking for the same information or should I need to refer to it at a later time.

Tile Colors

I only needed to worry about the actual tiles utilized by the Metro UI. And these were found over at Creepy Ed's website:

Color Name	Dark Color (Hex)	Light Color (Hex)
Teal	008299	00A0B1
Blue	2672EC	2E8DEF
Purple	8C0095	A700AE
Dark Purple	5133AB	643EBF
Red	AC193D	BF1E4B
Orange	D24726	DC572E
Green	008A00	00A600
Sky Blue	094AB2	0A5BC4
Light Blue	0CA6DC	0ABCE2

I added the Light Blue color codes myself. I got the values by color-picking from a Windows 8 screenshot.

Tile Sizes

I got the Metro UI tile sizes from the Microsoft Developer Network:

Scale	Wide (Pixels)	Medium (Pixels)
80%	248 x 120	120 x 120
100%	310 x 150	150 x 150
140%	434 x 210	210 x 210
180%	558 x 270	270 x 270

Fonts

The information for the fonts used in the Metro UI also came from the Microsoft Developer Network:

Font	Use
Segoe UI	UI elements such as buttons and date pickers
Calibri	Text that the user both reads and writes such as email and chat
Cambria	Larger blocks of text such as for a magazine or RSS reader

The only one I actually needed to use was the Segoe UI font. If you don't have any of the Microsoft products that the Segoe UI font comes with there is a free alternative font called Homizio which was created by Álvaro Thomáz and can be downloaded at DaFont.

An example of the tiles.

The gradients I created for Photoshop can be downloaded via SendSpace.

Thanks to Creepy Ed and Microsoft for making the information available. Visit their pages for more details on colors, sizes, and fonts.