Porsche Digital Croatia
Managed design system work across component libraries, iconography, documentation, and implementation alignment for Porsche digital products. Focused on reusable Figma components, engineering handoff, accessibility, responsive behavior, and consistent adoption across product teams.
Design system management and iconography development
Public v4 documentation surface
The public v4 documentation gives useful context for the scale of the system: an entry point for designers and developers, a component inventory, and individual configurator pages that combine behavior, properties, accessibility notes, and implementation examples.
Multi Select as a system component
Multi Select is a good example of the kind of component that needs both product behavior and implementation discipline. The component has a visible label and description, searchable options, selected values, framework snippets, and a canonical documentation route for implementation details.
<p-multi-select name="name" label="Some Label" description="Some description">
<p-multi-select-option value="a">Option A</p-multi-select-option>
<p-multi-select-option value="b">Option B</p-multi-select-option>
<p-multi-select-option value="c">Option C</p-multi-select-option>
<p-multi-select-option value="d">Option D</p-multi-select-option>
</p-multi-select>System work across product surfaces
At Porsche Digital Croatia, my work focused on design system management for Porsche digital products. I worked across component libraries, documentation, implementation alignment, and adoption, with the goal of keeping design and development consistent across websites, applications, and internal product surfaces.
A single operating layer for design, implementation, and adoption across product surfaces.
A shared product, not a static UI kit
The design system was managed as a shared product rather than a static UI kit. My day to day work included reviewing component usage, maintaining reusable Figma libraries, supporting documentation, and helping product teams apply the system without creating unnecessary local variations.
Component alignment across design and code
A large part of the work was keeping design components aligned with implementation. The component libraries had to remain reusable, accessible, responsive, and consistent with Porsche's visual identity. This required close coordination between Figma and code repositories used by engineering teams working in React, Kotlin, and Swift.
Theme-aware icon library development
Iconography was part of the same system work. The goal was to keep icons consistent across categories, states, themes, and product contexts. The light and dark mode icon mockups show the kind of library structure that supported this work: grouped icon families, theme validation, and reusable categories for navigation, system actions, communication, media, calendars, warnings, and user flows.
Reducing interpretation between teams
The value of this work was in reducing interpretation between teams. A component or icon needed to be clear in design, reliable in implementation, and understandable through documentation. Accessibility, responsive behavior, visual consistency, naming, and release communication were part of the same quality bar.
Interaction states, contrast, keyboard behavior, and readable structure.
Components and iconography checked across product breakpoints.
Light and dark mode usage reviewed as part of library maintenance.
Clear component and icon categories to reduce interpretation.
Usage rules made available where teams needed implementation guidance.
Figma and code repositories kept close enough for reliable handoff.
Current public design system reference
The current public Porsche Design System shows the later evolution of this type of work through Figma libraries, Web Components, framework packages, tokens, patterns, templates, and accessibility guidance. I use it here as a reference for the system surface and documentation model, without implying ownership of every current v4 artifact.