Wordmarks

v1.2.3

Documentation Under Review

Installation

Install the Wordmarks component from the Catalyst component library:

npm install '@pmi/catalyst-wordmarks'

Overview

The Wordmarks package provides official PMI (Project Management Institute) certification and credential wordmarks for professional display. Each wordmark is built on top of the BaseIcon component from @pmi/catalyst-icons, ensuring consistent sizing and rendering across all applications.

Available Certification Wordmarks

The package includes 175+ wordmark components representing PMI certifications and credentials:

• PMP (Project Management Professional): 6 variants
• PMPA (PMP Authorized): 8 variants including dark versions
• CAPM (Certified Associate in Project Management): 6 variants
• PMI-ACP (Agile Certified Practitioner): 6 variants
• PMI-RMP (Risk Management Professional): 6 variants
• PMI-SP (Scheduling Professional): 6 variants
• PMI-PBA (Professional in Business Analysis): 6 variants
• PgMP (Program Management Professional): 6 variants
• PfMP (Portfolio Management Professional): 6 variants
• PMO-CP (PMO Certified Practitioner): 6 variants
• PMI-PMO-CP: 12 variants (including dark versions)
• CPMAI (Certified Professional in Management AI): 18 variants (including dark and E/Plus versions)
• CPMAIE (CPMAI Enterprise): 18 variants (including dark versions)
• CPMAIPlus (CPMAI Plus): 18 variants (including dark versions)
• CSPP (Certified Sustainable Project Professional): 6 variants
• PMI-CP-MAI (Composite certification): 6 variants
• PMOCC (PMO Competency Continuum): 6 variants
• GPM (Global Project Management): 6 variants
• DAC, DASM, DASSM, DAVSC: Disciplined Agile certifications (6 variants each)

Wordmark Styles

Each certification is available in up to 6 style variants:

1. Base - Solid black wordmark
2. Colored - Full-color branded version
3. ColoredOutline - Outlined colored version
4. Gradient - Gradient-filled version
5. GradientOutline - Outlined gradient version
6. Outline - Black outline version

Some certifications also include Dark variants for use on dark backgrounds.

Examples

Basic Usage

Display a certification wordmark with default settings:

API Reference

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

Size Recommendations

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

• xs: 16px × 16px (too small for wordmarks)
• sm: 20px × 20px (too small for wordmarks)
• md: 24px × 24px (minimal size)
• lg: 32px × 32px (acceptable)
• xl: 40px × 40px (good)
• full: 100% of parent width and height (recommended)

Available Wordmark Components

Import wordmarks using their certification abbreviation with style suffix:

import {
  // PMP (Project Management Professional)
  PMP,
  PMPColored,
  PMPColoredOutline,
  PMPGradient,
  PMPGradientOutline,
  PMPOutline,

  // PMPA (PMP Authorized)
  PMPA,
  PMPABlack,
  PMPABlackOutline,
  PMPAColored,
  PMPAColoredOutline,
  PMPADark,
  PMPADarkOutline,
  PMPAOutline,

  // CAPM (Certified Associate in Project Management)
  CAPM,
  CAPMColored,
  CAPMColoredOutline,
  CAPMGradient,
  CAPMGradientOutline,
  CAPMOutline,

  // PMI-ACP (Agile Certified Practitioner)
  PMIACP,
  PMIACPColored,
  PMIACPColoredOutline,
  PMIACPGradient,
  PMIACPGradientOutline,
  PMIACPOutline,

  // PMI-RMP (Risk Management Professional)
  PMIRMP,
  PMIRMPColored,
  PMIRMPColoredOutline,
  PMIRMPGradient,
  PMIRMPGradientOutline,
  PMIRMPOutline,

  // PMI-SP (Scheduling Professional)
  PMISP,
  PMISPColored,
  PMISPColoredOutline,
  PMISPGradient,
  PMISPGradientOutline,
  PMISPOutline,

  // PMI-PBA (Professional in Business Analysis)
  PMIPBA,
  PMIPBAColored,
  PMIPBAColoredOutline,
  PMIPBAGradient,
  PMIPBAGradientOutline,
  PMIPBAOutline,

  // PgMP (Program Management Professional)
  PgMP,
  PgMPColored,
  PgMPColoredOutline,
  PgMPGradient,
  PgMPGradientOutline,
  PgMPOutline,

  // PfMP (Portfolio Management Professional)
  PfMP,
  PfMPColored,
  PfMPColoredOutline,
  PfMPGradient,
  PfMPGradientOutline,
  PfMPOutline,

  // PMO-CP (PMO Certified Practitioner)
  PMOCP,
  PMOCPColored,
  PMOCPColoredOutline,
  PMOCPGradient,
  PMOCPGradientOutline,
  PMOCPOutline,

  // And 165+ more certification variants...
} from '@pmi/catalyst-wordmarks';

Certification Categories

Project Management Fundamentals

CAPM (Certified Associate in Project Management)

• Entry-level certification for project practitioners
• Use: Professional profiles, resumes, email signatures

PMP (Project Management Professional)

• Industry-standard certification for project managers
• Use: Business cards, LinkedIn profiles, professional correspondence

Agile & Specialized Practices

PMI-ACP (Agile Certified Practitioner)

• Agile methodologies certification
• Use: Agile team profiles, scrum master credentials

PMI-RMP (Risk Management Professional)

• Risk management expertise certification
• Use: Risk management profiles, specialized roles

PMI-SP (Scheduling Professional)

• Scheduling and planning certification
• Use: Planning specialist credentials

PMI-PBA (Professional in Business Analysis)

• Business analysis certification
• Use: BA professional profiles, requirements specialist credentials

Program & Portfolio Management

PgMP (Program Management Professional)

• Program management certification
• Use: Senior management profiles, portfolio manager credentials

PfMP (Portfolio Management Professional)

• Portfolio management certification
• Use: Executive profiles, strategic management credentials

Organizational & Digital

PMO-CP (PMO Certified Practitioner)

• PMO operations certification
• Use: PMO director profiles, organizational credentials

CPMAI (Certified Professional in Management AI)

• AI in management certification
• Use: Digital transformation profiles, AI project credentials

GPM (Global Project Management)

• Global project management certification
• Use: International project manager profiles

Disciplined Agile

DAC (Disciplined Agile Coach) DASM (Disciplined Agile Scrum Master) DASSM (Disciplined Agile Senior Scrum Master) DAVSC (Disciplined Agile Value Stream Consultant)

• Disciplined Agile framework certifications
• Use: Agile coaching profiles, scrum master credentials

Usage Guidelines

Wordmark Selection

Choose the appropriate wordmark style based on context:

• Base: Solid black for formal documents, high-contrast needs
• Colored: Full-color for digital displays, marketing materials
• ColoredOutline: Outlined colored for backgrounds, visual separation
• Gradient: Modern gradient look for digital displays
• GradientOutline: Outlined gradient for creative applications
• Outline: Black outline for flexible styling, custom coloring
• Dark: Specifically designed for dark backgrounds

Size and Spacing

• Minimum Width: Ensure wordmarks are at least 80px wide for digital displays
• Height: Maintain 48-96px height for optimal readability
• Clear Space: Maintain clear space around wordmarks equal to the height of the letters
• Aspect Ratio: Always maintain original aspect ratio (use size="full")
• Container: Wrap wordmarks in appropriately sized containers

Color Usage

• Original Colors: Use color="original" for brand compliance
• Custom Gradients: Apply custom gradients to Outline variants only
• Dark Backgrounds: Use Dark variants when available, or white/light colors
• Accessibility: Ensure sufficient contrast between wordmark and background

Professional Context

• Email Signatures: Use colored variants, 80-100px wide
• Business Cards: Use outline or colored variants, maintain readability
• LinkedIn/Profiles: Use colored variants, clear and visible
• Resumes: Use outline or base variants, professional appearance
• Presentations: Use gradient or colored variants, large enough to read
• Marketing: Use gradient or colored variants, brand-aligned

Accessibility

All wordmark components are built with accessibility in mind:

WCAG 2.1 AA Compliance

• Hidden from Screen Readers: Wordmarks have aria-hidden="true" by default (decorative credentials)
• Semantic Context: When wordmarks convey certification information, provide descriptive text
• Color Contrast: Ensure wordmarks meet contrast requirements on their backgrounds
• Alternative Text: Provide text alternatives stating the certification name and holder
• Readability: Maintain minimum size for wordmark legibility

Best Practices

// ✅ Good: Wordmark with descriptive context
<div>
  <PMPColored className="w-24 h-8" size="full" />
  <span className="sr-only">Project Management Professional (PMP) Certified</span>
</div>

// ✅ Good: Wordmark in profile with text
<div className="flex items-center gap-2">
  <span className="font-medium">Jane Smith, PMP</span>
  <PMPOutline className="w-16 h-6" size="full" />
</div>

// ✅ Good: Multiple certifications with list
<ul aria-label="Professional Certifications">
  <li>
    <PMPColored className="w-20 h-6" size="full" />
    <span className="sr-only">PMP</span>
  </li>
  <li>
    <PMIACPColored className="w-20 h-6" size="full" />
    <span className="sr-only">PMI-ACP</span>
  </li>
</ul>

// ❌ Avoid: Wordmark without context
<div>
  <PMPColored size="full" />
</div>

Testing Considerations

Wordmark components include data-testid support for integration testing:

<PMPOutline data-testid="pmp-certification-badge" size="full" />

Design Tokens

Wordmarks use the following design tokens from the Catalyst theme:

Size Tokens

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

Color Preservation

Wordmarks should always use color="original" to maintain brand compliance. Custom gradients can be applied to Outline variants using the gradient prop.

Gradient Tokens

For custom gradients on outline variants:

• --gradient-medium-primary-from / --gradient-medium-primary-to: Primary gradients
• --gradient-medium-success-from / --gradient-medium-success-to: Success gradients
• --gradient-medium-warning-from / --gradient-medium-warning-to: Warning gradients
• Custom gradient arrays can also be used

Technical Details

Component Generation

Wordmark components are auto-generated from SVG assets. Do not modify wordmark component files directly. Any changes should be made in the build script at ~/process-packages-assets.cjs.

Bundle Optimization

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

// ✅ Optimal: Tree-shakeable imports
import { PMPOutline, PMIACPColored, PMIRMPGradient } from '@pmi/catalyst-wordmarks';

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

SVG Rendering

Wordmarks use react-inlinesvg for SVG rendering, which:

• Preserves embedded brand colors in colored variants
• Enables gradient manipulation for outline variants
• Ensures unique IDs for multiple instances
• Maintains crisp rendering at all sizes
• Supports CSS custom properties for theming

Brand Compliance

• Color Accuracy: All colors match official PMI certification branding
• Proportions: Aspect ratios are precisely maintained
• Certification Names: Wordmarks use official abbreviations
• Updates: Wordmarks are version-controlled and updated centrally

Usage Examples

In Email Signature

import { PMPColored, PMIACPColored } from '@pmi/catalyst-wordmarks';

function EmailSignature() {
  return (
    <div className="max-w-md">
      <div className="space-y-2">
        <p className="font-semibold">Jane Smith</p>
        <p className="text-sm text-neutral-600">Senior Project Manager</p>
        <div className="flex items-center gap-2 pt-2">
          <div className="w-16 h-6">
            <PMPColored size="full" color="original" />
          </div>
          <div className="w-16 h-6">
            <PMIACPColored size="full" color="original" />
          </div>
        </div>
      </div>
    </div>
  );
}

In Profile Card

import { PMPOutline, PMIRMPOutline } from '@pmi/catalyst-wordmarks';

function ProfileCard() {
  return (
    <div className="max-w-sm p-6 bg-white rounded-lg border border-neutral-200">
      <div className="flex items-start gap-4">
        <img
          src="/avatar.jpg"
          alt="John Doe"
          className="w-16 h-16 rounded-full"
        />
        <div className="flex-1">
          <h3 className="font-semibold">John Doe</h3>
          <p className="text-sm text-neutral-600">Program Manager</p>
          <div className="flex gap-2 mt-2">
            <div className="w-12 h-5">
              <PMPOutline size="full" color="original" />
            </div>
            <div className="w-12 h-5">
              <PMIRMPOutline size="full" color="original" />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

In Resume/CV

import { PMPOutline, CAPMOutline, PMIACPOutline } from '@pmi/catalyst-wordmarks';

function CertificationSection() {
  return (
    <section className="py-4">
      <h2 className="text-xl font-bold mb-4">Professional Certifications</h2>
      <div className="space-y-3">
        <div className="flex items-center justify-between">
          <div>
            <p className="font-medium">Project Management Professional (PMP)</p>
            <p className="text-sm text-neutral-600">PMI • Earned 2020</p>
          </div>
          <div className="w-16 h-6">
            <PMPOutline size="full" color="original" />
          </div>
        </div>
        <div className="flex items-center justify-between">
          <div>
            <p className="font-medium">Certified Associate in Project Management (CAPM)</p>
            <p className="text-sm text-neutral-600">PMI • Earned 2018</p>
          </div>
          <div className="w-16 h-6">
            <CAPMOutline size="full" color="original" />
          </div>
        </div>
      </div>
    </section>
  );
}

Related Components

• Icons - Base icon component system that wordmarks extend
• Logos - Official PMI brand logos
• Flags - Country and territory flag assets
• Badge - Badge component for credential indicators
• Avatar - Can display wordmarks with profile images

See Also

• BaseIcon Component Documentation
• PMI Certification Program (external)
• Accessibility Best Practices
• Design Tokens Documentation