Porsche Design System
You are currently viewing an earlier release of the Porsche Design System.Switch to the latest Porsche Design System documentation.
SearchNavigate to GitHub repository of Porsche Design SystemOpen sidebar
ExamplesUsageAPI
Color Variables Background ColorTailwind CSS variableTailwind CSS classDescriptionValue
--color-canvas.bg-canvasApplies the canvas color, typically used for surfaces.light-dark(#fff,hsl(225 66.7% 1.2%))
--color-surface.bg-surfaceApplies the surface color, typically used for surfaces.light-dark(hsl(240 10% 95%),hsl(240 2% 10%))
--color-frosted.bg-frostedApplies the frosted color, typically used as a background in combination with a blur effect .backdrop-blur-frosted.light-dark(hsl(240 5% 70% / 0.148),hsl(240 2% 43% / 0.228))
--color-frosted-soft.bg-frosted-softApplies the frosted color, typically used as a background :hover.light-dark(hsl(234 9.8% 60% / 0.06),hsl(240 3.7% 26.5% / 0.154))
--color-frosted-strong.bg-frosted-strongApplies the frosted color, typically used as a background in combination with a blur effect .backdrop-blur-frosted.light-dark(hsl(236 6.5% 42% / 0.236),hsl(240 1.5% 61.8% / 0.302))
--color-backdrop.bg-backdropApplies the backdrop color, typically used for backdrops.light-dark(hsl(240 5.3% 14.9% / 0.5),hsl(240 5.3% 14.9% / 0.5))
Foreground ColorTailwind CSS variableTailwind CSS classDescriptionValue
--color-primary.text-primaryApplies the primary color, typically used for text.light-dark(hsl(225 66.7% 1.2%),hsl(225 100% 99%))
--color-contrast-higher.text-contrast-higherApplies the contrast-higher color, typically used for text.light-dark(hsl(240 8.7% 9% / 0.8),hsl(240 12.5% 96.9% / 0.78))
--color-contrast-high.text-contrast-highApplies the contrast-high color, typically used for text.light-dark(hsl(240 7.1% 11% / 0.7),hsl(240 12.5% 96.9% / 0.67))
--color-contrast-medium.text-contrast-mediumApplies the contrast-medium color, typically used for text.light-dark(hsl(240 6.1% 7% / 0.6),hsl(240 12.5% 96.9% / 0.56))
--color-contrast-low.border-contrast-lowApplies the contrast-low color, intended only for decorative elements, as it is not accessibility-compliant.light-dark(hsl(240 5.3% 14.9% / 0.5),hsl(240 12.5% 96.9% / 0.45))
--color-contrast-lower.border-contrast-lowerApplies the contrast-lower color, intended only for decorative elements, as it is not accessibility-compliant.light-dark(hsl(234 6% 32.9% / 0.324),hsl(240 1.5% 61.8% / 0.302))
Semantic ColorTailwind CSS variableTailwind CSS classDescriptionValue
--color-info.text-infoApplies the info color, typically used for text.light-dark(hsl(228 83.2% 51%),hsl(210 100% 54.5%))
--color-info-medium.text-info .border-infoApplies the info color, typically used for text or border.light-dark(hsl(228 83.2% 51% / 0.6),hsl(210 100% 54.5% / 0.6))
--color-info-low.text-info .border-infoApplies the info color, typically used for text or border.light-dark(hsl(228 83.2% 51% / 0.18),hsl(210 100% 54.5% / 0.18))
--color-info-frosted.bg-info-frostedApplies the info-frosted color, typically used as background in combination with a blur effect .backdrop-blur-frosted.light-dark(hsl(228 83.2% 51% / 0.18),hsl(210 100% 54.5% / 0.26))
--color-info-frosted-soft.bg-info-frosted-softApplies the info-frosted-soft color, typically used as background :hover.light-dark(hsl(228 83.2% 51% / 0.1),hsl(210 100% 54.5% / 0.1))
--color-success.text-successApplies the success color, typically used for text.light-dark(hsl(115 77.5% 27.8%),hsl(157 84.9% 41.6%))
--color-success-medium.text-success .border-successApplies the success color, typically used for text or border.light-dark(hsl(115 77.5% 27.8% / 0.6),hsl(157 84.9% 41.6% / 0.6))
--color-success-low.text-success .border-successApplies the success color, typically used for text or border.light-dark(hsl(115 77.5% 27.8% / 0.18),hsl(157 84.9% 41.6% / 0.18))
--color-success-frosted.bg-success-frostedApplies the success-frosted color, typically used as background in combination with a blur effect .backdrop-blur-frosted.light-dark(hsl(115 77.5% 27.8% / 0.18),hsl(157 84.9% 41.6% / 0.26))
--color-success-frosted-soft.bg-success-frosted-softApplies the success-frosted-soft color, typically used as background :hover.light-dark(hsl(115 77.5% 27.8% / 0.1),hsl(157 84.9% 41.6% / 0.1))
--color-warning.text-warningApplies the warning color, typically used for text.light-dark(hsl(28 97.7% 34.1%),hsl(28 90.2% 56.1%))
--color-warning-medium.text-warning .border-warningApplies the warning color, typically used for text or border.light-dark(hsl(28 97.7% 34.1% / 0.6),hsl(28 90.2% 56.1% / 0.6))
--color-warning-low.text-warning .border-warningApplies the warning color, typically used for text or border.light-dark(hsl(28 97.7% 34.1% / 0.18),hsl(28 90.2% 56.1% / 0.18))
--color-warning-frosted.bg-warning-frostedApplies the warning-frosted color, typically used as background in combination with a blur effect .backdrop-blur-frosted.light-dark(hsl(28 97.7% 34.1% / 0.18),hsl(28 90.2% 56.1% / 0.26))
--color-warning-frosted-soft.bg-warning-frosted-softApplies the warning-frosted-soft color, typically used as background :hover.light-dark(hsl(28 97.7% 34.1% / 0.1),hsl(28 90.2% 56.1% / 0.1))
--color-error.text-errorApplies the error color, typically used for text.light-dark(hsl(357 78% 41%),hsl(0 96.9% 62%))
--color-error-medium.text-error .border-errorApplies the error color, typically used for text or border.light-dark(hsl(357 78% 41% / 0.6),hsl(0 96.9% 62% / 0.6))
--color-error-low.text-error .border-errorApplies the error color, typically used for text or border.light-dark(hsl(357 78% 41% / 0.18),hsl(0 96.9% 62% / 0.18))
--color-error-frosted.bg-error-frostedApplies the error-frosted color, typically used as background in combination with a blur effect .backdrop-blur-frosted.light-dark(hsl(357 78% 41% / 0.18),hsl(0 96.9% 62% / 0.26))
--color-error-frosted-soft.bg-error-frosted-softApplies the error-frosted-soft color, typically used as background :hover.light-dark(hsl(357 78% 41% / 0.1),hsl(0 96.9% 62% / 0.1))
A11y ColorTailwind CSS variableTailwind CSS classDescriptionValue
--color-focus.outline-focusApplies the focus color, typically used as the outline for :focus-visible states.light-dark(#1A44EA,#1A44EA)
Global settingsColor SchemeAll color tokens use the light-dark() CSS function. Set the theme via the CSS color-scheme property: light for light mode, dark for dark mode, or light dark to follow the user's system preference.LightDarkLight DarkDirectionThe dir global attribute in HTML changes the direction of text and other content within an element. It's most often used on the <html> tag to set the entire page's direction, which is crucial for supporting languages that are written from right to left (RTL), such as Arabic and Hebrew. For example, using <html dir="rtl"> makes the entire page display from right to left, adjusting the layout and text flow accordingly.LTR (left-to-right)RTL (right-to-left)Text ZoomTo ensure accessibility and comply with WCAG 2.2 AA standards, it is mandatory for web content to support text resizing up to at least 200% without loss of content or functionality. Using relative units like rem is a best practice for achieving this, as they allow the text to scale uniformly based on the user's browser settings.100%130%150%200%