We're using cookies, but you can turn them off in Privacy Settings. If you use the site without changing settings, you are agreeing to our use of cookies. Learn more in our Privacy Policy.

CFA Institute Pattern Library

Welcome to CFA Institute's pattern library. The Service Manual is our home for guidelines and best practices. The Design System is a comprehensive catalog of UI components, styles, scripts, HTML, and other documentation regarding the web site.

Getting Started

CFA Institute provides learning content to a large and diverse membership community and needs to ensure a user experience that’s consistent and accessible to all. To deliver a quality online experience, CFA Institute follows a number of principles.

Accessibility

Inclusion is one of CFA Institute’s core principles.

  • CFA Institute follows the WCAG 2.1 AA accessibility guidelines. All customer-facing web content needs to be compliant with the WCAG 2.1 AA success criteria.

More on Accessibility and Inclusive Design

Readability

Highly readable text allows user to connect to and understand content more easily.

  • Most text should be 18px or larger. No text should be smaller than 16px.
  • All text should meet a minimum contrast standard of 4.5:1 (per WCAG 2.1 AA).
  • Text should never be displayed over an image.

Usability

Usable sites are fundamental to meeting our global audience’s goals and needs.

  • Use plain language and clear calls to action.
  • Errors should be prevented when possible. Error messages should be specific and actionable. Users should understand what went wrong and how to resolve the error.

Mobile First

Mobile-first and mobile-only users make up a significant segment of CFA Institute audiences.

  • All design should take a mobile-first approach.
  • All design should be responsive to ensure proper display on desktop, tablet, and mobile.

Performance

Sites that are slow to load can frustrate or discourage users.

  • All images should be optimized for online display.
  • Never auto play video or audio content.
  • Never auto load video content.
  • Avoid render-blocking resources.

Brand, Colors, and Patterns

A consistent look and feel creates a better overall brand experience.

  • Follow the logo use guidelines outlined in the Brand Center.
  • All text must be in high contrast to its background, with a ratio of 4.5:1 or greater.
  • Designs should use a small selection of the approved and WCAG 2.1 AA compliant colors as illustrated in the CFA Institute design system. Avoid introducing new colors.
  • Refer to the CFA Institute Pattern Library for colors, icons, typography, reusable HTML components, and further information on our UX and frontend design principles.

Compatibility

We test and support the following browsers:

  • Most recent version of Chrome
  • Most recent version of Firefox
  • Internet Explorer 11+
  • Most recent iOS and Android browsers

Additional Guidelines

Contact

For questions or help related to the Pattern Library, or to make suggestions — please contact a member of the UX team: