Layout

Instructions for using Innovaccer Design System layout. We use 8px as the base unit for our spacial system.

Spacing

We use 8px as the base unit for our spacial system. The spacing system has been roughly generated by multiplying eight with even numbers.

info_round
12px is an outlier to the rule. This special padding amount allows for better alignment of stacked items while giving elements enough room to breathe.

spacing


Grid

Using a baseline grid creates a consistent rhythm between the components and typography. We use a 12-columns grid.


Types

Regular Grid


PropertyValue
Left padding8px
Right padding8px
Gutter16px

grid layout
Grid with margin

For the outermost grid, this component is used. This can also be nested subsequently if a 16px padding is required on both sides.

PropertyValue
Left padding8 + 8px
Right padding8 + 8px
Gutter16px

grid margin

Columns

The column includes the padding at the inside, 8 px each side. This way the gutter becomes 16px for adjacent columns.

grid column

Components

We use a 8px baseline grid. All UI components including paddings and margins are created in multiples of eight so that everything aligns to the pixel grid. When text is used within a UI element, set the line-height to be consistent with the baseline grid.

baseline grid

Typography

All typography aligns to a 4px baseline grid. This allows for readable line heights at all sizes.

typography