NerdWallet

Overview

NerdWallet is a financial guidance platform that transforms complex money decisions into clear, actionable insights. The brand serves consumers navigating credit, banking, loans, and investments—audiences who value research-backed recommendations over marketing hype. The aesthetic is 'Confident Clarity': a modern, accessible design language that combines the authority of financial expertise with the warmth of human guidance. The UI evokes trust through clean typography, purposeful use of the signature green accent (#008254), and generous whitespace that reduces cognitive load. The emotional response is reassurance—users feel guided, not overwhelmed. NerdWallet's voice is conversational yet authoritative: knowledgeable without condescension, practical without jargon. The brand uses direct, benefit-driven language and avoids financial clichés. Example sentence: 'We compared 47 credit cards so you don't have to—here are the 3 that actually match your spending.'

Colors

The color system is anchored by a confident forest green primary (#008254) used exclusively for CTAs, links, and interactive focus states—this is the brand's signature accent that signals trust and financial stability. The secondary accent, lime-green (#a8ea4c), provides energy and highlights key information, particularly in panels and accent elements. Neutrals form the backbone: deep charcoal (#3d4045) for primary text, mid-gray (#64666a) for secondary text, and light gray (#f7f7f7) for page backgrounds. The surface stack progresses from white (#ffffff) for raised cards to progressively darker grays for container hierarchy. Error red (#dc2626) is reserved for validation and warnings. Accent orange (#ffb800) is used sparingly for tertiary actions or callouts. All interactive elements use t

Typography

The type system uses Gotham as the primary font family (with system-ui and sans-serif as fallbacks), a geometric sans-serif that conveys modernity and approachability. Display (52px, 700 weight) is reserved for hero headlines and major page titles, set with -0.02em letter-spacing to create visual impact. Headline-lg (40px, 700) and headline-md (28px, 700) structure section hierarchies with consistent -0.01em to -0.015em tracking for tightness. Body-lg (18px, 400) and body-md (16px, 400) are the workhorses for descriptive copy and card content, with 0.005em to 0.01em letter-spacing for readability. Label-md (14px, 600) and label-sm (12px, 500) are used for buttons, badges, and UI labels with increased tracking (0.02em to 0.03em) to enhance legibility at small sizes. All headlines use 700 we

Layout

The layout follows a 12-column grid system with a max-width of 1280px, centered on the viewport. The design uses a fluid approach on mobile (full bleed with 24px gutter) and fixed containers on desktop. Page rhythm is established through consistent spacing: lg (40px) separates major sections (hero, feature blocks, testimonials), md (24px) divides subsections and card groups, and sm (12px) provides breathing room within components. The header is fixed at 56px height with 24px padding, maintaining visual hierarchy without consuming excessive vertical real estate. Hero sections occupy 480px minimum height on desktop, creating immersive entry points. Cards are arranged in responsive grids: 1 column on mobile, 2 columns on tablet, and 3–4 columns on desktop. Container padding uses the gutter to

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids excessive layering. Level 1 (Base/Surface): no shadow; flat backgrounds at #f7f7f7 or #ffffff. Level 2 (Raised Cards): box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), a subtle lift that distinguishes cards from the page background without visual noise. Level 3 (Hovered Cards & Modals): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), applied on hover to signal interactivity and create a sense of lift. Level 4 (Floating Elements, Tooltips): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), reserved for modals, dropdowns, and floating panels that

Shapes

The shape philosophy is 'Soft-Technical': rounded corners are used strategically to soften the precision of financial interfaces while maintaining a professional, trustworthy appearance. Buttons and primary CTAs use lg radius (12px) to create approachable, tappable targets that feel modern without being overly playful. Cards and containers use md radius (8px) for a balanced, neutral appearance that works across all content types. Input fields and form elements use lg radius (12px) to match button styling and create visual cohesion in forms. Small UI elements (badges, pills, tags) use full radi

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons use {colors.primary} (#008254) background with {colors.on-primary} (white) text, lg radius (12px), and 12px vertical / 24px horizontal padding for a 48px total height. On hover, the background transitions to {colors.primary-fixed-dim} (#006642) with a 200ms ease-in-out transition. Secondary buttons use a transparent background with a 2px solid {colors.primary} border, same text color, and identical padding/radius; on hover, the background fills with {colors.surface-container} (#ebebec). Both button types use {typography.label-md} (14px, 600 weight) with 0.02em letter-spacing for clarity. Disabled buttons reduce opacity to 50% and remove pointer events. Links use {colors.primary} text with no underline by def

Do's and Don'ts

**Do**

• Do use the primary green (#008254) exclusively for CTAs, links, and focus states—it's the brand's signature and must remain distinctive.
• Do maintain 24px gutters and 40px section spacing to create breathing room and reduce cognitive load in financial interfaces.
• Do apply 200ms ease-in-out transitions on all interactive state changes (hover, focus, active) to signal responsiveness without feeling sluggish.
• Do use Gotham with consistent letter-spacing (-0.02em for headlines, 0.01em for body) to maintain the brand's geometric, modern character.
• Do pair the primary green with white text (not black) on interactive elements for maximum contrast and accessibility (WCAG AAA).
• Do use the full rounded radius (9999px) for badges and pills to create visual distinction from structural containers.

**Don't**

• Don't use the secondary green (#a8ea4c) for primary CTAs—it's an accent for highlights and panels only; reserve the darker green for user actions.
• Don't apply shadows deeper than {elevation.lg} (0 16px 40px rgba(0, 0, 0, 0.12)) on standard components; excessive depth contradicts the clean, modern aesthetic.
• Don't use rounded corners smaller than sm (2px) on interactive elements; they become difficult to perceive and feel unfinished.
• Don't mix Gotham with other serif or display fonts in the same interface; maintain typographic consistency to preserve the brand's geometric identity.
• Don't place small labels (label-sm) over photographic backgrounds without a text-shadow (0 2px 4px rgba(0, 0, 0, 0.1)) or semi-transparent backdrop—legibility will fail.
• Don't use the error red (#dc2626) for non-critical messaging; reserve it for validation errors, warnings, and destructive actions only.