Design System Principles

Embrace reuse and ditch the unnecessary.

The more we reuse a component, the more time we save and the more consistent our user experience will be. 

• Avoid adding multiple components for similar use cases. 

• Limit the number of variations. 

• Add flexibility to components with care.

Strive for universal accessibility.

A high quality design system is accessible to as many people as possible.

• Design and build components that satisfy WCAG 2.1 requirements.

• Support user preferences such as browser font size and media preferences such as  prefers-reduced-motion and prefers-reduced-transparency, prefers-contrast, and prefers-color-scheme

• Try to play nicely with common accessibility tools or incorporate similar features directly.

• Be internationalization-friendly. Avoid hard-coding English text.

Build open source and theme ready.

This design system is created for Open edX – open source software that powers learning experiences worldwide. 

• Remember that the edx.org look and feel is a theme for Paragon. Consider the default design for the Open edX context.

• Do not hard code edx.org content.

Act like an owner.

We own these tools, together. Collective ownership by a cross-functional group makes our work stronger. We leverage the perspectives and unique expertise of many individuals.

• When you notice something that needs fixing: fix it. Or, if you don’t have time, log a task and share it with the #paragon-working-group.

• Seek the perspectives of engineers, designers, and product managers when creating new components.

• Invite others, particularly new engineers and designers to participate in improving these tools.