Porsche Design SystemSearchNavigate to GitHub repository of Porsche Design SystemOpen sidebar
Introduction Table of Contents Start Designing The Porsche Design System helps you as a designer to quickly create high-quality, brand-appropriate interfaces. We provide access to tools, design libraries, guidelines, and support to make this possible. As a permanent member of a product team, you will have access to our internal design ecosystem. If you are working on a project with Porsche, we provide public resources. Both options adhere to the same standards. Tooling Figma: Figma is a public design tool that enables real-time collaboration for creating interface designs with your team, either in a browser or through a client application. The user-friendly interface and the ability to reuse our design library make it ideal for creating digital products. Learn about Figma's functionalities and how to use our components effectively by exploring the tutorials linked below. We regularly update the Design System Library in Figma, which includes all essential components and styles for easy integration into your interfaces - always in sync with the library for the developers. Using the library keeps your designs up to date and ensures a clear communication and consistent expectations between designers and developers during the hand-off and development process. Internal users will find the Design System Library already activated in their files. Figma Download Figma Tutorials Internal users: If you are a permanent designer in one of the digital product team within the Digital Family Portfolios, it is essential to collaborate with other teams and automatically receive updates to the library. As part of our onboarding, you will be invited to join our Figma enterprise space. After the invitation, you'll find the Design System Library already activated in your files and your are able to directly access the Figma Library Introduction with the following link. About the Library Work with Library External users: If you are not employed at Porsche or a permanent member of a Porsche digital product team but are involved in a digital project for Porsche, you can use your own or corporate Figma space to access our public Design System Library with the following link. Public Library Internal On-/Offboarding: If you are a permanent designer in one of the digital product team within the Digital Family Portfolios we will onboard you to our internal design community and provide you with the licenses needed. To request an onboarding for UX Designers, please complete the form below. Kindly note that due to cost and legal requirements, we can only onboard roles to teams that are part of the DigitalFamily. External User are welcome to rely on your out public resources. For collaboration purposes, we recommend using an .external@porsche.de email for the account. On - /Offboarding Connect with us Our philosophy is transparency: we are happy to hear about your daily challenges and achivements. For feedback and questions please use our #tool-porsche-design-system Slack or our MS Teams Design System Channel. Slack Channel MS Teams Resources Brand Guide Discover what sets the Porsche identity apart and fuels our passion. Porsche Brandguide Porsche Next font To effectively design Porsche web applications and utilize the Porsche Design System libraries, it's essential to download and install the Porsche Next font. Porsche Next font download Images & Videos To access suitable media for your projects, you can register and search for appropriate images and videos in the VM Media Database. VM Media Database
Global settingsThemeChanges the theme of the application and any Porsche Design System component. It's possible to choose between forced theme light and dark. It's also possible to use auto, which applies light or dark theme depending on the operating system settings automatically.LightDarkAuto (sync with operating system)DirectionChanges the direction of HTML elements, mostly used on<html> tag to support languages which are read from right to left like e.g. Arabic.LTR (left-to-right)RTL (right-to-left)AutoText ZoomChanges the text size and values with unit rem or em relatively. This setting can be defined in browser settings for any website or by an application itself on<html> tag. To achieve WCAG 2.2 AA compliance it's obligatory to support text zoom up to at least 200%.100%130%150%200%