[{"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":50,"alternatives-carbon-design-system-en-US":125,"related-resources-carbon-design-system-en-US":186},true,{"id":5,"name":6,"slug":7,"url":8,"date_updated":9,"images_other":10,"tagline":11,"description":12,"seo":13,"features":16,"pros":21,"cons":26,"best_for":29,"cover":30,"icon":31,"pricing":32,"platform":33,"github_url":10,"twitter_url":10,"discord_url":10,"dribbble_url":10,"pricing_tiers":35,"views_count":36,"featured_rank":10,"categories":37,"tags":42,"files":46},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,"meta_description":15},"Carbon Design System - IBM's open-source UI framework for consistent, accessible enterprise products. | DesignToolMark","Carbon Design System is IBM's comprehensive opensource design system for building digital products and experiences, used across IBM offerings like Watson and...",[17,18,19,20],"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.",[22,23,24,25],"Open source","Cloud-based, no installation needed","Extensive icon library","Color palette generation",[27,28],"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",[34],"Browser",{"free":3},0,[38],{"name":39,"slug":40,"sub_categories":41},"Design Systems","design-systems",[],[43,45],{"name":44,"slug":32},"Free",{"name":39,"slug":40},[47],{"url":48,"type":49},"https:\u002F\u002Fwww.figma.com\u002Fcommunity\u002Ffile\u002F1157761560874207208\u002Fv11-carbon-design-system","figma",[51,71,86,99],{"id":52,"url":53,"icon":10,"name":54,"slug":55,"tags":56,"cover":67,"tagline":68,"is_featured":69,"date_created":70,"date_updated":10},862,"https:\u002F\u002Fdeveloper.apple.com\u002Fdesign\u002Fresources\u002F","Apple Design Resources","apple-design-resources",[57,58,60,62,64,66],{"seo":10,"name":44,"slug":32},{"seo":10,"name":10,"slug":59},"fonts",{"seo":10,"name":10,"slug":61},"icons",{"seo":10,"name":10,"slug":63},"mockups",{"seo":10,"name":10,"slug":65},"ui-kits",{"seo":10,"name":10,"slug":40},"39af338d-2e06-4c05-bfcb-b33066ed9bb7.webp","Official Apple design templates, UI kits, fonts, and tools",false,"2026-07-16T01:44:01.585569+00:00",{"id":72,"url":73,"icon":10,"name":74,"slug":75,"tags":76,"cover":83,"tagline":84,"is_featured":69,"date_created":85,"date_updated":10},861,"https:\u002F\u002Fferalui.dev\u002Fgradients","FeralUI Gradient Builder","feralui-gradients",[77,78,81],{"seo":10,"name":44,"slug":32},{"seo":10,"name":79,"slug":80},"Open Source","open-source",{"seo":10,"name":10,"slug":82},"colors","7ebaf15a-33a1-4f03-bd92-88ad52b886e5.webp","Playful, physics-driven gradient builder for Tailwind CSS","2026-07-16T01:39:25.742464+00:00",{"id":87,"url":88,"icon":10,"name":89,"slug":90,"tags":91,"cover":96,"tagline":97,"is_featured":69,"date_created":98,"date_updated":10},860,"https:\u002F\u002Fviewport-ui.design\u002F","Viewport UI","viewport-ui",[92,93,94],{"seo":10,"name":44,"slug":32},{"seo":10,"name":10,"slug":65},{"seo":10,"name":10,"slug":95},"inspiration","7a4e7938-e9b1-4f8b-9886-37b683ddd8f6.webp","UI curated experiences for your inspiration","2026-07-07T06:28:48.469215+00:00",{"id":100,"url":101,"icon":10,"name":102,"slug":103,"tags":104,"cover":122,"tagline":123,"is_featured":69,"date_created":124,"date_updated":10},859,"https:\u002F\u002F21st.dev\u002F","21st.dev","21st-dev",[105,108,110,111,114,115,116,118,120],{"seo":10,"name":106,"slug":107},"AI Powered","ai-powered",{"seo":10,"name":10,"slug":109},"ai",{"seo":10,"name":44,"slug":32},{"seo":10,"name":112,"slug":113},"Freemium","freemium",{"seo":10,"name":10,"slug":65},{"seo":10,"name":10,"slug":40},{"seo":10,"name":10,"slug":117},"prototyping",{"seo":10,"name":10,"slug":119},"no-code",{"seo":10,"name":10,"slug":121},"productivity","79e67612-7a6f-45be-a799-e872786fc4ed.webp","Hand-crafted React components and templates — not AI slop","2026-07-07T06:23:36.061553+00:00",[126,132,138,144,150,156,162,168,174,180],{"url":127,"name":128,"slug":129,"cover":130,"tagline":131},"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":133,"name":134,"slug":135,"cover":136,"tagline":137},"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":139,"name":140,"slug":141,"cover":142,"tagline":143},"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":145,"name":146,"slug":147,"cover":148,"tagline":149},"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":151,"name":152,"slug":153,"cover":154,"tagline":155},"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":157,"name":158,"slug":159,"cover":160,"tagline":161},"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":163,"name":164,"slug":165,"cover":166,"tagline":167},"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":169,"name":170,"slug":171,"cover":172,"tagline":173},"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":175,"name":176,"slug":177,"cover":178,"tagline":179},"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":181,"name":182,"slug":183,"cover":184,"tagline":185},"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.",[187,195,206],{"url":53,"icon":10,"name":54,"slug":55,"tags":188,"cover":67,"tagline":68,"is_featured":69,"date_created":70,"date_updated":10},[189,190,191,192,193,194],{"seo":10,"name":44,"slug":32},{"seo":10,"name":10,"slug":59},{"seo":10,"name":10,"slug":61},{"seo":10,"name":10,"slug":63},{"seo":10,"name":10,"slug":65},{"seo":10,"name":10,"slug":40},{"url":101,"icon":10,"name":102,"slug":103,"tags":196,"cover":122,"tagline":123,"is_featured":69,"date_created":124,"date_updated":10},[197,198,199,200,201,202,203,204,205],{"seo":10,"name":106,"slug":107},{"seo":10,"name":10,"slug":109},{"seo":10,"name":44,"slug":32},{"seo":10,"name":112,"slug":113},{"seo":10,"name":10,"slug":65},{"seo":10,"name":10,"slug":40},{"seo":10,"name":10,"slug":117},{"seo":10,"name":10,"slug":119},{"seo":10,"name":10,"slug":121},{"url":207,"icon":10,"name":208,"slug":209,"tags":210,"cover":216,"tagline":217,"is_featured":69,"date_created":218,"date_updated":10},"https:\u002F\u002Fflareum.io\u002F","Flareum","flareum",[211,212,214],{"seo":10,"name":10,"slug":40},{"seo":10,"name":10,"slug":213},"figma-file",{"seo":10,"name":10,"slug":215},"collaboration","7ce196b0-b5f3-49d4-ba83-cdff08424942.webp","Design system builder that syncs Figma and code","2026-06-23T12:06:17.661232+00:00"]