Define a consistent set of breakpoints, contained layout rules and grid rules for rendering media

Some notes:

Initial suggestion for breakpoints based on optimised media.

Breakpoint 1 - no media query - 1x and 2x
Breakpoint 2 - all and (min-width: 640px) and (max-width: 767px) - 1x and 2x
Breakpoint 3 - all and (min-width: 768px) and (max-width: 1023px) - 1x and 2x
Breakpoint 4 - all and (min-width: 1024px) - 1x and 2x
Breakpoint 5 - all and (min-width: 1024px) and (max-width: 1199px) - 1x and 2x
Breakpoint 6 - all and (min-width: 1200px) - 1x and 2x

Initial suggestion for grids is a set of rules based on a subset of the same breakpoints.

Initial suggestion is to define a width for contained layout for content (based on the breakpoints, either 1024px or 1200px) and a contained layout for text fields for readability, usually around 700px depending on the font size.