⚛️ Foundation

Layout and Spacing

Grid System for Web and mobile devices

• 8pt baseline grid
• 4pt baseline grid

Use multiple of 8 to define the base sizes, paddings, margins, and vertical rhythm across the screens. Always try to position elements and components using 8pt baseline.

4pt baseline provided more flexibility when aligning Typography, icons and other small components.

Usage:

Increments of 8pt - 8, 16, 24, 32

Increments of 4pt - 4, 12, 20, 28

Shapes

Flat - No Radius

Radius - 4pt, 8pt

Round - Radius 100px in Sketch🔶 and border-radius: 50%; in code