[{"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":3,"latest-resources-en-US":27},true,{"id":5,"name":6,"slug":7,"url":8,"date_updated":9,"images_other":9,"tagline":10,"description":11,"seo":9,"cover":12,"icon":13,"categories":14,"tags":19,"files":20,"pricing":24,"platform":25},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.\n\n#### Key Features\n- **Component Library**: Reusable elements like buttons, forms, navigation, cards, and Porsche-specific widgets (e.g., car configurator tools) with variants for themes and states.\n- **Design Tokens**: Semantic colors (Porsche palette), typography, spacing, icons, and motion for premium consistency.\n- **Accessibility**: WCAG compliance with ARIA support and inclusive patterns.\n- **Tools**: Figma kit for prototyping; web components and React library for implementation; Storybook for exploration.","c1a6007f-989f-4725-984b-1860c676c73f.webp","e25f61e8-6a51-4a96-92d9-5d3514f02a93.svg",[15],{"name":16,"slug":17,"sub_categories":18},"Design Systems","design-systems",[],[],[21],{"url":22,"type":23},"https:\u002F\u002Fwww.figma.com\u002Fcommunity\u002Ffile\u002F1385198638659084461\u002Fweb-design-system-v3","figma","free",[26],"Browser",[28,38,48,58],{"id":29,"url":30,"icon":9,"name":31,"slug":32,"tags":33,"cover":34,"tagline":35,"is_featured":9,"date_created":36,"date_updated":37},626,"https:\u002F\u002Fwww.adobe.com\u002Fproducts\u002Fpremiere.html","Adobe Premiere Pro","adobe-premiere-pro",[],"a434eac3-16e4-4d58-ba0f-fc1455f26f61.png","Industry-standard professional video editing software.","2026-06-10T10:29:35.068159+00:00","2026-06-11T08:54:31.356+00:00",{"id":39,"url":40,"icon":41,"name":42,"slug":43,"tags":44,"cover":41,"tagline":45,"is_featured":9,"date_created":46,"date_updated":47},619,"https:\u002F\u002Fmiro.com\u002F","screenshots\u002Fmiro.webp","Miro","miro",[],"Online collaborative whiteboard platform for team brainstorming and visual collaboration.","2026-06-10T10:28:38.96333+00:00","2026-06-10T12:17:15.286087+00:00",{"id":49,"url":50,"icon":51,"name":52,"slug":53,"tags":54,"cover":51,"tagline":55,"is_featured":9,"date_created":56,"date_updated":57},620,"https:\u002F\u002Fwww.notion.so\u002F","screenshots\u002Fnotion.webp","Notion","notion",[],"All-in-one workspace for notes, docs, wikis, and project management.","2026-06-10T10:28:40.131599+00:00","2026-06-10T12:17:01.610184+00:00",{"id":59,"url":60,"icon":61,"name":62,"slug":63,"tags":64,"cover":61,"tagline":65,"is_featured":9,"date_created":66,"date_updated":67},615,"https:\u002F\u002Fklingai.com\u002F","screenshots\u002Fkling.webp","Kling","kling",[],"Kuaishou's advanced AI video generation model for creating realistic videos from text and images.","2026-06-10T10:28:33.408711+00:00","2026-06-10T12:16:41.37047+00:00"]