You can use the layout pattern described here to lay out UI elements on your app pages. Following a consistent pattern for margins, page headers, gutter widths, and other such elements maintains unity across apps and helps people easily understand interactions across the system.
The user interface in Windows 8 strives to maintain a consistent silhouette across its apps. The signature characteristic of the silhouette is a wide margin on the top, bottom, and left edges. The wide margin helps users understand the horizontal panning direction of the content.
Using the grid system
Before we talk about the Windows 8 silhouette, you should know a little about using the Windows 8 grid system. The grid system is a design tool that helps achieve visual unity across different apps, while providing a structure for variation and maintaining user interest. The grid system is built into the developer templates and we designed our controls and collections with the grid system in mind.
The grid is made up of units and sub-units. The basic unit of measurement is the unit. One unit equals 20 × 20 pixels. Each unit is further divided into sub-units of 5 × 5 pixels. There are 16 sub-units per square unit. The image below depicts the grid in the upper-left corner of a screen. The image is enlarged to show pixels, sub-units, and units.
Page header
The baseline of the page header should be 5 units, or 100 pixels from the top. The left margin for the page header is 6 units, or 120 pixels. The Windows 8 page header is SegoeUI Stylistic Set 20, light weight. For more information about Stylistic Sets, see Guidelines and checklist for text and typography.
Content region
The content region has a top margin of 7 units, or 140 pixels. The left margin is 6 units, or 120 pixels. The bottom margin is flexible. For horizontally panning content, it should be no more than 6.5 units (130 pixels), and no less than 2.5 units (50 pixels). For vertically panning content, the top and left margins remain the same. There is no specified bottom margin because the content scrolls off the screen.
Horizontal padding values
Horizontal padding between content items varies depending on the items. Hard-edged items (like images and user tiles) have 2 sub-units, or 10 pixels, of padding between the tile and accompanying text. Lists have 2 units or 40 pixels of padding between columns. Hard-edged items have 2 sub-units, or 10 pixels, of padding between columns.
Vertical padding values
Vertical padding between content items also varies depending on the types of items. Tile and text lists have 1 unit, or 20 pixels of vertical padding between items in a row. Hard-edged objects have 2 sub-units, or 10 pixels, of padding between items in a row.
Horizontal padding between groups
The padding between groups is 4 units, or 80 pixels. This padding is generous to allow enough separation to easily distinguish one group from the next when the user is panning.
Build date: 11/28/2012
