In order to set up the grid and spacing system, I did some math on paper to test out the best base spacing unit for the system (4px, 8px, or 16px). During testing I found out that 4px was way too tiny for a grid system (all I saw was blurry red lines), and continued on with the math for 8px and 16px grids. Then I found out the prospective screen sizes for even-columned grids based on 8px or 16px spacing, which turned out to be 1536px, 1600px, 1760px, 1792px, and 1920px. (Essentially finding out which screen sizes were evenly divisible by 8 and 16.)
Fun fact about the chosen screen sizes: 1536px is also a 16″ Macbook screen size, 1600px is the minimum Dribbble post size, and 1920px is the maximum desktop design size, so 8px and 16px grid spacing worked out nicely for the desired screens and platform sizing needed for this design system. From there I tried to set up main divider lines to set up a CSS grid style column and row layout to group the spacing blocks (creating column guidelines ranging from 10-14 columns, depending on the screen size). Here’s what I came up with: