PINACLE Design System & UI Library

As PINACLE’s feature set expanded and modernization efforts accelerated, our UX and engineering teams were increasingly constrained by inconsistent patterns and one-off components. We needed a shared system – one that could keep enterprise-grade workflows usable and coherent across dozens of services.

I led the effort to define and scale the PINACLE design system in close partnership with our Whiskey UI/Dev crew, focusing on tokens, component libraries, and a governance model that worked for 20+ product teams.

As UX Manager and system lead, I:

• Defined the vision and scope for the PINACLE design system and its relationship to PNC’s broader brand and digital standards.
• Organized and prioritized the initial component set (navigation, cards, forms, widgets, tables, notifications, dialogs, etc.).
• Collaborated closely with Whiskey (UI/Dev) to align Figma libraries with coded Angular components and token architecture.
• Established standards and guardrails so designers across the platform could adopt the system without losing necessary flexibility.

PINACLE supports a wide range of corporate banking workflows: payments, liquidity, reporting, cards, trade, fraud protection, and more. Each crew had evolved its own UI conventions over time, leading to:

• Inconsistent patterns for common tasks (tables, filters, search, approvals).
• Duplicated components and one-off variations across codebases.
• Increased design and dev time for new features, with frequent re-litigating of basic UI decisions.
• Client experiences that felt different from page to page within the same platform.

The challenge: introduce a design system that could:

• Support complex, high-risk banking tasks without oversimplifying them.
• Work within existing technology constraints (Angular, legacy code, accessibility requirements).
• Be adopted incrementally by 20+ teams without forcing a “big bang” redesign.

We started by aligning on the **foundations** – the pieces every component relies on: colors, typography, spacing, elevation, radii, and iconography.

• Defined a core token set (colors, typography, spacing, radius, shadows) aligned with PNC’s refreshed brand and accessibility standards.
• Standardized a 20px icon grid for system icons across PINACLE, building a consistent visual language for actions and status.
• Documented usage rules (e.g., primary vs. secondary actions, success/warning/error semantics, spacing scale) to reduce ambiguity for designers and developers.

With foundations in place, we focused on the components and patterns that would deliver the most value across PINACLE:

• Created core components: buttons, inputs, selects, dropdowns, tables, filters, cards, alerts, modals, navigation, tabs.
• Defined patterns for key workflows: approvals, data review, task lists, notifications, and widget-based dashboards.
• Documented variants and states – hover, focus, disabled, error, loading – and their behavior in code.

A design system only matters if it shows up in the product. To close the loop between design and development, I partnered closely with the Whiskey crew:

• Mapped design tokens to engineering tokens, ensuring one source of truth for color, type, and spacing.
• Aligned Figma component structure with Angular component APIs (props, variants, and state handling).
• Created usage examples and “do/don’t” patterns in both Figma and code sandboxes to help teams implement correctly.

With many independent product teams, we needed a governance model that encouraged adoption without being heavy-handed.

• Established a light-weight intake and review process for new components and pattern proposals.
• Set expectations for when teams should extend existing components vs. request new ones.
• Embedded system usage into our design reviews and PR processes, so system alignment was part of the normal workflow – not an afterthought.
• Created documentation and “starter kits” to help new teams onboard quickly.

• Created a single, shared visual and interaction language for the PINACLE platform.
• Reduced one-off UI implementations, helping teams move faster and spend more time on complex workflows instead of base components.
• Improved accessibility and consistency by standardizing color contrast, hit areas, and focus states across components.
• Established a foundation for upcoming modernization projects (dashboard, navigation, widget library) to build on a common UI base.

Leading the PINACLE design system reinforced that successful systems are as much about people and process as they are about components. The most important work wasn’t just drawing cleaner buttons – it was aligning designers, developers, and product owners around a shared way of building experiences.

The system has become a backbone for our ongoing modernization efforts, letting us focus more on real client problems and less on re-solving the same UI decisions project after project.