NerdWallet

Difficulty:
Industry
NerdWallet Effect Preview

Effect Preview

Design Tokens

Key tokens derived from official brand references and this style's prompt. Copy them or pair with the DESIGN.md below.

Colors

  • primaryBrand

    Primary actions & highlights

  • on-primaryDerived

    Text on primary

  • secondaryDerived

    Chips, badges & soft emphasis

  • on-secondaryDerived

    Text on secondary

  • neutralPrompt

    Page canvas

  • on-neutralDerived

    Text on canvas

  • surfaceDerived

    Cards, panels & elevated containers

  • on-surfaceDerived

    Text on surface

  • borderDerived

    Borders & dividers

Radius & Shapes

Prompt
sm · 1px
md · 2px
lg · 3px
full

Spacing

Derived
  • sm8px
  • md12px
  • lg24px

Elevation

Prompt

Depth is expressed through soft, low-contrast shadows.

Typography

Derived
  • Ag

    Headings 32px · bold

    Inter

  • Ag

    Body 16px · regular

    Inter

  • Ag

    Labels 13px · medium

    Inter

NerdWallet stitches editorial and comparison into one page: a deep-green gradient hero band (#008254) opens every article, then the layout drops immediately to white and #f7f7f7 table territory. A mint ladder (#effcf8, #e3faf2, #b7ecda) carries the large surfaces and replaces elevation, buttons stop at a 2px radius, and Gotham sets body at weight 300 against 700 headings — hierarchy comes from the weight gap, not size.

NerdWalletFintech

Prompt Template

Base Template
Design a NerdWallet-inspired interface. - A deep spruce (#008254) gradient hero band opens every editorial page, then the layout drops immediately to white; - A three-step mint ladder (#effcf8, #e3faf2, #b7ecda) carries large panels and media frames instead of shadows; - Near-square geometry: filled buttons at 2px radius, cards at 8px, inputs at 0; - Gotham body at weight 300 against 700 headings -- hierarchy from weight contrast, not size; - Comparison rows ruled by a single #ebebec hairline with no vertical dividers; - Lime (#e8fdac, #9ae600) only for emphasis that must survive on green. Colors: #008254, #f7f7f7, #effcf8, #e8fdac, #000000 with #008254 accent. Typography: Gotham and GothamDisplay, 300/700.

Variant Prompts

📱 Mobile
Design a mobile finance app with NerdWallet aesthetics. White canvas, #008254 actions, mint panels and stacked comparison cards. Trustworthy, touch-friendly.
💻 Web
Design a web app with NerdWallet style. Green hero band, hairline rate tables, mint callouts and 2px button radii. Editorial and utilitarian.
📊 Dashboard
Design a dashboard with NerdWallet design language. #008254 metrics, mint section panels, weight-300 body and ruled comparison rows. Dense but calm.
📄 Landing Page
Design a landing page with NerdWallet visual identity. #008254 gradient band, lime emphasis, expert-tip panel and square CTA blocks. Conversion-focused, credible.

Usage Examples

NerdWallet Savings Comparison

Web
Build a savings comparison page with NerdWallet design language and #008254 actions.

NerdWallet Rate Dashboard

Dashboard
Create a rate dashboard using NerdWallet style with mint panels and hairline comparison rows.

✅ Best For

  • Personal-finance comparison tools
  • Credit card and loan rate pages
  • Financial editorial that must feel trustworthy

❌ Avoid For

  • Playful entertainment apps
  • Soft, heavily rounded lifestyle brands

DESIGN.md File

A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.

Download