{"id":5272,"date":"2025-10-29T13:17:52","date_gmt":"2025-10-29T13:17:52","guid":{"rendered":"https:\/\/rrvasquez.com\/?post_type=portfolio&p=5272"},"modified":"2025-10-29T13:17:52","modified_gmt":"2025-10-29T13:17:52","slug":"jdrf-design-system","status":"publish","type":"portfolio","link":"https:\/\/rrvasquez.com\/wp\/portfolio\/jdrf-design-system\/","title":{"rendered":"JDRF Design System"},"content":{"rendered":"\n
\n

Project Overview<\/h2>\n\n\n\n

View Site<\/a><\/p>\n<\/div>\n\n\n\n

The JDRF Design System<\/strong> was an open-source, MIT-licensed front-end framework built to standardize the visual identity and UI components for JDRF.org<\/strong> (now Breakthrough T1D.org<\/strong>). 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<\/strong>, Fabricator<\/strong>, and custom Sass<\/strong> and JavaScript<\/strong> enhancements to make scalable front-end development faster, more cohesive, and accessible.<\/p>\n\n\n

Front-End Development<\/a> <\/span>Open Source<\/a><\/div>\n\n\n

Tech Stack<\/h2>\n\n\n
Bootstrap<\/a> <\/span>Fabricator<\/a> <\/span>From Scratch<\/a> <\/span>Javascript<\/a> <\/span>jQuery<\/a> <\/span>JSX<\/a> <\/span>New Build<\/a> <\/span>RippleJS<\/a> <\/span>Sass<\/a><\/div>\n\n\n

My Role<\/h2>\n\n\n\n

As a front-end developer on the project, I helped architect and implement the design system\u2019s 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\u2019s vision and the engineering implementation.<\/p>\n\n\n\n

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

    Impact<\/h2>\n\n\n\n

    The JDRF Design System became the foundation for consistent, accessible, and efficient front-end development across all of JDRF\u2019s digital initiatives. It improved development velocity, reduced code duplication, and helped unify the organization\u2019s brand presentation online.<\/p>\n","protected":false},"excerpt":{"rendered":"

    Built a Bootstrap-based design system and component library for JDRF.org (now Breakthrough T1D), combining Fabricator, Sass, and JS to create an open-source foundation for scalable, accessible front-end development.<\/p>\n","protected":false},"author":1,"featured_media":5273,"menu_order":30,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_vp_format_video_url":"","_vp_image_focal_point":[],"footnotes":""},"portfolio_category":[5,51],"portfolio_tag":[31,48,49,9,45,50,12,52,16],"class_list":["post-5272","portfolio","type-portfolio","status-publish","format-standard","has-post-thumbnail","hentry","portfolio_category-front-end-development","portfolio_category-open-source","portfolio_tag-bootstrap","portfolio_tag-fabricator","portfolio_tag-from-scratch","portfolio_tag-javascript","portfolio_tag-jquery","portfolio_tag-jsx","portfolio_tag-new-build","portfolio_tag-ripplejs","portfolio_tag-sass"],"yoast_head":"\nJDRF Design System - RRVasquez<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JDRF Design System - RRVasquez\" \/>\n<meta property=\"og:description\" content=\"Built a Bootstrap-based design system and component library for JDRF.org (now Breakthrough T1D), combining Fabricator, Sass, and JS to create an open-source foundation for scalable, accessible front-end development.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rrvasquez.com\/wp\/portfolio\/jdrf-design-system\/\" \/>\n<meta property=\"og:site_name\" content=\"RRVasquez\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rrvasquez.com\/wp\/wp-content\/uploads\/2025\/10\/JDRF-Desktop.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1773\" \/>\n\t<meta property=\"og:image:height\" content=\"992\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rrvasquez.com\\\/wp\\\/portfolio\\\/jdrf-design-system\\\/\",\"url\":\"https:\\\/\\\/rrvasquez.com\\\/wp\\\/portfolio\\\/jdrf-design-system\\\/\",\"name\":\"JDRF Design System - RRVasquez\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rrvasquez.com\\\/wp\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rrvasquez.com\\\/wp\\\/portfolio\\\/jdrf-design-system\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rrvasquez.com\\\/wp\\\/portfolio\\\/jdrf-design-system\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rrvasquez.com\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/JDRF-Desktop.png\",\"datePublished\":\"2025-10-29T13:17:52+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/rrvasquez.com\\\/wp\\\/portfolio\\\/jdrf-design-system\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rrvasquez.com\\\/wp\\\/portfolio\\\/jdrf-design-system\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/rrvasquez.com\\\/wp\\\/portfolio\\\/jdrf-design-system\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rrvasquez.com\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/JDRF-Desktop.png\",\"contentUrl\":\"https:\\\/\\\/rrvasquez.com\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/JDRF-Desktop.png\",\"width\":1773,\"height\":992},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/rrvasquez.com\\\/wp\\\/portfolio\\\/jdrf-design-system\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/rrvasquez.com\\\/wp\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Portfolio\",\"item\":\"https:\\\/\\\/rrvasquez.com\\\/wp\\\/portfolio\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JDRF Design System\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rrvasquez.com\\\/wp\\\/#website\",\"url\":\"https:\\\/\\\/rrvasquez.com\\\/wp\\\/\",\"name\":\"RRVasquez\",\"description\":\"Senior Web Developer & Accessibility Champion\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rrvasquez.com\\\/wp\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JDRF Design System - RRVasquez","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"JDRF Design System - RRVasquez","og_description":"Built a Bootstrap-based design system and component library for JDRF.org (now Breakthrough T1D), combining Fabricator, Sass, and JS to create an open-source foundation for scalable, accessible front-end development.","og_url":"https:\/\/rrvasquez.com\/wp\/portfolio\/jdrf-design-system\/","og_site_name":"RRVasquez","og_image":[{"width":1773,"height":992,"url":"https:\/\/rrvasquez.com\/wp\/wp-content\/uploads\/2025\/10\/JDRF-Desktop.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/rrvasquez.com\/wp\/portfolio\/jdrf-design-system\/","url":"https:\/\/rrvasquez.com\/wp\/portfolio\/jdrf-design-system\/","name":"JDRF Design System - RRVasquez","isPartOf":{"@id":"https:\/\/rrvasquez.com\/wp\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rrvasquez.com\/wp\/portfolio\/jdrf-design-system\/#primaryimage"},"image":{"@id":"https:\/\/rrvasquez.com\/wp\/portfolio\/jdrf-design-system\/#primaryimage"},"thumbnailUrl":"https:\/\/rrvasquez.com\/wp\/wp-content\/uploads\/2025\/10\/JDRF-Desktop.png","datePublished":"2025-10-29T13:17:52+00:00","breadcrumb":{"@id":"https:\/\/rrvasquez.com\/wp\/portfolio\/jdrf-design-system\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rrvasquez.com\/wp\/portfolio\/jdrf-design-system\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rrvasquez.com\/wp\/portfolio\/jdrf-design-system\/#primaryimage","url":"https:\/\/rrvasquez.com\/wp\/wp-content\/uploads\/2025\/10\/JDRF-Desktop.png","contentUrl":"https:\/\/rrvasquez.com\/wp\/wp-content\/uploads\/2025\/10\/JDRF-Desktop.png","width":1773,"height":992},{"@type":"BreadcrumbList","@id":"https:\/\/rrvasquez.com\/wp\/portfolio\/jdrf-design-system\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/rrvasquez.com\/wp\/"},{"@type":"ListItem","position":2,"name":"Portfolio","item":"https:\/\/rrvasquez.com\/wp\/portfolio\/"},{"@type":"ListItem","position":3,"name":"JDRF Design System"}]},{"@type":"WebSite","@id":"https:\/\/rrvasquez.com\/wp\/#website","url":"https:\/\/rrvasquez.com\/wp\/","name":"RRVasquez","description":"Senior Web Developer & Accessibility Champion","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rrvasquez.com\/wp\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/rrvasquez.com\/wp\/wp-json\/wp\/v2\/portfolio\/5272","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rrvasquez.com\/wp\/wp-json\/wp\/v2\/portfolio"}],"about":[{"href":"https:\/\/rrvasquez.com\/wp\/wp-json\/wp\/v2\/types\/portfolio"}],"author":[{"embeddable":true,"href":"https:\/\/rrvasquez.com\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rrvasquez.com\/wp\/wp-json\/wp\/v2\/comments?post=5272"}],"version-history":[{"count":0,"href":"https:\/\/rrvasquez.com\/wp\/wp-json\/wp\/v2\/portfolio\/5272\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rrvasquez.com\/wp\/wp-json\/wp\/v2\/media\/5273"}],"wp:attachment":[{"href":"https:\/\/rrvasquez.com\/wp\/wp-json\/wp\/v2\/media?parent=5272"}],"wp:term":[{"taxonomy":"portfolio_category","embeddable":true,"href":"https:\/\/rrvasquez.com\/wp\/wp-json\/wp\/v2\/portfolio_category?post=5272"},{"taxonomy":"portfolio_tag","embeddable":true,"href":"https:\/\/rrvasquez.com\/wp\/wp-json\/wp\/v2\/portfolio_tag?post=5272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}