[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"categories-en-US":3,"blog-categories-en-US":3,"resource-porsche-design-system-en-US":4,"featured-sidebar-data-en-US":3,"latest-resources-en-US":49,"alternatives-porsche-design-system-en-US":103,"related-resources-porsche-design-system-en-US":164},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":45},463,"Porsche Design System","porsche-design-system","https:\u002F\u002Fdesignsystem.porsche.com\u002F",null,"open-source framework for consistent, premium automotive digital interfaces.","Porsche Design System is Porsche's official open-source design system, providing reusable UI components, patterns, and guidelines to build consistent, accessible, and luxurious digital experiences across Porsche's web, mobile, and in-car applications. It reflects Porsche's brand values of precision, performance, and elegance, with a focus on high-end aesthetics, modularity, and developer efficiency using web components (Porsche Design System Core) and React wrappers.\nComponent Library: Reusable elements like buttons, forms, navigation, cards, and Porsche-specific widgets (e.g., car configurator tools) with variants for themes and states.\nDesign Tokens: Semantic colors (Porsche palette), typography, spacing, icons, and motion for premium consistency.\nAccessibility: WCAG compliance with ARIA support and inclusive patterns.\nTools: Figma kit for prototyping; web components and React library for implementation; Storybook for exploration.",{"title":13,"meta_description":14},"Porsche Design System - open-source framework for consistent, premium automotive digital interfaces. | DesignToolMark","Porsche Design System is Porsche's official opensource design system, providing reusable UI components, patterns, and guidelines to build consistent, accessi...",[16,17,18,19],"Component Library: Reusable elements like buttons, forms, navigation, cards, and Porsche-specific widgets (e.g., car configurator tools) with variants for themes and states.","Design Tokens: Semantic colors (Porsche palette), typography, spacing, icons, and motion for premium consistency.","Accessibility: WCAG compliance with ARIA support and inclusive patterns.","Tools: Figma kit for prototyping; web components and React library for implementation; Storybook for exploration.",[21,22,23,24],"Open source","Extensive icon library","Color palette generation","Accessibility contrast checking",[26,27],"Adoption requires team alignment","Customization can be complex","Teams building scalable, consistent digital products.","c1a6007f-989f-4725-984b-1860c676c73f.webp","e25f61e8-6a51-4a96-92d9-5d3514f02a93.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\u002F1385198638659084461\u002Fweb-design-system-v3","figma",[50,65,80,92],{"id":51,"url":52,"icon":9,"name":53,"slug":54,"tags":55,"cover":61,"tagline":62,"is_featured":63,"date_created":64,"date_updated":9},888,"https:\u002F\u002Ftexture.fayaz.workers.dev\u002F","Textures","textures",[56,57,59],{"seo":9,"name":43,"slug":31},{"seo":9,"name":9,"slug":58},"image-editing",{"seo":9,"name":9,"slug":60},"texture","b1f00aa9-a198-4585-8e88-aec7f2989c65.webp","Add print, glyph, paper, and painterly textures to images — right in your browser",false,"2026-09-24T05:00:52.555875+00:00",{"id":66,"url":67,"icon":9,"name":68,"slug":69,"tags":70,"cover":77,"tagline":78,"is_featured":63,"date_created":79,"date_updated":9},887,"https:\u002F\u002Fgithub.com\u002Fjub0t\u002FConcat","Concat","concat",[71,72,75],{"seo":9,"name":43,"slug":31},{"seo":9,"name":73,"slug":74},"Open Source","open-source",{"seo":9,"name":9,"slug":76},"video","f2afb6b7-328d-48ed-819b-4c76c7f4fadd.webp","The free, open-source CapCut replacement — no watermarks, no account, no subscription","2026-09-22T02:57:50.00508+00:00",{"id":81,"url":82,"icon":9,"name":83,"slug":84,"tags":85,"cover":89,"tagline":90,"is_featured":63,"date_created":91,"date_updated":9},886,"https:\u002F\u002Frobbietilton.com\u002Fcompositor","Compositor","compositor",[86,87,88],{"seo":9,"name":43,"slug":31},{"seo":9,"name":73,"slug":74},{"seo":9,"name":9,"slug":58},"7c6004b5-ad63-4528-b46f-af98a977bded.webp","The Photoshop alternative for Mac — free, open source, and always yours","2026-09-20T09:21:14.062761+00:00",{"id":93,"url":94,"icon":9,"name":95,"slug":96,"tags":97,"cover":100,"tagline":101,"is_featured":63,"date_created":102,"date_updated":9},885,"https:\u002F\u002Ftenzen.studio\u002Fphoton\u002F","Photon Studio","photon-studio",[98,99],{"seo":9,"name":43,"slug":31},{"seo":9,"name":9,"slug":58},"af10e82a-fbef-49bc-a66e-8666dd2b86db.webp","A free desktop image editor with layers, retouching, and native PSD support","2026-09-18T08:27:18.65337+00:00",[104,110,116,122,128,134,140,146,152,158],{"url":105,"name":106,"slug":107,"cover":108,"tagline":109},"https:\u002F\u002Fdesign.gitlab.com\u002F","Pajamas","pajamas","6df3ce4e-0bfa-4305-8480-02e2151c1c56.webp","GitLab's open-source design system for consistent, accessible interfaces across products.",{"url":111,"name":112,"slug":113,"cover":114,"tagline":115},"https:\u002F\u002Fux.palmetto.com\u002F","Palmetto Design System","palmetto-design-system","f50abbab-5c4c-4f0a-aabf-8ec395fdd81c.webp","open-source design system for consistent, accessible solar energy product interfaces.",{"url":117,"name":118,"slug":119,"cover":120,"tagline":121},"https:\u002F\u002Fpaste.twilio.design\u002F","Paste","paste","8f0b425a-2151-4269-9a47-62b660e941ad.webp","Twilio's open-source design system for consistent, accessible communication product interfaces.",{"url":123,"name":124,"slug":125,"cover":126,"tagline":127},"https:\u002F\u002Fpando.pluralsight.com\u002F","Pando Design System","pando-design-system","d938932f-607f-4fe7-afa6-33b2a3080825.webp","Pluralsight's open-source design system for consistent, accessible web interfaces.",{"url":129,"name":130,"slug":131,"cover":132,"tagline":133},"https:\u002F\u002Fprimer.style\u002F","Primer Design System","primer-design-system","906f2f3b-9f37-482d-8ed3-ad6fe7baad5d.webp","GitHub's open-source design system for consistent, accessible web interfaces.",{"url":135,"name":136,"slug":137,"cover":138,"tagline":139},"https:\u002F\u002Frangle.io\u002Fradius","Radius Design System","radius-design-system","f2dd1c78-c750-4a48-8db0-5fc635fd3907.webp","Rangle's meta-framework accelerating custom design system creation with tools and kits.",{"url":141,"name":142,"slug":143,"cover":144,"tagline":145},"https:\u002F\u002Fwww.saltdesignsystem.com\u002Fsalt\u002Findex","Salt Design System","salt-design-system","fc71eb34-936d-4b69-a838-c8639e184414.webp","J.P. Morgan's open-source framework for accessible, customizable financial interfaces.",{"url":147,"name":148,"slug":149,"cover":150,"tagline":151},"https:\u002F\u002Fdocs.slack.dev\u002Fblock-kit\u002F","Slack Block Kit","slack-block-kit","f6de092e-fe4f-4cfe-a96a-f1af2afc92ff.webp","modular UI framework for building rich, interactive messages and apps in Slack.",{"url":153,"name":154,"slug":155,"cover":156,"tagline":157},"https:\u002F\u002Fsmarthr.design\u002F","SmartHR UI","smart-hr-ui","0efda09b-34d2-4a3b-b52c-0e3518958f12.webp","open-source React component library for consistent, accessible HR platform interfaces.",{"url":159,"name":160,"slug":161,"cover":162,"tagline":163},"https:\u002F\u002Fparadigm.mail.ru\u002F","Paradigm Design System","paradigm-design-system","312e6227-8f6e-4155-b00e-7c9b6e2c6d38.webp","Mail.ru\u002FVK's open-source framework for consistent web interfaces.",[165,178,196],{"url":166,"icon":9,"name":167,"slug":168,"tags":169,"cover":175,"tagline":176,"is_featured":63,"date_created":177,"date_updated":9},"https:\u002F\u002Fvessa.design\u002F","Vessa","vessa",[170,172,173],{"seo":9,"name":9,"slug":171},"branding",{"seo":9,"name":9,"slug":39},{"seo":9,"name":9,"slug":174},"collaboration","4b2a0926-72ae-469e-b417-d2999453f13e.webp","Interactive brand guidelines your clients will actually use","2026-08-20T07:33:26.405607+00:00",{"url":179,"icon":9,"name":180,"slug":181,"tags":182,"cover":193,"tagline":194,"is_featured":63,"date_created":195,"date_updated":9},"https:\u002F\u002Fdeveloper.apple.com\u002Fdesign\u002Fresources\u002F","Apple Design Resources","apple-design-resources",[183,184,186,188,190,192],{"seo":9,"name":43,"slug":31},{"seo":9,"name":9,"slug":185},"fonts",{"seo":9,"name":9,"slug":187},"icons",{"seo":9,"name":9,"slug":189},"mockups",{"seo":9,"name":9,"slug":191},"ui-kits",{"seo":9,"name":9,"slug":39},"39af338d-2e06-4c05-bfcb-b33066ed9bb7.webp","Official Apple design templates, UI kits, fonts, and tools","2026-07-16T01:44:01.585569+00:00",{"url":197,"icon":9,"name":198,"slug":199,"tags":200,"cover":218,"tagline":219,"is_featured":63,"date_created":220,"date_updated":9},"https:\u002F\u002F21st.dev\u002F","21st.dev","21st-dev",[201,204,206,207,210,211,212,214,216],{"seo":9,"name":202,"slug":203},"AI Powered","ai-powered",{"seo":9,"name":9,"slug":205},"ai",{"seo":9,"name":43,"slug":31},{"seo":9,"name":208,"slug":209},"Freemium","freemium",{"seo":9,"name":9,"slug":191},{"seo":9,"name":9,"slug":39},{"seo":9,"name":9,"slug":213},"prototyping",{"seo":9,"name":9,"slug":215},"no-code",{"seo":9,"name":9,"slug":217},"productivity","79e67612-7a6f-45be-a799-e872786fc4ed.webp","Hand-crafted React components and templates — not AI slop","2026-07-07T06:23:36.061553+00:00"]