templates

six page layouts, drawn on the grid, assembled from the patterns.

page templates

six pages drawn on the grid. each one is a stack of sections from the patterns page.

contentdominant block or titlethe red elementstructure or mediaheader or footer on inkcolumns

landing page. header, split hero, features, stats, quote, pricing, call to action, footer. one red button in the hero and one red band near the end.

article page. header, breadcrumbs, a yellow title block, the reading column with a yellow aside, previous and next, slim footer.

object detail. picture left, facts right, tabs below, related objects, slim footer. the one red button is start in form lab inside the facts block.

app home. a phone screen on four columns: bar, the exercise card, the rooms, a list, the tab bar. nothing scrolls sideways.

settings and forms. a left menu of sections, a single column of fields, a help aside. the save button sits at the end of the column, not in a sticky bar.

404 and empty. the number, the explanation, two buttons, the slim footer. no search box; the red button goes to the library.

rules for assembling a page

one red thing per screen.a button or a band, never both in view at once.
one dominant block.the title block or the hero. everything else is smaller.
sections are stacked, not nested.a page is a column of full width sections separated by rules.
footers are slim unless the page is the home page.the full footer appears once per site.

previous in partspatterns next in partsin use