The JDRF Design System was an open-source, MIT-licensed front-end framework built to standardize the visual identity and UI components for JDRF.org (now Breakthrough T1D.org). Designed as a living style guide, the system provided a consistent foundation for fonts, colors, layouts, and components across all digital properties. It combined Bootstrap, Fabricator, and custom Sass and JavaScript enhancements to make scalable front-end development faster, more cohesive, and accessible.

Tech Stack

My Role

As a front-end developer on the project, I helped architect and implement the design system’s core structure and component library. My focus was on writing maintainable, modular Sass and JavaScript, building reusable UI patterns, and ensuring alignment between the design team’s vision and the engineering implementation.

Key Contributions

• Co-developed a Bootstrap-based design system tailored for JDRF’s brand and digital needs.
• Used Fabricator to document and showcase reusable UI components in an interactive style guide.
• Wrote modular Sass and JavaScript for core patterns, including typography, color palettes, grids, and interactive components.
• Collaborated closely with designers and developers to translate brand guidelines into flexible, production-ready components.
• Ensured accessibility best practices were baked into each component from the start.
• Contributed to open-source documentation under the MIT license for broader reuse and community collaboration.

Impact

The JDRF Design System became the foundation for consistent, accessible, and efficient front-end development across all of JDRF’s digital initiatives. It improved development velocity, reduced code duplication, and helped unify the organization’s brand presentation online.