Skip to main content

Layout

Structure, spacing, and responsive design rules.

Wide desktop (> 1440px)

Used for very wide screens. Has minimum of 128px horizontal padding, and main content has a maximum width of 1184px.

Diagram of a wide desktop layout with four blue content columns centered, surrounded by two yellow side margins of 128px each, indicating the max content width of 1184px.

Regular desktop + tablet (480px to 1440px)

Default layout for most laptop and tablet devices. Has 32px horizontal padding.

Diagram of a regular desktop layout with four blue content columns filling the width, and yellow side margins of 32px on both sides.

Mobile (< 480px)

Typical breakpoint for mobile layouts. Has 16px side padding.

Diagram of a mobile layout with two blue content columns spanning the full width, and narrow yellow margins of 16px on both sides.