[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"categories-en-US":3,"blog-categories-en-US":3,"resource-primer-design-system-en-US":4,"featured-sidebar-data-en-US":3,"latest-resources-en-US":48,"alternatives-primer-design-system-en-US":116,"related-resources-primer-design-system-en-US":177},true,{"id":5,"name":6,"slug":7,"url":8,"date_updated":9,"images_other":9,"tagline":10,"description":11,"seo":12,"features":14,"pros":19,"cons":24,"best_for":27,"cover":28,"icon":29,"pricing":30,"platform":31,"github_url":9,"twitter_url":9,"discord_url":9,"dribbble_url":9,"pricing_tiers":33,"views_count":34,"featured_rank":9,"categories":35,"tags":40,"files":44},464,"Primer Design System","primer-design-system","https:\u002F\u002Fprimer.style\u002F",null,"GitHub's open-source design system for consistent, accessible web interfaces.","Primer is GitHub's official open-source design system, providing reusable UI components, patterns, and guidelines to build consistent, accessible, and performant web experiences across GitHub products and third-party integrations. It includes Primer React (components), Primer Primitives (low-level tokens), and Primer CSS for flexible implementation, with a focus on developer productivity, modularity, and GitHub's brand language.\nComponent Library: Reusable elements like buttons, forms, navigation, avatars, and markdown with variants for themes and states.\nDesign Tokens: Semantic colors, typography, spacing, motion, and icons for unified styling.\nAccessibility: WCAG compliance with ARIA support and inclusive patterns.\nTools: Figma kit for prototyping; React and CSS libraries for implementation; Storybook for exploration.",{"title":13,"description":10},"Primer Design System - GitHub's open-source design system for consistent, accessible web interfaces. | DesignToolMark",[15,16,17,18],"Component Library: Reusable elements like buttons, forms, navigation, avatars, and markdown with variants for themes and states.","Design Tokens: Semantic colors, typography, spacing, motion, and icons for unified styling.","Accessibility: WCAG compliance with ARIA support and inclusive patterns.","Tools: Figma kit for prototyping; React and CSS libraries for implementation; Storybook for exploration.",[20,21,22,23],"Open source","Extensive icon library","Color palette generation","Export to CSS\u002Fdesign tools",[25,26],"Adoption requires team alignment","Customization can be complex","Teams building scalable, consistent digital products.","906f2f3b-9f37-482d-8ed3-ad6fe7baad5d.webp","9d068e49-65ad-4439-bb26-feb4e3d3662b.svg","free",[32],"Browser",{"free":3},0,[36],{"name":37,"slug":38,"sub_categories":39},"Design Systems","design-systems",[],[41,43],{"name":42,"slug":30},"Free",{"name":37,"slug":38},[45],{"url":46,"type":47},"https:\u002F\u002Fwww.figma.com\u002Fcommunity\u002Ffile\u002F854767373644076713\u002Fprimer-web","figma",[49,68,84,102],{"id":50,"url":51,"icon":9,"name":52,"slug":53,"tags":54,"cover":64,"tagline":65,"is_featured":66,"date_created":67,"date_updated":9},670,"https:\u002F\u002Fattentioninsight.com","Attention Insight","attention-insight",[55,57,59,61],{"seo":9,"name":9,"slug":56},"wireframe",{"seo":9,"name":9,"slug":58},"user-research",{"seo":9,"name":9,"slug":60},"web-design",{"seo":9,"name":62,"slug":63},"Freemium","freemium","ef36c4d0-cade-4956-a397-b7c4436ad473.webp","AI-powered attention prediction and visual analytics",false,"2026-06-17T09:18:38.384779+00:00",{"id":69,"url":70,"icon":9,"name":71,"slug":72,"tags":73,"cover":81,"tagline":82,"is_featured":66,"date_created":83,"date_updated":9},669,"https:\u002F\u002Fwww.frontitude.com","Frontitude","frontitude",[74,75,76,78,80],{"seo":9,"name":9,"slug":56},{"seo":9,"name":9,"slug":58},{"seo":9,"name":9,"slug":77},"collaboration",{"seo":9,"name":9,"slug":79},"design-handoff",{"seo":9,"name":62,"slug":63},"5237122f-f736-4899-bd25-2002bf09dec2.webp","UX content management platform for multilingual products","2026-06-17T09:18:30.634258+00:00",{"id":85,"url":86,"icon":9,"name":87,"slug":88,"tags":89,"cover":99,"tagline":100,"is_featured":66,"date_created":101,"date_updated":9},668,"https:\u002F\u002Fwww.aura.build","Aura Build","aura-build",[90,91,93,94,96,98],{"seo":9,"name":9,"slug":56},{"seo":9,"name":9,"slug":92},"prototyping",{"seo":9,"name":9,"slug":60},{"seo":9,"name":9,"slug":95},"responsive",{"seo":9,"name":9,"slug":97},"icons",{"seo":9,"name":62,"slug":63},"be6ec3d1-5806-4cf8-bc58-5d536af6c04d.webp","AI-powered website builder and design assistant","2026-06-17T09:18:13.351637+00:00",{"id":103,"url":104,"icon":9,"name":105,"slug":106,"tags":107,"cover":113,"tagline":114,"is_featured":66,"date_created":115,"date_updated":9},667,"https:\u002F\u002Fwww.magicpatterns.com","Magic Patterns","magic-patterns",[108,109,110,111,112],{"seo":9,"name":9,"slug":56},{"seo":9,"name":9,"slug":92},{"seo":9,"name":9,"slug":77},{"seo":9,"name":9,"slug":79},{"seo":9,"name":62,"slug":63},"6d6649e5-e83d-44c6-bdf0-91d6cb530736.webp","AI prototype generator for product teams","2026-06-17T09:18:05.299046+00:00",[117,123,129,135,141,147,153,159,165,171],{"url":118,"name":119,"slug":120,"cover":121,"tagline":122},"https:\u002F\u002Fux.palmetto.com\u002F","Palmetto Design System","palmetto-design-system","f50abbab-5c4c-4f0a-aabf-8ec395fdd81c.webp","open-source design system for consistent, accessible solar energy product interfaces.",{"url":124,"name":125,"slug":126,"cover":127,"tagline":128},"https:\u002F\u002Fpaste.twilio.design\u002F","Paste","paste","8f0b425a-2151-4269-9a47-62b660e941ad.webp","Twilio's open-source design system for consistent, accessible communication product interfaces.",{"url":130,"name":131,"slug":132,"cover":133,"tagline":134},"https:\u002F\u002Fpando.pluralsight.com\u002F","Pando Design System","pando-design-system","d938932f-607f-4fe7-afa6-33b2a3080825.webp","Pluralsight's open-source design system for consistent, accessible web interfaces.",{"url":136,"name":137,"slug":138,"cover":139,"tagline":140},"https:\u002F\u002Fdesignsystem.porsche.com\u002F","Porsche Design System","porsche-design-system","c1a6007f-989f-4725-984b-1860c676c73f.webp","open-source framework for consistent, premium automotive digital interfaces.",{"url":142,"name":143,"slug":144,"cover":145,"tagline":146},"https:\u002F\u002Frangle.io\u002Fradius","Radius Design System","radius-design-system","f2dd1c78-c750-4a48-8db0-5fc635fd3907.webp","Rangle's meta-framework accelerating custom design system creation with tools and kits.",{"url":148,"name":149,"slug":150,"cover":151,"tagline":152},"https:\u002F\u002Fwww.saltdesignsystem.com\u002Fsalt\u002Findex","Salt Design System","salt-design-system","fc71eb34-936d-4b69-a838-c8639e184414.webp","J.P. Morgan's open-source framework for accessible, customizable financial interfaces.",{"url":154,"name":155,"slug":156,"cover":157,"tagline":158},"https:\u002F\u002Fdocs.slack.dev\u002Fblock-kit\u002F","Slack Block Kit","slack-block-kit","f6de092e-fe4f-4cfe-a96a-f1af2afc92ff.webp","modular UI framework for building rich, interactive messages and apps in Slack.",{"url":160,"name":161,"slug":162,"cover":163,"tagline":164},"https:\u002F\u002Fsmarthr.design\u002F","SmartHR UI","smart-hr-ui","0efda09b-34d2-4a3b-b52c-0e3518958f12.webp","open-source React component library for consistent, accessible HR platform interfaces.",{"url":166,"name":167,"slug":168,"cover":169,"tagline":170},"https:\u002F\u002Fdesignsystem.digital.gov\u002F","U.S. Web Design System","u-s-web-design-system","d4196dd2-7ef1-4f2e-b89b-2e5f51a70a54.webp","Web Design System: official U.S. government framework for consistent, accessible public digital services.",{"url":172,"name":173,"slug":174,"cover":175,"tagline":176},"https:\u002F\u002Fparadigm.mail.ru\u002F","Paradigm Design System","paradigm-design-system","312e6227-8f6e-4155-b00e-7c9b6e2c6d38.webp","Mail.ru\u002FVK's open-source framework for consistent web interfaces.",[178,192,204],{"url":179,"icon":9,"name":180,"slug":181,"tags":182,"cover":189,"tagline":190,"is_featured":9,"date_created":191,"date_updated":9},"https:\u002F\u002Fzeroheight.com","Zeroheight","zeroheight",[183,184,185,186,187],{"seo":9,"name":9,"slug":38},{"seo":9,"name":9,"slug":77},{"seo":9,"name":9,"slug":92},{"seo":9,"name":9,"slug":79},{"seo":9,"name":9,"slug":188},"figma-file","8f4828c0-3236-44df-9cce-4b74ad2700f7.webp","Living design system documentation — connect Figma to code with interactive docs","2026-06-16T07:16:42.647437+00:00",{"url":193,"icon":9,"name":194,"slug":195,"tags":196,"cover":201,"tagline":202,"is_featured":9,"date_created":203,"date_updated":9},"https:\u002F\u002Fspecifyapp.com","Specify","specify",[197,198,200],{"seo":9,"name":9,"slug":77},{"seo":9,"name":9,"slug":199},"version-control",{"seo":9,"name":9,"slug":79},"ac2bb029-95df-4617-97ca-6051f5dccfc1.webp","Design token platform that pushes your design decisions to code — automatically","2026-06-16T07:14:19.135613+00:00",{"url":205,"icon":206,"name":207,"slug":208,"tags":209,"cover":211,"tagline":212,"is_featured":9,"date_created":213,"date_updated":214},"https:\u002F\u002Fvuetifyjs.com\u002F","bd46950f-9a47-4d81-95da-ed6467288051.svg","Vuetify","vuetify",[210],{"seo":9,"name":9,"slug":38},"screenshots\u002Fvuetify.webp","Vuetify is a complete Vue.js UI framework that strictly adheres to Material Design guidelines, offering a rich set of components and powerful customization capabilities.","2025-10-15T08:20:56.561+00:00","2026-06-12T06:51:44.386368+00:00"]