[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-categories-en-US":3,"categories-en-US":3,"resource-forma-36-design-system-en-US":4,"featured-sidebar-data-en-US":3,"latest-resources-en-US":48,"alternatives-forma-36-design-system-en-US":116,"related-resources-forma-36-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},445,"Forma 36 Design System","forma-36-design-system","https:\u002F\u002Ff36.contentful.com\u002F",null,"Contentful's open-source design system for consistent, accessible content management interfaces.","Forma 36 is Contentful's official open-source design system, providing a comprehensive set of UI components, guidelines, and tools to build consistent, accessible, and scalable experiences for content management platforms and related applications. It powers Contentful's own products and is available for external use, focusing on modularity, developer productivity, and user-centered design with React components and Figma libraries.\nComponent Library: Reusable elements like buttons, forms, cards, tables, modals, and navigation with variants for themes and states.\nDesign Tokens: Semantic colors, typography, spacing, icons, and motion for brand consistency.\nAccessibility: WCAG-compliant with ARIA support and inclusive patterns.\nTools: Figma kit for prototyping; React library with TypeScript support for implementation.",{"title":13,"description":10},"Forma 36 Design System - Contentful's open-source design system for consistent, accessible content management interfaces. | DesignToolMark",[15,16,17,18],"Component Library: Reusable elements like buttons, forms, cards, tables, modals, and navigation with variants for themes and states.","Design Tokens: Semantic colors, typography, spacing, icons, and motion for brand consistency.","Accessibility: WCAG-compliant with ARIA support and inclusive patterns.","Tools: Figma kit for prototyping; React library with TypeScript support for implementation.",[20,21,22,23],"Open source","Extensive icon library","Color palette generation","Accessibility contrast checking",[25,26],"Adoption requires team alignment","Customization can be complex","Teams building scalable, consistent digital products.","96d051e6-00df-499a-8ac3-7c9c54cb0bb5.webp","235a4b81-78b4-47d5-b4b2-bf5d91d2f9ae.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\u002F1099314541500153018\u002Fforma-36-components","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\u002Feui.elastic.co\u002F","Elastic UI","elastic-ui","39c58c5d-1fd8-4d1d-9e61-34a7e2cfcc5b.webp","open-source React framework for consistent, accessible enterprise interfaces.",{"url":124,"name":125,"slug":126,"cover":127,"tagline":128},"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":130,"name":131,"slug":132,"cover":133,"tagline":134},"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":136,"name":137,"slug":138,"cover":139,"tagline":140},"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":142,"name":143,"slug":144,"cover":145,"tagline":146},"https:\u002F\u002Fmobilelive.ai\u002Ffriday-design-system","Friday Design System","friday-design-system","868cc299-6f7d-40fb-8de5-5e523df3ba7e.webp","open-source Figma UI kit for rapid prototyping with customizable components.",{"url":148,"name":149,"slug":150,"cover":151,"tagline":152},"https:\u002F\u002Fdesign-system.service.gov.uk\u002F","GOV.UK Design System","gov-uk-design-system","232c94f2-e73d-4a66-940b-fb021a39e9c7.webp","official UK government framework for consistent, accessible public service interfaces.",{"url":154,"name":155,"slug":156,"cover":157,"tagline":158},"https:\u002F\u002Fhorizon.servicenow.com\u002F","Horizon Design System","horizon-design-system","1029d4f0-63f9-4111-8f8c-c1d34fddda0a.webp","HashiCorp's open-source design system for consistent, accessible cloud management interfaces.",{"url":160,"name":161,"slug":162,"cover":163,"tagline":164},"https:\u002F\u002Fm3.material.io\u002F","Material Design","material-design","9ac1a8c0-b24f-4e26-abab-f5bbdb080afa.webp","Google's open-source design system for consistent, intuitive interfaces across platforms.",{"url":166,"name":167,"slug":168,"cover":169,"tagline":170},"https:\u002F\u002Ffluent2.microsoft.design\u002F","Fluent UI","fluent-ui","36a9eb2b-2406-49b2-9e68-80ace6c480a2.webp","Microsoft's open-source UI framework for consistent, accessible experiences across web, Windows, iOS, Android, and macOS.",{"url":172,"name":173,"slug":174,"cover":175,"tagline":176},"https:\u002F\u002Fwww.figma.com\u002F@gs","Goldman Sachs Design System","goldman-sachs-design-system","4f867e01-6a18-4ba1-8366-846a736223b2.webp","internal framework for consistent, accessible enterprise financial 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"]