This is a terrific question!

If you choose to go with the 8pt soft grid, you can ignore the final dimensions of the component. So if you make a button that has 8px of padding on the top and bottom of the text. And the text is 17px height. The total height of the button will end up being 33px. That's totally fine. The padding is the important part.

You'll also run into problems designing for iOS where the screen width of 375px forces odd number widths.

But as long as you are consistent in using the soft 8pt grid you will be fine :)

Remember, the goal is to be BETTER than arbitrary. You can't do perfect! (Although on Android you can come close!)



Aaron Cecchini-Butler

Senior Systems Designer at Grubhub working on Cookbook (our design system) — as well as contributing to product design work.