Colours
Brand
| Token | Role | Value | Example |
|---|---|---|---|
| primary | Primary brand colour |
rgba(1, 2, 5, 1) #010205 |
Functional
| Token | Role | Value | Example |
|---|---|---|---|
| success-bg | Success background |
#E4FFEC |
|
| success-content | Foreground content color to use on success color |
#197E10 |
Aa |
| warning-bg | Warning background |
#FFF4D2 |
|
| warning-content | Foreground content color to use on warning color |
#F3BE00 |
Aa |
| error-bg | Error Background |
#FFE2E4 |
|
| error-content | Foreground content color to use on error color |
#CC1922 |
Aa |
| info-bg | Info Background |
#D3E1FF |
|
| info-content | Foreground content color to use on info color |
#2762EC |
Aa |
Background
| Token | Role | Value | Example |
|---|---|---|---|
| white | Background color used for the main page body |
rgb(255, 255, 255) #FFFFFF |
|
| dark-overlay | Background color used for overlays | rgba(0, 0, 0, 0.3) |
Typography
| Token | Role | Value | Example |
|---|---|---|---|
| grey-1000 | Used for headings |
#010205 |
Aa |
| grey-800 | Used for footer text |
#1A1D24 |
Aa |
| grey-700 | Used for body text |
#535457 |
Aa |
| grey-500 | Used for selectors checkbox, radio background |
#949598 |
Aa |
| grey-400 | Used for selectors checkbox, radio background |
#6B6D70 |
Aa |
| grey-300 | Weaker body text for visual hierarchy |
#D8D8DB |
Aa |
| grey-100 | Weaker body text for visual hierarchy |
#EEEFF2 |
Aa |
Typographys
| Display | Token | Size | Line-height | Weight |
|---|---|---|---|---|
| Headline Big | text-6xl | 60px | 66px | 600 |
| Headline 1 | text-5xl | 48px | 54px | 600 |
| Headline 1 | text-5xl | 48px | 54px | 400 |
| Headline 2 | text-4xl | 36px | 42px | 600 |
| Headline 2 | text-4xl | 36px | 42px | 400 |
| Headline 3 | text-3xl | 30px | 36px | 600 |
| Headline 3 | text-3xl | 30px | 36px | 400 |
| Headline 4 | text-2xl | 24px | 32px | 600 |
| Headline 4 | text-2xl | 24px | 32px | 400 |
| Headline 5 | text-xl | 20px | 28px | 600 |
| Headline 5 | text-xl | 20px | 28px | 400 |
| Headline 6 | text-lg | 18px | 26px | 600 |
| Headline 6 | text-lg | 18px | 26px | 400 |
| P1 Bold | text-base | 16px | 24px | 600 |
| P1 | text-base | 16px | 24px | 400 |
| P2 Bold | text-sm | 14px | 20px | 600 |
| P2 | text-sm | 14px | 20px | 400 |
| P3 Bold | text-xs | 12px | 16px | 600 |
| P3 | text-xs | 12px | 16px | 400 |
| Button Bold | text-base | 16px | 24px | 600 |
| Button Regular | text-base | 16px | 24px | 400 |
| Text Link | link | 16px | 24px | 400 |
| Text Link Hover | link-hover | 16px | 24px | 400 |
Forms
Text inputs
Invalid email address
Text area
Dropdown
Radio button
Checkboxes
Toggle
Modules
Notifications
Slideout
Heading 1
Heading 2
Modal dialog
Additionals
Pagination
Breadcrumbs
- Home
- [CD] Styleguide
Accordion
Here is space for body copy that answers the question above. There is no character limit and can go as long as needed.
Here is more space for body copy, underneath a sub-dividing line within each section.
Here is space for body copy that answers the question above. There is no character limit and can go as long as needed.
Here is more space for body copy, underneath a sub-dividing line within each section.
Here is space for body copy that answers the question above. There is no character limit and can go as long as needed.
Here is more space for body copy, underneath a sub-dividing line within each section.
Badge & label
| Display | Token |
|---|---|
| Badge | badge |
| Badge 2 | badge-2 |
| Badge 3 | badge-3 |
Vertical Scroll
Preact modules
Carousel
Carousel Swiper
FullwidthIcons
| Code | Preview |
|---|---|
| icon-menu | |
| icon-shopping-bag | |
| icon-close | |
| icon-success | |
| icon-search | |
| icon-twitter | |
| icon-facebook | |
| icon-instagram | |
| icon-pinterest | |
| icon-linked | |
| icon-logo-facebook | |
| icon-logo-linked | |
| icon-chevron-up | |
| icon-chevron-right | |
| icon-chevron-left | |
| icon-chevron-down | |
| icon-arrow-right | |
| icon-arrow-left |
| Code | Preview |
|---|---|
| icon-filter | |
| icon-person | |
| icon-help | |
| icon-error-circle | |
| icon-info-circle | |
| icon-success-circle | |
| icon-phone | |
| icon-noti-error | |
| icon-sort | |
| icon-tag | |
| icon-calendar | |
| icon-circle-plus | |
| icon-trash | |
| icon-plus | |
| icon-minus | |
| icon-email | |
| icon-faild |
| Code | Preview |
|---|---|
| icon-eye | |
| icon-heart | |
| icon-store | |
| icon-blog | |
| icon-go-to | |
| icon-chat | |
| icon-logout | |
| icon-share-social | |
| icon-visa | |
| icon-mastercard | |
| icon-paypal | |
| icon-googlepay | |
| icon-applepay | |
| icon-klarna | |
| icon-zip | |
| icon-afterpay |
Explore Porsche lifestyle icons
