Component and pattern work

A sample of ongoing component and pattern work in Pando: a card refresh, responsive tabs shaped by user research, a new pagination component, modal iterations, and a badge redesign that came out of the Pluralsight rebrand.

The card system got a structural refresh. The main work was defining a clearer layout grid and breaking the component into composable sub-components, so designers could assemble cards from the same set of pieces rather than maintaining separate variants for every use case. The sub-component model makes it easier to extend without creating one-off components every time the content changes.

Pando Design System new cards layout
Layout system for the refreshed card component
Pando Design System card sub-components
Card sub-components and composition

The responsive behavior for tabs took real deliberation. A dropdown at smaller viewports was the easy path, but it meant extra code, extra design work, and a pattern swap that would change user expectations between screen sizes. We went with a wrapping approach instead, shifting tabs into a floating button-style layout at small viewports while keeping the original look and feel. Testing confirmed users understood it and could get to the content without any trouble.

Pando Design System responsive tabs in small viewports
Tab behavior in small viewports
Pando Design System responsive tabs
Responsive tabs in the Pando system
Pando Design System responsive tabs specifications
Tab specifications across breakpoints

Pagination was a new component. I built it out with the full range of variants it needs to handle: first page, last page, the middle range, truncated sets. Getting all the states covered up front saves the back-and-forth that happens when edge cases surface during implementation.

Pando Design System pagination variants
Pagination component variants

The modal got several rounds of iteration in the UI-kit, covering internal structure, content configurations, and how it documents in Zeroheight. The Zeroheight specs page for the modal ended up being one of the more thorough component documentation pages in the system.

Pando Design System modal overview
Modal component iterations in the Pando UI-kit
Pando Design System modal Zeroheight documentation
Modal documentation and specs in Zeroheight

The badge pattern needed a rethink when Pluralsight released its rebrand in summer 2025. The old badges used colors that sat too close to the system’s status palette, which created ambiguity about what a badge actually meant. The redesign introduced a clearer classification system and a simplified color set that passes WCAG AA without borrowing from the status colors.

Pando Design System badge classification
Badge classification in the updated Pando system
Pando Design System badge color comparison
Badge color simplification for the rebrand

Each of these took longer to get right than it looks, which is usually the most useful thing to know about component design.