Illustrations

v1.1.2

Documentation Under Review

Installation

Install the Illustrations component from the Catalyst component library:

npm install @pmi/catalyst-illustrations

Overview

The Illustrations package provides PMI Talent Triangle illustrations representing the three core dimensions of professional competencies. Each illustration is built on top of the BaseIcon component from @pmi/catalyst-icons, ensuring consistent sizing, coloring, and rendering across all applications.

PMI Talent Triangle

The PMI Talent Triangle represents the combination of technical, leadership, and strategic skills needed for success in project management:

• Business Acumen: Strategic and business management skills
• Ways of Working: Technical project management skills and methodologies
• Power Skills: Leadership and interpersonal skills

Available Illustrations

The package includes 14 illustration components in two styles:

With Text Labels (7 components):

• BusinessAcumen
• WaysOfWorking
• PowerSkills
• BusinessAcumenWoW (Business Acumen + Ways of Working)
• BusinessAcumenPowerSkills (Business Acumen + Power Skills)
• PowerSkillsWoW (Power Skills + Ways of Working)
• BusinessAcumenPowerSkillsWoW (All three dimensions)

Triangle Only - No Text (7 components):

• TriangleDefault
• TriangleBusinessAcumen
• TriangleWaysOfWorking
• TrianglePowerSkills
• TriangleBusinessAcumenWoW
• TriangleBusinessAcumenPowerSkills
• TrianglePowerSkillsWoW

Examples

Basic Usage

Display a single Talent Triangle illustration with text:

All Illustrations Gallery

Display all available Talent Triangle illustrations:

API Reference

All illustration components accept the same props as BaseIcon from @pmi/catalyst-icons:

Size Recommendations

While illustrations support standard icon sizes, using size="full" is recommended to ensure proper aspect ratio and detail visibility:

• xs: 16px × 16px (too small for illustrations)
• sm: 20px × 20px (too small for illustrations)
• md: 24px × 24px (minimal, triangle-only versions acceptable)
• lg: 32px × 32px (acceptable for triangle-only)
• xl: 40px × 40px (good for triangle-only)
• full: 100% of parent width and height (recommended, especially for text versions)

Recommended Sizes:

• Text versions: 80-150px for optimal text legibility
• Triangle-only versions: 40-80px
• Detailed views: 120-200px

Available Illustration Components

Import illustrations using their descriptive names:

import {
  // Single Dimensions (with text)
  BusinessAcumen,
  WaysOfWorking,
  PowerSkills,

  // Combined Dimensions (with text)
  BusinessAcumenWoW,
  BusinessAcumenPowerSkills,
  PowerSkillsWoW,
  BusinessAcumenPowerSkillsWoW,

  // Triangle-Only Versions (no text)
  TriangleDefault,
  TriangleBusinessAcumen,
  TriangleWaysOfWorking,
  TrianglePowerSkills,
  TriangleBusinessAcumenWoW,
  TriangleBusinessAcumenPowerSkills,
  TrianglePowerSkillsWoW,
} from '@pmi/catalyst-illustrations';

Talent Triangle Dimensions

Business Acumen

Focus: Strategic and business management skills

The Business Acumen dimension encompasses:

• Strategic planning and thinking
• Business analysis and understanding
• Financial acumen and budgeting
• Market awareness and industry knowledge
• Organizational strategy alignment

Use Cases: Business strategy presentations, strategic planning materials, executive dashboards, competency assessments focusing on business skills

Ways of Working

Focus: Technical project management skills and methodologies

The Ways of Working dimension encompasses:

• Project management methodologies (Agile, Waterfall, Hybrid)
• Technical project management practices
• Process improvement and optimization
• Tools and technology proficiency
• Delivery and execution capabilities

Use Cases: Project management training, methodology documentation, technical skill assessments, process improvement materials

Power Skills

Focus: Leadership and interpersonal skills

The Power Skills dimension encompasses:

• Leadership and influence
• Communication and collaboration
• Team building and motivation
• Conflict resolution and negotiation
• Emotional intelligence and adaptability

Use Cases: Leadership development programs, team dynamics training, soft skills assessments, interpersonal competency materials

Combined Dimensions

Illustrations showing multiple dimensions represent professionals developing or demonstrating competencies across multiple areas:

• Two Dimensions: Intermediate to advanced professionals building balanced skill sets
• All Three Dimensions: Well-rounded professionals with comprehensive Talent Triangle mastery

Usage Guidelines

Illustration Selection

Choose illustrations based on the skill focus or competency being represented:

• Single Dimension: When highlighting one specific skill area
• Two Dimensions: When showing development across two complementary skill areas
• Three Dimensions: When representing complete Talent Triangle mastery
• Triangle-Only: When space is limited or text is provided separately

Size and Spacing

• Minimum Size (Text Versions): Use at least 80px to ensure text legibility
• Minimum Size (Triangle-Only): Use at least 40px for recognition
• Recommended Size (Text Versions): 100-150px for optimal display
• Recommended Size (Triangle-Only): 60-80px for optimal display
• Clear Space: Maintain adequate spacing around illustrations
• Aspect Ratio: Always maintain original aspect ratio (use size="full")

Color Usage

• Original Colors: Always use color="original" to preserve PMI brand colors
• Consistency: Use consistent illustration style across related materials
• Background: Ensure sufficient contrast between illustration and background

Context-Specific Recommendations

• Training Materials: Use text versions, 120-150px
• Competency Assessments: Use text versions, 100-120px
• Dashboards: Use triangle-only versions, 60-80px
• Presentations: Use text versions, variable size based on slide layout
• Badges/Icons: Use triangle-only versions, 40-60px
• Print Materials: Ensure minimum 80px for text versions

Accessibility

All illustration components are built with accessibility in mind:

WCAG 2.1 AA Compliance

• Hidden from Screen Readers: Illustrations have aria-hidden="true" by default (decorative)
• Semantic Context: When illustrations convey skill information, provide descriptive text
• Color Independence: Don't rely solely on illustrations to convey information
• Text Alternatives: Provide text descriptions of competencies represented
• Contrast: Illustrations maintain sufficient contrast for visibility

Best Practices

// ✅ Good: Illustration with descriptive context
<div>
  <BusinessAcumen className="w-32 h-32" size="full" />
  <p>Business Acumen: Strategic planning and business management skills</p>
</div>

// ✅ Good: Illustration in assessment with label
<div aria-label="Business Acumen competency">
  <BusinessAcumen className="w-24 h-24" size="full" />
  <span className="sr-only">Business Acumen - Strategic Skills</span>
</div>

// ✅ Good: Multiple illustrations with clear labels
<div role="list" aria-label="Talent Triangle dimensions">
  <div role="listitem">
    <BusinessAcumen size="full" />
    <span>Business Acumen</span>
  </div>
  <div role="listitem">
    <WaysOfWorking size="full" />
    <span>Ways of Working</span>
  </div>
</div>

// ❌ Avoid: Illustration without context
<div>
  <BusinessAcumen size="full" />
</div>

Testing Considerations

Illustration components include data-testid support for integration testing:

<BusinessAcumen data-testid="talent-triangle-ba" size="full" color="original" />

Design Tokens

Illustrations use the following design tokens from the Catalyst theme:

Size Tokens

• --scale-16 through --scale-40: Standard icon sizes (not recommended for text versions)
• Custom container sizing recommended for optimal illustration display

Color Preservation

Illustrations should always use color="original" to maintain PMI brand compliance. The illustrations use official PMI Talent Triangle colors:

• Business Acumen: Purple gradient
• Ways of Working: Gray/neutral tones
• Power Skills: Teal/cyan gradient

Technical Details

Bundle Optimization

Each illustration component is exported individually, enabling tree-shaking. Import only the illustrations you need to minimize bundle size:

// ✅ Optimal: Tree-shakeable imports
import { BusinessAcumen, WaysOfWorking, PowerSkills } from '@pmi/catalyst-illustrations';

// ⚠️ Avoid: Wildcard imports prevent tree-shaking
import * as Illustrations from '@pmi/catalyst-illustrations';

SVG Rendering

Illustrations use react-inlinesvg for SVG rendering, which:

• Preserves embedded PMI brand colors
• Ensures unique IDs for multiple instances
• Maintains crisp rendering at all sizes
• Supports text rendering with proper font references

Brand Compliance

• Color Accuracy: All colors match official PMI Talent Triangle branding
• Proportions: Triangle proportions are precisely maintained
• Text Rendering: "Business Acumen" text maintains brand typography
• Updates: Illustrations are version-controlled and updated centrally

Usage Examples

In Training Dashboard

import { BusinessAcumen, WaysOfWorking, PowerSkills } from '@pmi/catalyst-illustrations';

function TrainingDashboard() {
  return (
    <div className="grid grid-cols-3 gap-6 p-6">
      <div className="p-6 bg-white rounded-lg border">
        <div className="w-24 h-24 mb-4 mx-auto">
          <BusinessAcumen size="full" color="original" />
        </div>
        <h3 className="text-lg font-semibold text-center mb-2">Business Acumen</h3>
        <p className="text-sm text-neutral-600 text-center">5 courses available</p>
      </div>
      {/* Similar for other dimensions */}
    </div>
  );
}

In Competency Assessment

import { BusinessAcumenPowerSkillsWoW } from '@pmi/catalyst-illustrations';

function AssessmentResult() {
  return (
    <div className="max-w-md p-6 bg-white rounded-lg border">
      <div className="w-32 h-32 mb-4 mx-auto">
        <BusinessAcumenPowerSkillsWoW size="full" color="original" />
      </div>
      <h2 className="text-xl font-bold text-center mb-2">Complete Talent Triangle Profile</h2>
      <p className="text-sm text-neutral-600 text-center">
        You've demonstrated competency across all three dimensions of the PMI Talent Triangle.
      </p>
    </div>
  );
}

In Badge Display

import { TriangleBusinessAcumen } from '@pmi/catalyst-illustrations';

function SkillBadge() {
  return (
    <div className="inline-flex items-center gap-2 px-3 py-2 bg-purple-50 rounded-full border border-purple-200">
      <div className="w-6 h-6">
        <TriangleBusinessAcumen size="full" color="original" />
      </div>
      <span className="text-sm font-medium text-purple-900">Business Acumen</span>
    </div>
  );
}

Related Components

• Icons - Base icon component system that illustrations extend
• Wordmarks - PMI certification wordmarks
• Logos - Official PMI brand logos
• Badge - Badge component for skill indicators
• Card - Card component for competency displays

See Also

• BaseIcon Component Documentation
• PMI Talent Triangle (external)
• Accessibility Best Practices
• Design Tokens Documentation