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.
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.
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.
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.
edX Brand Principles
edX Design Principles
Human (Engaging, Relatable, Encouraging)
Restless (Pioneering, Transformative, Dogged)
Smart (Curious, Credible, Informed)
Purposeful (Intentional, Bold, Energizing)
Ditch the Unnecessary
Context is King
Accessibility for All