CFA Institute Component Library
Welcome to CFA Institute's component 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.
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.
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
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.
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 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.
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.
- Strive for page load times under 2 seconds
- Provide feedback for load times between 2 and 6 seconds
- If longer load times are unavoidable, consult UX and Frontend to help solution for setting user expectations
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 Component Library for colors, icons, typography, reusable HTML components, and further information on our UX and frontend design principles.
We test and support the following browsers:
- Most recent version of Chrome
- Most recent version of Firefox
- Most recent version of Edge
- Most recent iOS and Android browsers
- CFA Institute Digital Experience (login required). Roadmap, digital playbook, templates, and tactics.
- CFA Institute Brand Center (login required). Best practices for consistently representing the CFA Institute brand. Includes logo, font, and imagery assets.
- CFA Institute Editorial Style Guide. Includes CFA Institute name, trademark, and designation guidance.
For questions or help related to the Component Library, or to make suggestions — please contact a member of the UX team: