Design Width

What's the design width?

This is your design's max width in Figma or XD including any container padding. In most cases, this will equal the width of your entire frame or artboard. If the design includes extra space on the sides for wider screens, use only the size of your max width + container paddings.

Why does the design width matter?

When using fluid typography, the design width gives us a reference to scale up and down from. Without this, content will likely appear smaller or larger than intended on every screen size.

Why does padding go inside the container?

If padding is added to a parent of the max width container, the container width will shrink when below the max width. This causes unintended wrapping of text and content.