PwC

Overview

PwC is a global professional services powerhouse delivering audit, assurance, consulting, and tax expertise to enterprises navigating digital transformation. The design system embodies 'Corporate Dynamism'—a visual language that balances institutional gravitas with energetic forward momentum. The brand personality is authoritative yet approachable: PwC speaks with precision and confidence, translating complex business challenges into clear, actionable insights. The UI conveys trustworthiness through clean typography (serif headlines paired with humanist sans-serif body text), restrained color discipline (deep charcoal on white, punctuated by a vivid red-orange accent), and generous whitespace that signals clarity and control. Voice example: 'Transform your enterprise into an intelligent, connected operation—we'll guide every step.'

Colors

The color system is built on a foundation of corporate neutrality with strategic accent deployment. Primary (#e0301e) is PwC's signature red-orange—used exclusively on CTAs, key interactions, and brand moments to signal action and energy. It appears on the 'Learn more' button, hover states, and active navigation elements. Secondary (#d93954) provides a deeper, more muted accent for supporting UI elements like badges and secondary highlights. Tertiary (#d04a02) adds warmth to tertiary actions and data visualization. The surface stack ranges from pure white (#ffffff) for primary content areas to soft grays (#f5f7f8, #dfe3e6) for container backgrounds and subtle depth. On-surface text is deep charcoal (#2d2d2d) for maximum legibility at 16px body size. Outline colors (#cccccc, #d9d9d9) define

Typography

The type system pairs serif and sans-serif to communicate both heritage and modernity. Headlines use PwC ITC Charter (a custom serif) at weights 700, rendered at 56px (display), 40px (headline-lg), and 28px (headline-md) with tight negative letter-spacing (-0.04em to -0.01em) to create visual impact and authority. Body copy uses PwC Helvetica Neue at 400 weight, 16px size, with 24px line-height (1.5x multiplier) for comfortable reading. Labels and UI text use 600 weight at 12–14px with 0.01–0.05em letter-spacing to add crispness and hierarchy. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on white text overlaid on photography (e.g., hero headlines) to ensure legibility. All font-family declarations include fallbacks: serif headlines fall back to Georgia; sans-serif body falls back to Ar

Layout

The layout operates on a 12-column grid with a max-width of 1280px (80rem), centered with equal margins on desktop. Gutter spacing is 24px between columns; section padding uses the lg spacing token (40px) for vertical rhythm and md spacing (24px) for horizontal breathing room. Container max-widths vary by content type: hero sections span full-width with 64px (xl) padding; card grids use 1280px max-width with 24px gaps; forms constrain to 600px for optimal input field width. Whitespace is generous: section separators use 64px vertical spacing; card stacks use 24px gaps. The spacing scale (4px, 12px, 24px, 40px, 64px) creates a predictable rhythm that reinforces the brand's precision and control. On mobile (< 768px), reduce container max-width to 100% with 16px side padding; stack grid colum

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic effects. Level 1 (Base): flat white surface (#ffffff) with no shadow. Level 2 (Standard Cards): 0 3px 8px rgba(0, 0, 0, 0.15) shadow with 1px border in outline-variant (#d9d9d9). Level 3 (Elevated/Modals): 0 8px 24px rgba(0, 0, 0, 0.12) shadow with 1px border. Hover states on cards lift to Level 3 and translate up 2px (transform: translateY(-2px)) with a 200ms ease-out transition. Input fields use a 1px solid border in outline (#cccccc); on focus, add a 3px inset shadow in rgba(224, 48, 30, 0.1) to signal the primary co

Shapes

The shape philosophy is 'Architectural Precision'—minimal, sharp corners that convey professionalism and control. Border-radius follows a tight scale: buttons and inputs use 2px (sm) for subtle definition; cards use 4px (DEFAULT) for a clean, modern edge; larger containers use 6–10px (md–lg) for softer transitions. Full-radius (9999px) is reserved for badges and circular UI elements. The 2px radius on buttons (e.g., 'Learn more' CTA) is intentionally small—it signals a sharp, decisive action without softness. Cards at 4px maintain a corporate aesthetic while remaining approachable. Avoid borde

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use #e0301e background with white text, 12px vertical / 24px horizontal padding, 44px height, and 2px border-radius. On hover, shift to #fd5108 (primary-container) and apply 0 3px 8px rgba(224, 48, 30, 0.2) shadow; transition all properties over 150ms ease-out. Active state darkens to #e0301e with no shadow. Secondary buttons are transparent with a 2px solid #e0301e border, white background on hover, and the same 150ms transition. Disabled buttons reduce opacity to 50% and remove cursor interactivity.

Containers & Surfaces Cards are the primary content container. Base card: #f2f2f2 background, 4px border-radius, 24px padding, 0 3px 8px rgba(0, 0, 0, 0.15) shadow, 1px border in #d9d9d9. On hover, lift to 0

Do's and Don'ts

**Do**

• Do use the primary red-orange (#e0301e) exclusively on CTAs and high-priority interactions—it's the visual anchor for user attention.
• Do maintain 24px gutter spacing and 40px section padding to preserve the brand's sense of control and clarity.
• Do pair serif headlines (PwC ITC Charter) with sans-serif body (PwC Helvetica Neue) to balance authority with approachability.
• Do apply 150–200ms ease-out transitions on all interactive state changes (hover, focus, active) for smooth, professional motion.
• Do use 2px border-radius on buttons and 4px on cards to reinforce the 'Architectural Precision' aesthetic.

**Don't**

• Don't use the primary color on non-interactive elements or backgrounds—it must remain reserved for actions and focus states.
• Don't exceed 16px border-radius on standard UI components; excessive rounding contradicts the brand's precision.
• Don't mix serif and sans-serif within a single headline or body paragraph; maintain clear typographic hierarchy.
• Don't apply shadows > 0 8px 24px rgba(0, 0, 0, 0.12) on standard cards—deeper shadows dilute the corporate aesthetic.
• Don't use system fonts (system-ui, -apple-system) in place of PwC Helvetica Neue or PwC ITC Charter; always include fallbacks (Arial, Georgia).