Nerdwallet Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

23tokens

12type steps

10radius steps

4pxspacing base

Nerdwallet, in one page

NerdWallet is a comparison engine wearing an editorial coat, and the design reflects both halves. Article pages open on a wide {colors.primary} gradient band carrying a white headline, a byline row and a set of trust badges — the only place the brand raises its voice. Everything below that band drops to {colors.canvas} and {colors.canvas-soft}, where dense rate tables and product cards do the actual work. The transition is abrupt by design: one saturated green rectangle, then a very long, very quiet document.

The palette is almost monochromatic in hue. {colors.primary} is a deep spruce green that fills every button, every active tab and every rating star, and beneath it sits a full ladder of mints — {colors.mint-50}, {colors.mint-100}, {colors.mint-200} — that wash section panels, icon tiles and photo frames. Those mints carry enormous surface area, far more than any accent, which is what keeps a page of financial tables from reading as a spreadsheet. The only colours outside the green family are {colors.link} for inline links and a lime family used for emphasis.

The shape language is the surprise. For a consumer product this heavily illustrated, the corners are nearly square: the primary button sits at {rounded.xs} — two pixels — and cards rarely exceed {rounded.lg}. There is essentially no elevation; the single shadow in the system is a very wide, very faint double-layer stack. Separation is done with {colors.hairline} rules and mint fills instead. The result reads as trustworthy and utilitarian rather than soft.

Key Characteristics:

One deep green, {colors.primary}, fills every action and every active state across all page types.
A three-step mint ladder ({colors.mint-50} → {colors.mint-100} → {colors.mint-200}) carries the largest surfaces in the system.
Buttons are nearly square at {rounded.xs}; the shape language stays tight even where illustration is playful.
Almost shadowless — {colors.hairline} rules and mint washes replace elevation.
Editorial pages follow a fixed rhythm: green gradient band → white body → mint callout → white comparison table.
A lime family ({colors.lime-hero}, {colors.lime-panel}, {colors.lime-accent}) supplies emphasis that green cannot, since green is spent on controls.
Headings sit in pure {colors.ink} black, not a softened near-black.

Do's and don'ts

Do

Spend {colors.primary} on actions and active states only — buttons, rating stars, active tabs, in-body links.
Reach for the mint ladder ({colors.mint-50} → {colors.mint-200}) when a section needs separation; it is the system's substitute for elevation.
Keep controls at {rounded.xs} and cards at {rounded.lg}; save {rounded.xxxl} for decorative panels and photo frames.
Separate table rows with a single {colors.hairline} rule and no vertical dividers.
Use the lime family for emphasis that has to survive on a green ground, where {colors.primary} would disappear.
Set headings in {colors.ink} pure black and body copy at weight 300 — the weight gap is the hierarchy.
Give every comparison figure a {typography.caption} label above it in {colors.body}, never inline.
Open editorial pages with {hero-band} and then drop immediately to a light canvas; do not carry the green further down.

Don't

Don't round the filled buttons. {rounded.xs} is a deliberate choice against the softness of the illustration style.
Don't add drop shadows to cards — use the {colors.hairline-strong} border instead. The system's only shadows sit at 4–5% opacity.
Don't use {colors.link} blue and {colors.primary} green interchangeably; blue is a supporting reference, green is navigation the reader is meant to follow.
Don't extend {hero-band} green into body sections or use it as a card fill.
Don't introduce a warm accent. The palette runs green through mint with blue as the only outside hue.
Don't set body copy above weight 300 or headings below 700 — collapsing the gap flattens the hierarchy.
Don't place {colors.lime-panel} on white as a text colour; the lime tier only works as a fill on white or as type on green.
Don't give {text-input} a radius or a border of its own; the containing chrome supplies both.

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Nerdwallet design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- primary: #008254
- primary-deep: #006642
- forest: #00482f
- on-primary: #ffffff
- lime-hero: #9ae600
- lime-panel: #e8fdac
- lime-accent: #ddfa88
- lime-ribbon: #a8ea4c
- logo-lime: #8dc63f
- canvas: #ffffff

Type:
- families: Gotham, GothamDisplay, Chronicle Display, Montserrat
- scale: 11, 12, 13, 14, 16, 18, 20, 24, 28
- weights: 300, 500, 700

Shape:
- radius: 0, 1, 2, 4, 6, 8, 10, 12, 16, 20
- elevation: `ex-toast` — Toast notification surface — feature-card shape + medium shadow.

Spacing: 4, 8, 12, 16, 20, 24, 32, 40

Rules:
- Spend `{colors.primary}` on actions and active states only — buttons, rating stars, active tabs, in-body links.
- Reach for the mint ladder (`{colors.mint-50}` → `{colors.mint-200}`) when a section needs separation; it is the system's substitute for elevation.
- Keep controls at `{rounded.xs}` and cards at `{rounded.lg}`; save `{rounded.xxxl}` for decorative panels and photo frames.
- Separate table rows with a single `{colors.hairline}` rule and no vertical dividers.
- Use the lime family for emphasis that has to survive on a green ground, where `{colors.primary}` would disappear.
- Set headings in `{colors.ink}` pure black and body copy at weight 300 — the weight gap is the hierarchy.

Avoid:
- Don't round the filled buttons. `{rounded.xs}` is a deliberate choice against the softness of the illustration style.
- Don't add drop shadows to cards — use the `{colors.hairline-strong}` border instead. The system's only shadows sit at 4–5% opacity.
- Don't use `{colors.link}` blue and `{colors.primary}` green interchangeably; blue is a supporting reference, green is navigation the reader is meant to follow.
- Don't extend `{hero-band}` green into body sections or use it as a card fill.
- Don't introduce a warm accent. The palette runs green through mint with blue as the only outside hue.
- Don't set body copy above weight 300 or headings below 700 — collapsing the gap flattens the hierarchy.

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

Source pages: the homepage, the high-yield savings comparison page, and the best-credit-cards page.

Brand & Accent

Spruce ({colors.primary} — #008254): the brand. It fills {button-primary}, {icon-circle-active}, rating stars and every in-body green link, and it is the base of the editorial hero gradient. By pixel volume it is the single most-used non-neutral in the system.
Deep Spruce ({colors.primary-deep} — #006642): the fill of {stat-block-dark}, the dark statistic panel that sits inside the mint expert-tip callout.
Forest ({colors.forest} — #00482f): the deepest green, used where the hero gradient lands darkest and on dense editorial chrome.
Logo Lime ({colors.logo-lime} — #8dc63f): the lime inside the wordmark's leading mark. It appears at small scale on every page and nowhere else.
Hero Lime ({colors.lime-hero} — #9ae600): the vivid lime that sets the brand name inside the homepage hero headline — one word, once per page.
Panel Lime ({colors.lime-panel} — #e8fdac): the fill of {expert-tip-panel} and the colour of {editorial-badge} text on the green band.
Accent Lime ({colors.lime-accent} — #ddfa88): a brighter lime used for highlight marks on the comparison pages.
Ribbon Lime ({colors.lime-ribbon} — #a8ea4c): the lime end of the {marquee-ribbon} gradient — the only place the lime family covers a large surface.

Surface

Canvas ({colors.canvas} — #ffffff): the page, the nav bar and every card.
Soft Canvas ({colors.canvas-soft} — #f7f7f7): the page tint behind long comparison pages and the fill of {button-secondary}. It carries more area than any other surface on the savings page.
Mint 50 ({colors.mint-50} — #effcf8): the palest wash, used for {section-panel-mint} and {icon-circle-inactive}.
Mint 100 ({colors.mint-100} — #e3faf2): one step up, used for {media-frame-mint} and {award-ribbon-pill}.
Mint 200 ({colors.mint-200} — #b7ecda): the most saturated mint, reserved for small emphasis fills.
Hairline ({colors.hairline} — #ebebec): rules between table rows and inside cards.
Strong Hairline ({colors.hairline-strong} — #d8d9da): the visible border on {product-card} and {button-outline}.

Text

Ink ({colors.ink} — #000000): every heading and product name. Pure black, not softened.
Body ({colors.body} — #3d4045): running copy and {spec-cell} labels.
Muted ({colors.muted} — #64666a): captions, disclosure lines and {eyebrow-label}.
Faint ({colors.faint} — #b1b3b5): the quietest tier, used for de-emphasised metadata.

Semantic

Link ({colors.link} — #005fb9): inline links inside tables and cards, always underlined.
Info ({colors.info} — #4b99e6): a lighter blue used for supporting informational marks.
Error ({colors.error} — #de2828): the system's validation and destructive red, reserved for form errors and removal actions.

Type scaleRead the full spec

Font Family

Gotham and GothamDisplay carry the entire system. Gotham handles body copy, UI labels, captions and the largest homepage headline; GothamDisplay — the tighter-fitting display cut — takes most editorial headings between 14 and 40px. The pairing is unusual in that the display cut is used at *smaller* sizes than the text cut's maximum, so the two overlap through the middle of the scale rather than splitting cleanly at a size boundary.

The weight range is wide and genuinely used: 300 for body copy, 500 and 600 for interface text, 700 for headings and labels, and 900 available at the top. Body copy at weight 300 against 700 headings is what gives the long editorial pages their airy feel despite very tight corner radii. A serif, Chronicle Display, appears on the long-form editorial pages as a secondary face.

Hierarchy

Token	Size	Weight	Line Height	Use
`{typography.display-xl}`	52px	700	1.15	Homepage hero headline
`{typography.display-lg}`	40px	700	1.2	Editorial page headline
`{typography.heading-1}`	36px	700	1.2	Section headline
`{typography.heading-2}`	28px	700	1.25	Sub-section headline
`{typography.stat-value}`	24px	700	1.2	Statistic figure
`{typography.heading-3}`	20px	700	1.3	Card title
`{typography.heading-4}`	20px	500	1.3	Light sub-heading
`{typography.body-lg}`	18px	300	1.5	Lead paragraph
`{typography.body-md}`	16px	300	1.5	Body copy
`{typography.body-sm}`	14px	300	1.5	Table copy, captions
`{typography.ui-label}`	14px	700	1.2	Button and nav labels
`{typography.ui-sm}`	13px	500	1.3	Dense interface text
`{typography.caption}`	12px	500	1.4	Field labels, disclosures
`{typography.eyebrow}`	12px	700	1.2	Uppercase section labels
`{typography.micro}`	11px	500	1.4	Trust badges, fine print

Principles

Hierarchy is carried by weight contrast more than by size. The gap between weight-300 body and weight-700 headings is wide enough that adjacent sizes (20px heading against 18px lead) still read as distinct levels. Uppercase is reserved for two roles — {typography.eyebrow} section labels and button text — and never used for headings.

Note on Font Substitutes

Gotham and GothamDisplay are licensed faces. Montserrat is the closest widely-available geometric substitute for Gotham, though it runs slightly wider and needs a small negative tracking at display sizes; Proxima Nova or Jost are nearer in proportion if available. Keep the 300 weight for body copy — dropping to 400 collapses the weight contrast the hierarchy depends on. Substitute the editorial serif with Playfair Display or Source Serif 4.

Components and layoutRead the full spec

Every spec below documents Default and, where extracted, Active states only.

Buttons

button-primary — the green action ("SIGN UP", "APPLY NOW", "LEARN MORE")

Background {colors.primary}, text {colors.on-primary}, type {typography.ui-label}, rounded {rounded.xs}, padding {spacing.md}, Elevation Level 3.
Uppercase label. The flat 16px padding on all four sides is what gives it its blocky proportion, and the 2px radius keeps it reading as a rectangle rather than a pill.

button-secondary — the quiet companion ("SIGN IN")

Background {colors.canvas-soft}, text {colors.primary}, type {typography.ui-label}, rounded {rounded.xs}, padding {spacing.md}.
Same geometry as {button-primary} with the fill and text roles swapped, so the pair reads as one control with two weights.

button-outline — the compact utility control

Text {colors.primary}, type {typography.ui-label}, rounded {rounded.lg}, padding 8px 16px, 1px {colors.hairline-strong} border, no fill.
The only button that departs from both the square radius and the flat padding — noticeably shorter and softer than the filled pair.

Cards & Containers

product-card

Background {colors.canvas}, text {colors.ink}, type {typography.body-md}, rounded {rounded.lg}, 1px {colors.hairline-strong} border, Elevation Level 2.
The workhorse of the comparison pages: product name, star rating, a {button-primary} action column on the right, then a spec grid of {spec-cell} blocks and a stack of {accordion-row} disclosures.

category-tile

Background {colors.canvas}, text {colors.ink}, type {typography.body-sm}, rounded {rounded.xxl}.
Flat illustration on top, bold title, two lines of {colors.muted} description, with a small diagonal arrow pinned to the upper-right corner.

section-panel-mint

Background {colors.mint-50}, text {colors.ink}, rounded {rounded.xxxl}.
The pale wash that holds the homepage category grid, providing separation without a border or shadow.

media-frame-mint

Background {colors.mint-100}, rounded {rounded.xxxl}. Holds editorial photography with the mint visible as a border-like margin around the image.

expert-tip-panel

Background {colors.lime-panel}, text {colors.ink}, type {typography.body-md}, rounded {rounded.lg}.
A signature editorial component: a wide pale-lime band opened by a bold arrow-prefixed label, carrying advisory copy and hosting {stat-block-dark} and {stat-chip-light} inside it.

stat-block-dark

Background {colors.primary-deep}, text {colors.on-primary}, type {typography.stat-value}, rounded {rounded.lg}.
Sits inside {expert-tip-panel}, stacking a multiplier and a rate with small {typography.caption} labels beneath each, over an outline arrow motif.

stat-chip-light

Background {colors.canvas}, label {colors.muted} at {typography.caption}, rounded {rounded.lg}.
The white counterpart that carries the comparison figure beside {stat-block-dark}.

accordion-row

Background {colors.canvas}, text {colors.ink}, type {typography.ui-label}, rounded {rounded.lg}.
A leading glyph, a label and a trailing chevron, separated from its neighbours by a {colors.hairline} rule.

Inputs & Forms

text-input

Text {colors.ink}, type {typography.body-md}, rounded {rounded.none}.
Square-cornered. The system gives inputs no fill and no border of their own — they sit inside a bordered container that supplies the chrome, which is why the input itself carries almost no styling.

Navigation

nav-bar (Desktop)

Background {colors.canvas}, text {colors.ink}, type {typography.ui-label}.
Wordmark left, eight category links centre, then search, {button-secondary} and {button-primary} right. White on every page regardless of the band beneath it.

nav-bar (Mobile)

Retains wordmark, search and both account controls; category links move behind a menu.

icon-circle-active / icon-circle-inactive

Active fills {colors.primary} with an {colors.on-primary} glyph; inactive fills {colors.mint-50} with a {colors.primary} glyph. Both {rounded.full}.
Form the horizontal category rail above comparison pages, each with a label beneath and an underline marking the active item.

breadcrumb

Text {colors.on-primary} at {typography.caption}, set on the green hero band with chevron separators.

footer

Background {colors.canvas-soft}, text {colors.body}, type {typography.body-sm}.

Signature Components

hero-band

Background {colors.primary} running as a horizontal gradient toward a lighter green, text {colors.on-primary}, type {typography.body-md}.
Opens every editorial page. Carries {breadcrumb}, the {typography.display-lg} headline, a byline row with circular avatars, {editorial-badge} trust marks and a lead paragraph. Full-bleed, square-cornered, and the only saturated plane on the page.

editorial-badge

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-nerdwallet {--page-bg: #ffffff;
  --page-bg-gradient: none;
  --text-color: #000000;
  --heading-color: #000000;
  --link-color: #005fb9;
  --link-hover-color: #004586;
  --border-color: #d1d1d1;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(0,0,0,0.06);
  --card-hover-shadow: 0 6px 18px rgba(0,0,0,0.12);
  --header-bg: #000000;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #ffffff;
  --footer-text-color: #595959;
  --button-bg: #008254;
  --button-text-color: #ffffff;
  --button-hover-bg: #004f33;
  --button-border: none;
  --button-border-radius: 8px;
  --button-secondary-bg: #f0f0f0;
  --button-secondary-text-color: #000000;
  --button-secondary-hover-bg: #e0e0e0;
  --button-secondary-border: 1px solid #d1d1d1;
  --prompt-bg: #f2f2f2;
  --prompt-text-color: #000000;
  --base-font: var(--font-montserrat);
  --heading-font: var(--font-serif);
  --card-border-radius: 8px;
}

Download theme.css

Where this came from

Source document: volt/design-md/nerdwallet/DESIGN.md · 35.2 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.