Building a unified design system.
A system-wide effort to consolidate and modernize GM’s design foundations, creating cohesive yet flexible components across multiple brands and digital products. This case study focuses on one of those components, card.
Challenge
GM’s digital ecosystem spanned multiple brands, each with unique component libraries and inconsistent styling. The challenge was to unify these under a single system — creating modular, scalable, and accessible components that could flex across products and markets.
Results
The new design system established a shared foundation of reusable components and patterns. Consistent structure, accessibility, and responsive behavior improved both design velocity and product cohesion across teams and brands.
Anatomy
The card’s anatomy defines its foundational parts: container, media, content, and actions. This structure keeps the component flexible across use cases while maintaining consistency throughout the system.
Properties & Variants
Component and property architecture was carefully created for scaling, maintainability, and adaptation to GM brand needs.
Layout
Cards can have three different layouts including media-top, media-middle, or text-only.
Interaction
Four interaction variants are available for cards: static, actionable, clickable, and selectable. This property allows for conditional layouts based on interaction and provides conceptual and technical clarity for design, accessibility, and development. Static cards are purely descriptive (non-interactive). Actionable cards are those with nested actions such as a button, action group, or link. Clickable cards entail the whole container being clickable as an un-nested action. Selectable cards can be selected and deselected with an optional checkbox or radio button.
Style
Cards can have three different styles: outline, fill, and none. This allows the component to flex for different brands and applications.
States
Card states are handled by the container and depend on the interaction variant.
Use Cases
Usage examples include vehicle cards in product listing pages, product features and brand news, special financing offers, and more.
Accessibility & Responsiveness
An accessibility team reviewed all components in collaboration with design. These reviews focused on ensuring sufficient color contrast for elements (text and graphical elements), deciding which contents are verbalized when using a screen reader, focus states for keyboard navigation, touch targets for actionable elements, responsive behavior for all breakpoints, and documenting usage do's and don'ts.
Keyboard Navigation
The entire card is focused for clickable interaction variants. Actionable cards with nested interactive elements apply focus to the nested elements exclusively.
Breakpoints
Card sets are configured for five system breakpoints: max, x-large, large, medium, and small.
Grid Alignment
Card sets use margin and gutter tokens to ensure they always align to the system grid.
