PNC Bank

Overview

PNC Bank's design system embodies Institutional Modernism—a philosophy that marries financial authority with contemporary accessibility. The brand serves retail and small-business customers seeking clarity, security, and simplicity in their banking experience. The visual language prioritizes legibility and trust through a restrained palette anchored by a confident blue primary (#0069aa) paired with an energetic orange secondary (#ef6a00) that signals opportunity and forward momentum. The emotional response is one of competence without coldness: the interface feels professional yet approachable, designed for users who value efficiency and transparency.

PNC's voice is direct, reassuring, and jargon-light. The brand avoids financial complexity in favor of plain language and concrete benefits. Tone is warm but not casual; confident but not presumptuous. Example: 'Earn up to $400 when you set up direct deposit—no hidden terms, just straightforward rewards.' The typography system uses Neulis Sans for headlines (a geometric, modern typeface) paired with Arial for body text, creating a visual hierarchy that guides users through product offerings without overwhelming them.

Colors

The color system is built on a foundation of institutional trust (primary blue #0069aa) and energetic action (secondary orange #ef6a00). Primary (#0069aa) is reserved for interactive elements—buttons, links, focus states, and key CTAs—where it commands attention without aggression. The secondary orange (#ef6a00) appears on promotional elements, highlights, and accent features that signal new opportunities or special offers. The neutral surface stack (#ffffff to #d8d8d8) provides breathing room and ensures text legibility across all contexts. On-surface text (#484848) is a warm charcoal that reduces eye strain compared to pure black. The tertiary color (#1a3547, a deep slate) anchors the header and navigation, establishing visual weight and authority. Error states use a clinical red (#d32f2

Typography

The type system uses a two-family approach: Neulis Sans (a geometric, modern sans-serif) for headlines and display text, paired with Arial for body and label text. This pairing signals modernity in headlines while maintaining universal readability in dense content. Display (56px, 700 weight, -0.02em tracking) is reserved for hero statements and major page titles; Headline-lg (40px, 600 weight) for section headers; Headline-md (28px, 600 weight) for subsections. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and prominent descriptions; Body-md (16px, 400 weight, 24px line-height) for standard body copy and form labels. Label-md (14px, 600 weight, 0.01em tracking) is applied to buttons, badges, and navigation items; Label-sm (12px, 500 weight, 0.02em trackin

Layout

The layout follows a 12-column grid with a maximum container width of 1200px, centered with equal margins on desktop. The gutter between columns is 24px, and section padding uses the lg spacing token (40px) for major section breaks. Hero sections span full width with 64px (xl spacing) vertical padding and 24px (md spacing) horizontal padding to create breathing room around content. Cards and component containers use 24px (md spacing) internal padding, with 12px (sm spacing) between nested elements. The spacing scale is semantic: xs (4px) for micro-interactions and icon spacing, sm (12px) for component-internal gaps, md (24px) for card padding and section margins, lg (40px) for major section separation, and xl (64px) for hero and full-width container padding. White-space is generous but pur

Elevation & Depth

Depth is conveyed through a three-tier shadow system that avoids heavy drop-shadows in favor of subtle, diffused elevation. Level 1 (Base/Surface): no shadow; elements sit flat on the background. Level 2 (Raised Cards/Inputs): box-shadow 0 1px 3px rgba(0, 0, 0, 0.08), used for cards, input fields, and standard UI containers. Level 3 (Elevated/Modals/Hover): box-shadow 0 4px 12px rgba(0, 0, 0, 0.12), applied to modals, dropdowns, and card-hover states. Level 4 (Floating/Sticky): box-shadow 0 8px 24px rgba(0, 0, 0, 0.15), reserved for sticky headers, floating action buttons, and top-layer overla

Shapes

The shape philosophy is Refined Pragmatism: corners are slightly rounded to soften the institutional feel without introducing organic or playful curves. The rounded scale progresses from sm (2px) for subtle softening on inputs and small components, to DEFAULT (4px) for standard buttons and cards, to md (6px) for slightly more prominent containers, lg (8px) for larger cards and modals, and xl (12px) for hero sections and full-width containers. Buttons use 4px (DEFAULT) to maintain a modern, professional appearance. Input fields use 4px (DEFAULT) to match button styling and create visual consist

Components

Action Elements Buttons are the primary interaction mechanism and come in three variants. Primary buttons (background: #0069aa, text: white, padding: 10px 20px, height: 44px, border-radius: 4px) are used for main CTAs like 'Get Started' and 'Apply Now'. On hover, the background shifts to #004c97 (primary-container) over 200ms, signaling interactivity without introducing new colors. Secondary buttons (background: white, text: #0069aa, border: 1px solid #cccccc, padding: 12px 10px, height: 40px, border-radius: 2px) are used for alternative actions like 'See All' or 'Learn More'. Tertiary buttons (background: transparent, text: #0069aa, padding: 8px 16px) are used for low-priority actions and links within content. All buttons use Arial font at 14px weight 600 (label-md) for consistency.

Do's and Don'ts

**Do**

• Do use the primary blue (#0069aa) exclusively for interactive elements (buttons, links, focus states) to maintain visual hierarchy and guide user attention.
• Do maintain 24px (md spacing) as the standard padding inside cards and containers; never use less than 12px (sm spacing) for internal component spacing.
• Do apply the Neulis Sans typeface only to headlines (display, headline-lg, headline-md); use Arial for all body text and labels to ensure readability at small sizes.
• Do use the secondary orange (#ef6a00) sparingly—only for promotional badges, special offers, and accent highlights—to preserve its impact and avoid visual noise.
• Do include a 200ms ease-in-out transition on all hover and focus state changes to signal interactivity smoothly without jarring the user.
• Do maintain a minimum 4.5:1 contrast ratio between text and background colors to meet WCAG AA accessibility standards across all contexts.

**Don't**

• Don't use the primary blue (#0069aa) for body text, backgrounds, or non-interactive elements; reserve it exclusively for CTAs and interactive states.
• Don't apply border-radius greater than 4px to buttons or input fields; this softens the professional appearance and conflicts with the Refined Pragmatism aesthetic.
• Don't mix Neulis Sans and Arial within a single headline or body paragraph; maintain clear separation between display (Neulis) and body (Arial) text.
• Don't use the secondary orange (#ef6a00) on primary CTAs or navigation elements; it should appear only as an accent or highlight to avoid competing with the primary blue.
• Don't apply shadows greater than 0 8px 24px rgba(0, 0, 0, 0.15); excessive shadow depth undermines the clean, modern aesthetic and creates visual clutter.
• Don't reduce padding below 12px (sm spacing) in any interactive component; cramped spacing reduces usability and appears unprofessional.