Grid

Lexicon uses a 4px grid as the minimum unit of measure in terms of distance and space. 4px is a right decision as it allows as scalling with accuracy in alignment. Visual order and cleaness is one of the aims of this system.

4px grid

form distances to build up forms using Lexicon

The grid used in interfaces built with Lexicon follows the following rules:

Maximum grid width: 1280px
Gutter: 32px
Margin: 16px
Number of colums: 12
Column width: varies with the canvas width

Note: Quartz implements Lexicon on top of bootstrap using the default bootstrap grid that has a gutter of 30px and a margin of 15px.

4px usage

A 4px minimum unit of measure allow us to play with values as 8px, 12px, 16px, 20px, 24px and so on. The previously stated units are the ones most used in Lexicon. The follwing set of examples shows how we use this measures to build up our system. Please refer to attributes section inside patterns to see more use cases and learn how Lexicon applies them.

Form example

form distances to build up forms using Lexicon