[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"categories-en-US":3,"blog-categories-en-US":3,"resource-atlassian-design-system-en-US":4,"featured-sidebar-data-en-US":3,"latest-resources-en-US":45,"alternatives-atlassian-design-system-en-US":120,"related-resources-atlassian-design-system-en-US":181},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":9},436,"Atlassian Design System","atlassian-design-system","https:\u002F\u002Fwww.figma.com\u002F@atlassian",null,"comprehensive guidelines and Figma components for consistent, accessible product interfaces.","The Atlassian Design System (ADS) is Atlassian's official framework for building consistent, scalable, and accessible user experiences across products like Jira, Confluence, and Trello. It provides reusable UI components, design tokens, patterns, and guidelines to ensure brand alignment and developer-designer collaboration. The system is open-source with Figma libraries and documentation, regularly updated for modern standards.\nComponent Library: Reusable elements like buttons, forms, navigation, and data displays with variants and states.\nDesign Tokens: Semantic colors, typography, spacing, icons, and motion for theme consistency.\nFigma Kit: Official community file with auto-layout components for rapid prototyping.\nGuidelines: Accessibility, responsiveness, and best practices for inclusive design.",{"title":13,"meta_description":14},"Atlassian Design System - comprehensive guidelines and Figma components for consistent, accessible product interfaces. | DesignToolMark","The Atlassian Design System (ADS) is Atlassian's official framework for building consistent, scalable, and accessible user experiences across products like J...",[16,17,18,19],"Component Library: Reusable elements like buttons, forms, navigation, and data displays with variants and states.","Design Tokens: Semantic colors, typography, spacing, icons, and motion for theme consistency.","Figma Kit: Official community file with auto-layout components for rapid prototyping.","Guidelines: Accessibility, responsiveness, and best practices for inclusive design.",[21,22,23,24],"Open source","Real-time collaboration","Extensive icon library","Color palette generation",[26,27],"Adoption requires team alignment","Customization can be complex","Design Tokens: Semantic colors, typography, spacing, icons, and motion for theme consistency. Figma Kit: Official community file with auto-layout components for rapid prototyping. Guidelines: Accessibility, responsiveness, and best practices for inclusive design.","7c4fca7f-1d04-4216-8c55-a68b69761003.png","6c31003e-ce95-42ad-940d-06a833d24ace.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,66,81,94],{"id":47,"url":48,"icon":9,"name":49,"slug":50,"tags":51,"cover":62,"tagline":63,"is_featured":64,"date_created":65,"date_updated":9},862,"https:\u002F\u002Fdeveloper.apple.com\u002Fdesign\u002Fresources\u002F","Apple Design Resources","apple-design-resources",[52,53,55,57,59,61],{"seo":9,"name":43,"slug":31},{"seo":9,"name":9,"slug":54},"fonts",{"seo":9,"name":9,"slug":56},"icons",{"seo":9,"name":9,"slug":58},"mockups",{"seo":9,"name":9,"slug":60},"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":67,"url":68,"icon":9,"name":69,"slug":70,"tags":71,"cover":78,"tagline":79,"is_featured":64,"date_created":80,"date_updated":9},861,"https:\u002F\u002Fferalui.dev\u002Fgradients","FeralUI Gradient Builder","feralui-gradients",[72,73,76],{"seo":9,"name":43,"slug":31},{"seo":9,"name":74,"slug":75},"Open Source","open-source",{"seo":9,"name":9,"slug":77},"colors","7ebaf15a-33a1-4f03-bd92-88ad52b886e5.webp","Playful, physics-driven gradient builder for Tailwind CSS","2026-07-16T01:39:25.742464+00:00",{"id":82,"url":83,"icon":9,"name":84,"slug":85,"tags":86,"cover":91,"tagline":92,"is_featured":64,"date_created":93,"date_updated":9},860,"https:\u002F\u002Fviewport-ui.design\u002F","Viewport UI","viewport-ui",[87,88,89],{"seo":9,"name":43,"slug":31},{"seo":9,"name":9,"slug":60},{"seo":9,"name":9,"slug":90},"inspiration","7a4e7938-e9b1-4f8b-9886-37b683ddd8f6.webp","UI curated experiences for your inspiration","2026-07-07T06:28:48.469215+00:00",{"id":95,"url":96,"icon":9,"name":97,"slug":98,"tags":99,"cover":117,"tagline":118,"is_featured":64,"date_created":119,"date_updated":9},859,"https:\u002F\u002F21st.dev\u002F","21st.dev","21st-dev",[100,103,105,106,109,110,111,113,115],{"seo":9,"name":101,"slug":102},"AI Powered","ai-powered",{"seo":9,"name":9,"slug":104},"ai",{"seo":9,"name":43,"slug":31},{"seo":9,"name":107,"slug":108},"Freemium","freemium",{"seo":9,"name":9,"slug":60},{"seo":9,"name":9,"slug":39},{"seo":9,"name":9,"slug":112},"prototyping",{"seo":9,"name":9,"slug":114},"no-code",{"seo":9,"name":9,"slug":116},"productivity","79e67612-7a6f-45be-a799-e872786fc4ed.webp","Hand-crafted React components and templates — not AI slop","2026-07-07T06:23:36.061553+00:00",[121,127,133,139,145,151,157,163,169,175],{"url":122,"name":123,"slug":124,"cover":125,"tagline":126},"https:\u002F\u002Fwww.figma.com\u002Fcommunity\u002Ffile\u002F1047600760128127424\u002Faws-amplify-ui-kit","AWS Amplify","aws-amplify","4ba08f58-1771-43c7-9b18-b3445362f384.webp","Figma components for building Amplify-powered apps with consistent AWS design language.",{"url":128,"name":129,"slug":130,"cover":131,"tagline":132},"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":134,"name":135,"slug":136,"cover":137,"tagline":138},"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":140,"name":141,"slug":142,"cover":143,"tagline":144},"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":146,"name":147,"slug":148,"cover":149,"tagline":150},"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":152,"name":153,"slug":154,"cover":155,"tagline":156},"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":158,"name":159,"slug":160,"cover":161,"tagline":162},"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":164,"name":165,"slug":166,"cover":167,"tagline":168},"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":170,"name":171,"slug":172,"cover":173,"tagline":174},"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":176,"name":177,"slug":178,"cover":179,"tagline":180},"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.",[182,190,201],{"url":48,"icon":9,"name":49,"slug":50,"tags":183,"cover":62,"tagline":63,"is_featured":64,"date_created":65,"date_updated":9},[184,185,186,187,188,189],{"seo":9,"name":43,"slug":31},{"seo":9,"name":9,"slug":54},{"seo":9,"name":9,"slug":56},{"seo":9,"name":9,"slug":58},{"seo":9,"name":9,"slug":60},{"seo":9,"name":9,"slug":39},{"url":96,"icon":9,"name":97,"slug":98,"tags":191,"cover":117,"tagline":118,"is_featured":64,"date_created":119,"date_updated":9},[192,193,194,195,196,197,198,199,200],{"seo":9,"name":101,"slug":102},{"seo":9,"name":9,"slug":104},{"seo":9,"name":43,"slug":31},{"seo":9,"name":107,"slug":108},{"seo":9,"name":9,"slug":60},{"seo":9,"name":9,"slug":39},{"seo":9,"name":9,"slug":112},{"seo":9,"name":9,"slug":114},{"seo":9,"name":9,"slug":116},{"url":202,"icon":9,"name":203,"slug":204,"tags":205,"cover":211,"tagline":212,"is_featured":64,"date_created":213,"date_updated":9},"https:\u002F\u002Fflareum.io\u002F","Flareum","flareum",[206,207,209],{"seo":9,"name":9,"slug":39},{"seo":9,"name":9,"slug":208},"figma-file",{"seo":9,"name":9,"slug":210},"collaboration","7ce196b0-b5f3-49d4-ba83-cdff08424942.webp","Design system builder that syncs Figma and code","2026-06-23T12:06:17.661232+00:00"]