Align brandguide and design system on color values and define guideline strategy

marcelbertram commented 11 months ago

Scope

Currently we have 3 places for color specs: In the brandguide including hex values that can be used for digital applications, the styles section "Theme" in the storefront and the Figma styles. We should align the values for same context but different touchpoints (e.g. typo, backgrounds for cards, dividers etc. in digital PPT and Website/App) and improve the documentation.

Notes

Brandguide: https://brand.porsche.com/d/nzgQo6gDQ9uQ/en/basics#/colors/specifications
Design System: https://designsystem.porsche.com/v3/styles/theme
Currently development teams use the design system tokens, there is no need to inform about hex values. But the token-context-mapping would be valuable also in the examples section. E.g. contrast-low/medium/high for text
3rd party teams that can not use the technical tokens / styles would also need to have access to the hex values. So forward them in the brandguide or update the design system docu?
Currently meta defined the specs eg gray based on visual consistency with other colors but not checking for requirements of digital (accessibility, combination with other values)

Idea

Link UI colors from basics overview to digital section to clearly separate marketing/print from UI (design system)
Create a new Colors section
Embedded Figma Color overview in Frontify (public library)

Acceptance Criteria

[x] Update UI colors section in brand guide with Figma specs

tnusserVMB commented 8 months ago

x

tnusserVMB commented 7 months ago

note: waiting for cleaned figma library -> then implementation

porsche-design-system / digital-design