Skip to main content

Introduction

Play+ Theming: A Guide to Customization​

Philosophy: A System That Breathes Your Brand​

At the heart of Play+ is a belief we call Metamorphism—the idea that a design system should not impose a fixed aesthetic, but offer a strong, flexible foundation ready to adapt to your brand’s unique essence. Theming in Play+ is not an afterthought—it’s a first-class capability.

Our theming architecture is purpose-built to provide consistency, accessibility, and expressive freedom. With minimal effort, you can infuse your own color system, typography, motion, and spatial rhythm, while still inheriting the full design coherence of Play+.

This guide introduces the core ideas that make our theming model robust, brandable, and future-proof.

The Foundation of Customization​

Every component and interaction in Play+ is grounded in a unified layer of intent—our Pillars and Element Signature. These are the soul of Play+, shaping not just how things look, but how they feel, flow, and connect across experiences.

➡️ [Explore the Pillars] ➡️ [Read the Element Signature Manifesto]

To see how theming brings these ideas to life, watch this short demo:

🎬 [Built with Play+: See Theming in Action]

The Engine: Design Tokens​

Think of design tokens as the central nervous system of our design language. They are named variables that store all the foundational visual design attributes.

Instead of hard-coding a value like #E91E63, we use a semantic token like $color-brand-primary. This abstraction makes our system both powerful and flexible, enabling broad theme changes with minimal surface-level edits.

Tokens are:

  • Variables for Design: They abstract raw values into readable, reusable units like $color-brand-primary or $font-heading-xl.
  • The Single Source of Truth: All components resolve their visual style through tokens.
  • The Key to Customization: Change a single token value to update your brand’s identity across the entire experience.

Our theming model is built on tiered tokens: global, semantic, and component-level. This structure ensures maximum flexibility without compromising design integrity. (More on this in the next guide.)

Theming in Practice​

Your theme is defined in a theme.map.json file located in a brand-specific folder within /styles/themes/. To apply your theme, you load it dynamically in your application, eliminating the need for SCSS overrides.

src/
└── styles/
    └── themes/
        ├── default/
        │   └── theme.map.json
        └── acme/
            └── theme.map.json

Your app should import Play+ base styles first, then your theme overrides. This ensures your custom theme inherits everything Play+ offers—while reflecting your distinct identity.

Summary​

The Play+ theming architecture is built to scale, adapt, and glow with your brand. It combines solid foundations with expressive flexibility, empowering you to build deeply customized, yet fully cohesive interfaces.

By embracing our Core Principles, Material Signature, and Design Token system, you can deliver experiences that are not just usable and accessible—but unmistakably, recognizably yours.