[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"categories-en-US":3,"blog-categories-en-US":3,"resource-cloudscape-design-system-en-US":4,"featured-sidebar-data-en-US":3,"latest-resources-en-US":52,"alternatives-cloudscape-design-system-en-US":127,"related-resources-cloudscape-design-system-en-US":188},true,{"id":5,"name":6,"slug":7,"url":8,"date_updated":9,"images_other":9,"tagline":10,"description":11,"seo":12,"features":15,"pros":20,"cons":25,"best_for":28,"cover":29,"icon":30,"pricing":31,"platform":32,"github_url":9,"twitter_url":9,"discord_url":9,"dribbble_url":9,"pricing_tiers":34,"views_count":35,"featured_rank":9,"categories":36,"tags":41,"files":48},439,"Cloudscape Design System","cloudscape-design-system","https:\u002F\u002Fcloudscape.design\u002F",null,"AWS open-source UI framework for consistent, accessible enterprise cloud applications.","Cloudscape Design System is Amazon Web Services' (AWS) open-source design system for building intuitive, accessible, and scalable user experiences in cloud management consoles and enterprise applications. It provides a comprehensive set of UI components, patterns, guidelines, and tools to ensure consistency across AWS services and third-party apps, emphasizing accessibility (WCAG compliance), internationalization, and developer efficiency with React implementations.\nComponent Library: Reusable elements like tables, forms, navigation, modals, and data visualizations with variants for light\u002Fdark modes.\nGuidelines: Detailed specs for colors, typography, icons, spacing, motion, and voice & tone.\nTools: Figma kit for prototyping, React components for implementation, and documentation for best practices.\nAccessibility & Global Support: Built-in ARIA, keyboard navigation, and multi-language readiness.",{"title":13,"meta_description":14},"Cloudscape Design System - AWS open-source UI framework for consistent, accessible enterprise cloud applications. | DesignToolMark","Cloudscape Design System is Amazon Web Services' (AWS) opensource design system for building intuitive, accessible, and scalable user experiences in cloud ma...",[16,17,18,19],"Component Library: Reusable elements like tables, forms, navigation, modals, and data visualizations with variants for light\u002Fdark modes.","Guidelines: Detailed specs for colors, typography, icons, spacing, motion, and voice & tone.","Tools: Figma kit for prototyping, React components for implementation, and documentation for best practices.","Accessibility & Global Support: Built-in ARIA, keyboard navigation, and multi-language readiness.",[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 colors, typography, icons, spacing, motion, and voice & tone. Tools: Figma kit for prototyping, React components for implementation, and documentation for best practices. Accessibility & Global Support: Built-in ARIA, keyboard navigation, and multi-language readiness.","bc8d1889-c2d0-448f-9aaf-6344c3a09da6.webp","a8d28558-4496-4917-a132-72cc07bc88b9.svg","free",[33],"Browser",{"free":3},0,[37],{"name":38,"slug":39,"sub_categories":40},"Design Systems","design-systems",[],[42,44,45],{"name":43,"slug":31},"Free",{"name":38,"slug":39},{"name":46,"slug":47},"Dark Mode","dark-mode",[49],{"url":50,"type":51},"https:\u002F\u002Fwww.figma.com\u002Fcommunity\u002Ffile\u002F1553420571206578774\u002Fcds-component-library-2-0-2","figma",[53,73,88,101],{"id":54,"url":55,"icon":9,"name":56,"slug":57,"tags":58,"cover":69,"tagline":70,"is_featured":71,"date_created":72,"date_updated":9},862,"https:\u002F\u002Fdeveloper.apple.com\u002Fdesign\u002Fresources\u002F","Apple Design Resources","apple-design-resources",[59,60,62,64,66,68],{"seo":9,"name":43,"slug":31},{"seo":9,"name":9,"slug":61},"fonts",{"seo":9,"name":9,"slug":63},"icons",{"seo":9,"name":9,"slug":65},"mockups",{"seo":9,"name":9,"slug":67},"ui-kits",{"seo":9,"name":9,"slug":39},"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":74,"url":75,"icon":9,"name":76,"slug":77,"tags":78,"cover":85,"tagline":86,"is_featured":71,"date_created":87,"date_updated":9},861,"https:\u002F\u002Fferalui.dev\u002Fgradients","FeralUI Gradient Builder","feralui-gradients",[79,80,83],{"seo":9,"name":43,"slug":31},{"seo":9,"name":81,"slug":82},"Open Source","open-source",{"seo":9,"name":9,"slug":84},"colors","7ebaf15a-33a1-4f03-bd92-88ad52b886e5.webp","Playful, physics-driven gradient builder for Tailwind CSS","2026-07-16T01:39:25.742464+00:00",{"id":89,"url":90,"icon":9,"name":91,"slug":92,"tags":93,"cover":98,"tagline":99,"is_featured":71,"date_created":100,"date_updated":9},860,"https:\u002F\u002Fviewport-ui.design\u002F","Viewport UI","viewport-ui",[94,95,96],{"seo":9,"name":43,"slug":31},{"seo":9,"name":9,"slug":67},{"seo":9,"name":9,"slug":97},"inspiration","7a4e7938-e9b1-4f8b-9886-37b683ddd8f6.webp","UI curated experiences for your inspiration","2026-07-07T06:28:48.469215+00:00",{"id":102,"url":103,"icon":9,"name":104,"slug":105,"tags":106,"cover":124,"tagline":125,"is_featured":71,"date_created":126,"date_updated":9},859,"https:\u002F\u002F21st.dev\u002F","21st.dev","21st-dev",[107,110,112,113,116,117,118,120,122],{"seo":9,"name":108,"slug":109},"AI Powered","ai-powered",{"seo":9,"name":9,"slug":111},"ai",{"seo":9,"name":43,"slug":31},{"seo":9,"name":114,"slug":115},"Freemium","freemium",{"seo":9,"name":9,"slug":67},{"seo":9,"name":9,"slug":39},{"seo":9,"name":9,"slug":119},"prototyping",{"seo":9,"name":9,"slug":121},"no-code",{"seo":9,"name":9,"slug":123},"productivity","79e67612-7a6f-45be-a799-e872786fc4ed.webp","Hand-crafted React components and templates — not AI slop","2026-07-07T06:23:36.061553+00:00",[128,134,140,146,152,158,164,170,176,182],{"url":129,"name":130,"slug":131,"cover":132,"tagline":133},"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":135,"name":136,"slug":137,"cover":138,"tagline":139},"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":141,"name":142,"slug":143,"cover":144,"tagline":145},"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":147,"name":148,"slug":149,"cover":150,"tagline":151},"https:\u002F\u002Fcarbondesignsystem.com\u002F","Carbon Design System","carbon-design-system","f057e46c-3403-4f79-b0fe-7234ab8eab99.webp","IBM's open-source UI framework for consistent, accessible enterprise products.",{"url":153,"name":154,"slug":155,"cover":156,"tagline":157},"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":159,"name":160,"slug":161,"cover":162,"tagline":163},"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":165,"name":166,"slug":167,"cover":168,"tagline":169},"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":171,"name":172,"slug":173,"cover":174,"tagline":175},"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":177,"name":178,"slug":179,"cover":180,"tagline":181},"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":183,"name":184,"slug":185,"cover":186,"tagline":187},"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.",[189,197,208],{"url":55,"icon":9,"name":56,"slug":57,"tags":190,"cover":69,"tagline":70,"is_featured":71,"date_created":72,"date_updated":9},[191,192,193,194,195,196],{"seo":9,"name":43,"slug":31},{"seo":9,"name":9,"slug":61},{"seo":9,"name":9,"slug":63},{"seo":9,"name":9,"slug":65},{"seo":9,"name":9,"slug":67},{"seo":9,"name":9,"slug":39},{"url":103,"icon":9,"name":104,"slug":105,"tags":198,"cover":124,"tagline":125,"is_featured":71,"date_created":126,"date_updated":9},[199,200,201,202,203,204,205,206,207],{"seo":9,"name":108,"slug":109},{"seo":9,"name":9,"slug":111},{"seo":9,"name":43,"slug":31},{"seo":9,"name":114,"slug":115},{"seo":9,"name":9,"slug":67},{"seo":9,"name":9,"slug":39},{"seo":9,"name":9,"slug":119},{"seo":9,"name":9,"slug":121},{"seo":9,"name":9,"slug":123},{"url":209,"icon":9,"name":210,"slug":211,"tags":212,"cover":218,"tagline":219,"is_featured":71,"date_created":220,"date_updated":9},"https:\u002F\u002Fflareum.io\u002F","Flareum","flareum",[213,214,216],{"seo":9,"name":9,"slug":39},{"seo":9,"name":9,"slug":215},"figma-file",{"seo":9,"name":9,"slug":217},"collaboration","7ce196b0-b5f3-49d4-ba83-cdff08424942.webp","Design system builder that syncs Figma and code","2026-06-23T12:06:17.661232+00:00"]