About the client

Card Kingdom is a leading online retailer for Magic: The Gathering cards, decks, and collectibles. Founded in Seattle in 1999, the family-owned company is known for its customer service, fast shipping, and strong connection to the trading card community.

Challenge

Card Kingdom needed a consistent UI framework across its web platform. Different areas of the site used inconsistent UI patterns and components, creating friction between design and development and making it harder to maintain a cohesive user experience. The team also needed a scalable foundation that could support theming, accessibility, and faster component delivery and documentation workflows.

Solution

XCentium created a centralized design system with Figma as the single source of truth for design tokens, shared UI patterns, and component specifications.

The team implemented scalable design tokens using CSS custom properties and built AI-assisted component workflows with React.js, Next.js, Tailwind CSS, and shadcn/ui.

The system connected Figma, frontend development, and Storybook documentation through MCP integration. This helped teams generate components, map tokens, create themes, and document states and variants more efficiently.

XCentium also structured the system to support Card Kingdom’s composable frontend and Contentstack workflows.

Outcomes

The completed design system helped Card Kingdom streamline design-to-development workflows and reduce manual effort for component and Storybook creation.

It also improved consistency between Figma designs and production components while establishing scalable governance and reusable frontend standards. By implementing semantic design tokens and theme-ready components, the system also gave Card Kingdom the flexibility to quickly launch promotional experiences and branded site themes for seasonal campaigns, sales events, and new product releases.

Technology

• React.js / Next.js
• Tailwind CSS
• shadcn/ui
• Figma
• Storybook
• MCP Integration
• Contentstack