NerdWallet is a comparison engine wearing an editorial coat. Article pages open on a wide green gradient band, then drop to near-white where dense rate tables do the real work. One deep green fills every button, active tab and rating star; beneath it a three-step mint ladder washes the section panels. Corners stay almost square and there is essentially no elevation.
Montserrat — a Swiss neo-grotesque (Inter shown as substitute). Hierarchy is built from size and tight negative tracking on the display end; weight stays restrained (medium 500 headings, regular 400 body).
White surface, visible hairline border, no shadow. The workhorse of the comparison pages.
Clickable comparison tile with a green circular arrow and two rate rows.
Flat illustration, bold title, two lines of muted copy, corner arrow.
The palest wash. Separation without a border or a shadow.
Pale-lime editorial callout. Held as a light island in dark mode, so its type stays dark.
Deep-green statistic panel that sits inside the expert-tip callout.
The system gives inputs no radius of their own — the containing chrome supplies the shape.
Label above value, ruled on the leading edge. Never inline.
8px base unit. Card interiors use xl (24px); section gaps run giant (64px) to section (128px).
A deliberate two-step: tight 6px on everything interactive (buttons, inputs), generous 16px on content cards.
| Name | Width | Key changes |
|---|---|---|
| Small mobile | < 425px | Single column; comparison tables become stacked cards; nav reduces to logo plus menu |
| Mobile | 425–599px | Single column; spec grids collapse to one-per-row |
| Large mobile | 600–767px | Two-up category tiles; table columns begin to drop |
| Tablet | 768–1023px | Category rail scrolls horizontally; product cards keep their action column |
| Laptop | 1024–1279px | Full table layout with tightened gutters |
| Desktop | ≥ 1280px | Full layout at container width |
Touch targets: the filled button pair clears 44×44 comfortably at its flat 16px padding; button-outline at 8px 16px sits close to the minimum and needs its hit area extended on touch widths. Collapsing: the nav keeps the wordmark, search and both account controls as long as possible and drops the category links first. Comparison tables are the main responsive event — each row reflows into a stacked card where the institution, rating and rate become vertical fields and the action goes full-width.