Skip to content


Currency uses a grid system as a high-level model for Nerds to design a more consistent user experience across NerdWallet.

To design and then implement within the Currency grid system (or "Currency Grid") requirements, Currency provides a set of resources (e.g., Figma assets, React components, base-styles rules).



The Currency Grid requirements include being responsive to support different mobile web and desktop layouts. There is a single breakpoint at 768px, above which is referred to as "desktop" or "wide", and below is referred to "mobile" or "not wide".

Fluid columns

The Currency Grid requirements use a 4 fluid (percentage-based, scaling linearly with the viewport) column grid layout on mobile (< 768px), and a 12 fluid column grid layout on desktop (>= 768px) that stretches up to 1280px. Above 1280px, the grid stops growing and becomes fixed.

Fixed gutters

The fixed spaces between the columns are called gutters.

One breakpoint

At the mobile breakpoint, both columns and gutters snap to a different size:

Viewport size
Columns (fluid)
Gutters (fixed)
Outer side margin (fluid)
Content Area
375px (min width)43 (16px each)16px (spacing-3)343px
768px (wide breakpoint)1211 (24px each)~52px (spacing-5)664px
1280px (max width)1211 (24px each)64px (spacing-5)1152px

Note: In reality, these values are flexible and scale with the viewport size. The numbers above are snapshots at key sizes for demonstration purposes.

Max width

The Currency Grid respects a max width of 1280px. Columns will stop fluidly growing at 1280px. The outer margins continue to grow with the browser window and the grid remains centered.

Content area

This is the space that contains the columns and gutters. Product designers should not normally design outside the Content Area.