BCG Global

Overview

BCG Global is a strategic management consulting firm that transforms complex business challenges into clear, actionable insights. The design system embodies 'Authoritative Minimalism'—a movement that pairs restrained, elegant typography with strategic accent colors to convey confidence, precision, and forward momentum. The interface evokes trust through generous whitespace (surface: #ffffff, surface-dim: #f1eeea), sophisticated serif headlines (henderson-bcg-serif at 68px, fontWeight 300), and a vibrant lime-green primary accent (#96f878) that signals opportunity and decisive action. Every interaction feels intentional, never cluttered.

The brand voice is consultative yet direct: measured, evidence-based, and free of corporate jargon. BCG speaks to C-suite leaders and emerging innovators alike, using concrete language and active verbs. Example: 'We partner with leaders to unlock competitive advantage through applied AI and strategic clarity'—not 'We help businesses.' The personality balances gravitas (deep charcoal text #212427, serif display headlines) with optimism (the lime accent on CTAs), signaling that transformation is both serious and achievable.

Colors

BCG's color philosophy centers on trust, clarity, and transformative impact. The primary accent—lime green (#96f878)—is the signature CTA color, appearing on all primary action buttons, key interactive elements, and focus states. It commands attention without aggression, suggesting growth and forward momentum. Secondary green (#21bf61) and tertiary midnight-green (#0c2b15) form a supporting hierarchy: secondary is used for confirmatory states and data visualization, tertiary for focus rings and active states. The neutral palette—whites (#ffffff), warm beiges (#f1eeea, #dcd5ce), and charcoals (#212427, #232326)—provides the foundation, with grays (#696969, #898888) reserved for disabled states and secondary text. Error red (#d82216) is deployed sparingly for destructive actions and alerts.

Typography

The type system pairs two distinct families to communicate both authority and approachability. Headlines use henderson-bcg-serif (a custom serif with 300 fontWeight at 68px for display, 48px for headline-lg) to establish gravitas and heritage; body copy uses henderson-bcg-sans (a clean sans-serif at 16px, fontWeight 400) for legibility and modernity. The display level (68px, 300 weight, -0.02em letter-spacing) is reserved for hero statements and brand moments; headline-lg (48px, 600 weight) anchors section introductions; body-md (16px, 400 weight, 24px lineHeight) ensures comfortable reading at standard viewing distances. Labels and CTAs use label-md (16px, 700 weight, 0.01em letter-spacing) to signal interactivity. On small labels over busy backgrounds (e.g., badges on data visualizations

Layout

The layout system uses a 12-column grid with a fixed container max-width of 1096px, centered on the viewport with symmetric gutters of 24px. This constraint ensures that content remains scannable and focused, preventing the eye from traveling too far horizontally. Sections are separated using lg spacing (40px) for major breaks and md spacing (24px) for subsections, creating a clear visual rhythm. The whitespace philosophy is 'generous but purposeful': surfaces (background: #ffffff, surface-dim: #f1eeea) are left largely empty to emphasize content hierarchy, with cards and containers using md padding (24px) to create breathing room around text and interactive elements. Responsive breakpoints collapse the grid to 6 columns at tablet widths and 1 column on mobile, maintaining the gutter and c

Elevation & Depth

Depth in BCG's system is achieved through subtle layering rather than dramatic shadows. The elevation scale uses three levels: sm (0px 1px 2px 0px rgba(0, 0, 0, 0.12), 0px 2px 6px 0px rgba(0, 0, 0, 0.08)) for cards and minor containers, md (0 4px 12px rgba(0, 0, 0, 0.12)) for modals and elevated surfaces, and lg (0 0 20px rgba(0, 0, 0, 0.3)) for overlays and trust-critical elements like cookie consent dialogs. The surface stack provides an alternative to shadows: surface-container-lowest (#f2f2f2) sits just above the base, surface-container (#dcd5ce) for standard cards, and surface-container-h

Shapes

The shape philosophy is 'Architectural Precision'—rounded corners are used strategically to soften hard edges without sacrificing the brand's structured, professional character. Buttons use md radius (15px) to signal interactivity while maintaining a refined appearance; cards and containers use lg radius (20px) for a slightly more approachable feel; inputs and smaller components use DEFAULT radius (10px) for consistency. The full radius (9999px) is reserved for badges and icon-only buttons, creating a distinctive visual marker for secondary actions. Border-radius values are applied consistentl

Components

Action Elements Buttons are the primary interaction mechanism and must clearly signal their intent through color and typography. Primary buttons (button-primary) use the lime accent (#96f878) with black text (#212427), fontWeight 700, and md radius (15px); they are 48px tall with 13px 24px padding to accommodate touch targets on mobile. On hover, the background shifts to the primary-container (#71dc68), maintaining the green family while providing visual feedback. On focus, the button transitions to tertiary (#0c2b15) with a white border and tertiary focus ring (box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px #0c2b15), ensuring keyboard users can always identify the active element. Secondary buttons (button-secondary) use a white background with a 1px black border, allowing them to recede vis

Do's and Don'ts

**Do**

• Do use the lime primary (#96f878) exclusively for primary CTAs and focus states—never apply it to backgrounds or body text, as it will reduce contrast and readability.
• Do maintain the 1096px container max-width on desktop to prevent content from becoming too wide and difficult to scan.
• Do pair serif headlines (henderson-bcg-serif) with sans-serif body copy (henderson-bcg-sans) to create visual hierarchy and signal the shift from brand moments to content.
• Do apply md radius (15px) to all buttons and lg radius (20px) to all cards to create a consistent, recognizable visual language.
• Do use the surface stack (surface-container-lowest, surface-container, surface-container-high) to create elevation without relying on heavy shadows.
• Do include a visible focus ring (tertiary color with 4px glow) on all interactive elements for keyboard navigation accessibility.

**Don't**

• Don't use the lime primary (#96f878) on backgrounds or for body text—it will fail contrast requirements and reduce readability. Reserve it for CTAs and interactive states only.
• Don't mix serif and sans-serif fonts within a single headline or body paragraph; maintain clear separation between display (serif) and content (sans-serif) layers.
• Don't apply shadows heavier than lg (0 0 20px rgba(0, 0, 0, 0.3)) to standard components—the system relies on subtle elevation and the surface stack to convey depth.
• Don't use border-radius values outside the defined scale (sm: 5px, DEFAULT: 10px, md: 15px, lg: 20px, xl: 25px, full: 9999px); this ensures visual consistency and prevents the design from feeling ad-hoc.
• Don't reduce the container max-width below 1096px on desktop, as this will compress content and reduce scannability.
• Don't omit focus rings or visible keyboard indicators on interactive elements—BCG's audience includes accessibility-conscious enterprises, and keyboard navigation must be fully supported.