How an 8x Grid System Will Improve the American Express Experience

Building DLS v7 on one of the most common layout grid systems will improve how we design our products and the experience for our customers.

Layout is Paramount in Product Design

In combination with color and typography, the hierarchy of a page conveys importance, intention, and next steps to our customers. Having a consistent and scalable spacing foundation eliminates guesswork while designing and improves the end experience. It puts the focus on the functionality and purpose of what your team is building and reduces time to market.

The 8x grid system is one of the most common layout systems and we’re happy to announce DLS v7 will be using it too.

8x

As the variety and diversity of devices, screen sizes, and pixel densities grows we need to be more responsive and device agnostic. Using 8 as a foundation, we have an even number that easily divides and multiplies to scale up and down to space components on a page. 8x (8, 16, 24, 32, etc.) is used to space content from navigation, between page elements, and even gutters and margins across breakpoints. Smaller components, such as icons and type, can align to a 4x grid. Read about our new responsive grid coming in v7 here.

Icons

American Express icons are designed at 48x48, with core shapes that are multiples of 4x. While their starting point fits nicely into an 8x grid system, we’re making improvements in v7. Our icon sizing classes are updating to 8x sizes whenever possible, with 4x size exceptions only made where necessary.

Typography

Type is one of the main pillars of UI Design, but when scaled to only fit an 8x grid, the jumps between sizes can be too far apart and line heights too large. DLS v7 typography will follow a 4x line height grid for harmonious vertical rhythm and steps between type sizes, all while satisfying WCAG 2.1 Accessibility guidelines.

The Future

So, what does this all mean? In the next major version of the DLS, both design and code will see meaningful improvements. Every component is being rebuilt to follow 8x sizing and padding. All new documentation is coming that will better explain this foundation and how to build on top of it.

Pro Tip: If you’re designing an experience with v7 or a later version of the DLS in Sketch, change your nudging preferences from 10 to 8. Sketch has made this change global, meaning nudging preferences are supported in the inspector when moving objects on art boards.

The image above shows the Nudging settings to space on an 8x grid system.

Feedback

We want to hear from you! Are you excited about moving to an 8x grid system or have questions of the impact on your team’s work? Let us know on slack or by emailing dls@aexp.com.