[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-categories-en-US":3,"categories-en-US":3,"resource-carbon-design-system-en-US":4,"featured-sidebar-data-en-US":3,"latest-resources-en-US":49,"alternatives-carbon-design-system-en-US":117,"related-resources-carbon-design-system-en-US":178},true,{"id":5,"name":6,"slug":7,"url":8,"date_updated":9,"images_other":10,"tagline":11,"description":12,"seo":13,"features":15,"pros":20,"cons":25,"best_for":28,"cover":29,"icon":30,"pricing":31,"platform":32,"github_url":10,"twitter_url":10,"discord_url":10,"dribbble_url":10,"pricing_tiers":34,"views_count":35,"featured_rank":10,"categories":36,"tags":41,"files":45},437,"Carbon Design System","carbon-design-system","https:\u002F\u002Fcarbondesignsystem.com\u002F","2025-12-13T02:44:00.757+00:00",null,"IBM's open-source UI framework for consistent, accessible enterprise products.","Carbon Design System is IBM's comprehensive open-source design system for building digital products and experiences, used across IBM offerings like Watson and Cloud. It provides reusable components, patterns, guidelines, and tools to ensure consistency, accessibility, and scalability. Carbon emphasizes data-driven design, inclusivity, and developer-friendly implementation with React components and Figma kits.\nComponents: 100+ ready-to-use UI elements (buttons, forms, data viz) with variants and states.\nGuidelines: Detailed specs for color, typography, motion, icons, and accessibility (WCAG compliance).\nTools: Figma library, React implementation, Sketch (legacy), and code packages.\nResources: Carbon for IBM Products (internal), community contributions via GitHub.",{"title":14,"description":11},"Carbon Design System - IBM's open-source UI framework for consistent, accessible enterprise products. | DesignToolMark",[16,17,18,19],"Components: 100+ ready-to-use UI elements (buttons, forms, data viz) with variants and states.","Guidelines: Detailed specs for color, typography, motion, icons, and accessibility (WCAG compliance).","Tools: Figma library, React implementation, Sketch (legacy), and code packages.","Resources: Carbon for IBM Products (internal), community contributions via GitHub.",[21,22,23,24],"Open source","Cloud-based, no installation needed","Extensive icon library","Color palette generation",[26,27],"Adoption requires team alignment","Customization can be complex","Guidelines: Detailed specs for color, typography, motion, icons, and accessibility (WCAG compliance). Tools: Figma library, React implementation, Sketch (legacy), and code packages. Resources: Carbon for IBM Products (internal), community contributions via GitHub.","f057e46c-3403-4f79-b0fe-7234ab8eab99.webp","b1cbd755-2b09-4f7e-bc9b-2e41952b190f.svg","free",[33],"Browser",{"free":3},0,[37],{"name":38,"slug":39,"sub_categories":40},"Design Systems","design-systems",[],[42,44],{"name":43,"slug":31},"Free",{"name":38,"slug":39},[46],{"url":47,"type":48},"https:\u002F\u002Fwww.figma.com\u002Fcommunity\u002Ffile\u002F1157761560874207208\u002Fv11-carbon-design-system","figma",[50,69,85,103],{"id":51,"url":52,"icon":10,"name":53,"slug":54,"tags":55,"cover":65,"tagline":66,"is_featured":67,"date_created":68,"date_updated":10},670,"https:\u002F\u002Fattentioninsight.com","Attention Insight","attention-insight",[56,58,60,62],{"seo":10,"name":10,"slug":57},"wireframe",{"seo":10,"name":10,"slug":59},"user-research",{"seo":10,"name":10,"slug":61},"web-design",{"seo":10,"name":63,"slug":64},"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":70,"url":71,"icon":10,"name":72,"slug":73,"tags":74,"cover":82,"tagline":83,"is_featured":67,"date_created":84,"date_updated":10},669,"https:\u002F\u002Fwww.frontitude.com","Frontitude","frontitude",[75,76,77,79,81],{"seo":10,"name":10,"slug":57},{"seo":10,"name":10,"slug":59},{"seo":10,"name":10,"slug":78},"collaboration",{"seo":10,"name":10,"slug":80},"design-handoff",{"seo":10,"name":63,"slug":64},"5237122f-f736-4899-bd25-2002bf09dec2.webp","UX content management platform for multilingual products","2026-06-17T09:18:30.634258+00:00",{"id":86,"url":87,"icon":10,"name":88,"slug":89,"tags":90,"cover":100,"tagline":101,"is_featured":67,"date_created":102,"date_updated":10},668,"https:\u002F\u002Fwww.aura.build","Aura Build","aura-build",[91,92,94,95,97,99],{"seo":10,"name":10,"slug":57},{"seo":10,"name":10,"slug":93},"prototyping",{"seo":10,"name":10,"slug":61},{"seo":10,"name":10,"slug":96},"responsive",{"seo":10,"name":10,"slug":98},"icons",{"seo":10,"name":63,"slug":64},"be6ec3d1-5806-4cf8-bc58-5d536af6c04d.webp","AI-powered website builder and design assistant","2026-06-17T09:18:13.351637+00:00",{"id":104,"url":105,"icon":10,"name":106,"slug":107,"tags":108,"cover":114,"tagline":115,"is_featured":67,"date_created":116,"date_updated":10},667,"https:\u002F\u002Fwww.magicpatterns.com","Magic Patterns","magic-patterns",[109,110,111,112,113],{"seo":10,"name":10,"slug":57},{"seo":10,"name":10,"slug":93},{"seo":10,"name":10,"slug":78},{"seo":10,"name":10,"slug":80},{"seo":10,"name":63,"slug":64},"6d6649e5-e83d-44c6-bdf0-91d6cb530736.webp","AI prototype generator for product teams","2026-06-17T09:18:05.299046+00:00",[118,124,130,136,142,148,154,160,166,172],{"url":119,"name":120,"slug":121,"cover":122,"tagline":123},"https:\u002F\u002Fwww.figma.com\u002Fcommunity\u002Ffile\u002F862805330899066752","Airtable UI Kit","airtable-ui-kit","59462e6f-03cf-4786-878f-43147ddf2897.webp","Figma components for designing Airtable-integrated apps with consistent UI patterns.",{"url":125,"name":126,"slug":127,"cover":128,"tagline":129},"https:\u002F\u002Fwww.figma.com\u002F@backstage","Backstage Design System","backstage-design-system","2dc0463e-c5e0-4c7a-a1c8-618668bce9ae.webp","Figma kit for Backstage developer portals with UI components and guidelines.",{"url":131,"name":132,"slug":133,"cover":134,"tagline":135},"https:\u002F\u002Fwww.figma.com\u002Fcommunity\u002Ffile\u002F805195278314519508","Base Gallery","base-gallery","b74e1e61-d456-49db-80d4-662a31d51a4f.webp","Figma community file showcasing a collection of UI components for design inspiration and prototyping.",{"url":137,"name":138,"slug":139,"cover":140,"tagline":141},"https:\u002F\u002Fwww.figma.com\u002F@atlassian","Atlassian Design System","atlassian-design-system","7c4fca7f-1d04-4216-8c55-a68b69761003.png","comprehensive guidelines and Figma components for consistent, accessible product interfaces.",{"url":143,"name":144,"slug":145,"cover":146,"tagline":147},"https:\u002F\u002Fcloudscape.design\u002F","Cloudscape Design System","cloudscape-design-system","bc8d1889-c2d0-448f-9aaf-6344c3a09da6.webp","AWS open-source UI framework for consistent, accessible enterprise cloud applications.",{"url":149,"name":150,"slug":151,"cover":152,"tagline":153},"https:\u002F\u002Feui.elastic.co\u002F","Elastic UI","elastic-ui","39c58c5d-1fd8-4d1d-9e61-34a7e2cfcc5b.webp","open-source React framework for consistent, accessible enterprise interfaces.",{"url":155,"name":156,"slug":157,"cover":158,"tagline":159},"https:\u002F\u002Fevergreen.segment.com\u002F","Evergreen","evergreen","083326da-6b7a-4c88-996b-680c0d937ecd.webp","open-source React UI framework by Segment for consistent, accessible enterprise applications.",{"url":161,"name":162,"slug":163,"cover":164,"tagline":165},"https:\u002F\u002Fwww.sap.com\u002Fdesign-system\u002F","SAP Design System","sap-design-system","48829753-db3e-4292-bbf2-1d01f7a58cff.webp","open-source framework for consistent, accessible enterprise UI across SAP products.",{"url":167,"name":168,"slug":169,"cover":170,"tagline":171},"https:\u002F\u002Fflowbite.com\u002F","Flowbite Design System","flowbite-design-system","1fc705b7-2a78-4a13-ae72-b6fbf30933be.webp","open-source Tailwind CSS component library with Figma kit for rapid UI building.",{"url":173,"name":174,"slug":175,"cover":176,"tagline":177},"https:\u002F\u002Fdoc.animaliads.io\u002F","Animalia DS","animalia-ds","27459ea0-63e7-4ca0-8224-14f3659e3932.webp","comprehensive design system for consistent UI components and guidelines in Animali apps.",[179,193,205],{"url":180,"icon":10,"name":181,"slug":182,"tags":183,"cover":190,"tagline":191,"is_featured":10,"date_created":192,"date_updated":10},"https:\u002F\u002Fzeroheight.com","Zeroheight","zeroheight",[184,185,186,187,188],{"seo":10,"name":10,"slug":39},{"seo":10,"name":10,"slug":78},{"seo":10,"name":10,"slug":93},{"seo":10,"name":10,"slug":80},{"seo":10,"name":10,"slug":189},"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":194,"icon":10,"name":195,"slug":196,"tags":197,"cover":202,"tagline":203,"is_featured":10,"date_created":204,"date_updated":10},"https:\u002F\u002Fspecifyapp.com","Specify","specify",[198,199,201],{"seo":10,"name":10,"slug":78},{"seo":10,"name":10,"slug":200},"version-control",{"seo":10,"name":10,"slug":80},"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":206,"icon":207,"name":208,"slug":209,"tags":210,"cover":212,"tagline":213,"is_featured":10,"date_created":214,"date_updated":215},"https:\u002F\u002Fvuetifyjs.com\u002F","bd46950f-9a47-4d81-95da-ed6467288051.svg","Vuetify","vuetify",[211],{"seo":10,"name":10,"slug":39},"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"]