Foundations: Colors
Philosophy & Purpose
In the Play+ ecosystem, color is a primary method of communication. It is engineered to be intuitive and accessible while creating a distinct and engaging brand experience. This system is designed to provide clarity, guide user attention, and build a consistent visual language across all platforms.
Core Color Principles
Our approach is guided by four principles to ensure consistency, usability, and expressive brand articulation.
[Illustration needed: Color Principal Matrix]
| Principle | Design Guideline | Developer Implementation |
|---|---|---|
| Systematic | Use a token-based system for all colors. Avoid raw hex codes. | Reference only tokens (e.g., $color-background-surface) to enable system-wide theme changes. |
| Accessible | All text/UI color combinations must meet WCAG 2.2 AA contrast standards by default. | Use pre-validated token pairs. Automate checks in CI/CD pipelines using tools like Axe. |
| Intentional | Apply color purposefully to guide the user and reinforce hierarchy. | Link functional tokens to logic/state (e.g., focus, error, success). |
| Expressive | Use brand colors strategically to inject personality and create memorability. | Apply accents/gradients to impactful moments like hero areas or success messages. |
The Core Palette
The selection of our core palette was informed by a brand strategy session focused on amplifying our Engaging and Distinct pillars. The result was the "Kinetic Flow" direction—a concept built around vibrancy and momentum. This led to the adoption of a more expressive palette that supports a dynamic and modern user experience while being anchored by a robust, accessible foundation.
Our palette is structured into functional roles. All colors are optimized for light and dark modes.
Primary Palette
[Illustration needed: Moodboard]
| Palette | Color | Description | Token | Light | Dark |
|---|---|---|---|---|---|
| Primary | Pink | Used for key actions, links, highlights, and active states | $color-primary-default | #E91E63 | #ED4B82 |
| Secondary | Purple | Used for secondary actions, illustrations, and accents | $color-secondary-default | #9C27B0 | #BD6ECA |
| Tertiary | Deep Purple | Used for layout variety and tertiary-level UI | $color-tertiary-default | #673AB7 | #8561C5 |
Functional Colors
For conveying statuses like success, warning, and error. Must be used with icons or text.
| Use Case | Token | Light | Dark |
|---|---|---|---|
| Success | $color-feedback-success | #4CAF50 | #81C784 |
| Error | $color-feedback-error | #F44336 | #E57373 |
| Warning | $color-feedback-warning | #FF9800 | #FFB74D |
| Info | $color-feedback-info | #2196F3 | #64B5F6 |
Neutrals
Base colors for background, surface, borders, and text.
| Role | Token | Light | Dark |
|---|---|---|---|
| Primary Text | $color-text-primary | #6B7280 | #D1D3D8 |
| Surface | $color-background-surface | #FFFFFF | #2D3036 |
| Border | $color-border-default | #BBBEC5 | #4C515B |
Color Scales for Systematic Theming
To support consistent theming across light and dark modes, each core color follows a 0–900 tonal scale. These scales allow us to generate meaningful variants for hover, disabled, background, and text states.
[Illustration needed: Color Scale Mapping in Light vs Dark Modes]
| Shade | Example (Primary Pink) | Use in Light Mode | Use in Dark Mode |
|---|---|---|---|
| 50 | #FCE4EC | Highlight/background | Not used (too light) |
| 100 | #F8BBD0 | Subtle backgrounds | Disabled states |
| 300 | #F06292 | Hover state | Primary base (dark mode) |
| 500 | #E91E63 | Primary base | Accent or focus state |
| 700 | #C2185B | Active/dark emphasis | Primary base (dark mode) |
| 900 | #880E4F | Bold elements | Key interactive states |
Usage Guidelines
Usage Tip: In dark mode, reverse the tonal mapping: values like 700 or 900 become the new base, while lighter tones are used for disabled or background elements.
Programmatic Shortcut: Designers and developers can use HSL/HSB transformations to generate dark variants:
- Reduce lightness by 20–40%
- Slightly increase saturation
- Keep hue relatively stable to preserve brand identity
Recommended Tools (Coming Soon)
Primary Palette Persona Variations
To demonstrate our Metamorphic soul, we support theme variations aligned to different user personas.
[Illustration needed: Persona–Palette Comparison Grid]
Persona 1: The Creator (Experience Studio)
Bold, expressive, high impact
| Role | Token | Light | Dark |
|---|---|---|---|
| Base | $color-primary-default | #D9006C | #FF3399 |
| Hover | $color-primary-hover | #B8005C | #FF66B2 |
| Active | $color-primary-active | #99004C | #FF8BC2 |
Persona 2: The Analyst (Product Studio)
Professional, precise, trustworthy
| Role | Token | Light | Dark |
|---|---|---|---|
| Base | $color-primary-default | #007AFF | #339DFF |
| Hover | $color-primary-hover | #0062CC | #66B8FF |
| Active | $color-primary-active | #004C99 | #8CCBFF |
Persona 3: The Minimalist (AVA Console)
Calm, focused, understated
| Role | Token | Light | Dark |
|---|---|---|---|
| Base | $color-primary-default | #228B22 | #3CB371 |
| Hover | $color-primary-hover | #1A691A | #66C28A |
| Active | $color-primary-active | #124712 | #8FD1A8 |
Gradient Usage: The Science of Smooth Color
Gradients represent our brand's Fluid soul. Well-crafted gradients feel seamless, natural, and immersive.
[Illustration needed: Good vs Poor Gradient Examples]
Best Practices
- Luminance Harmony: Match perceived brightness to avoid jarring transitions
- Hue Rotation: Prefer analogous colors with less than 90° hue difference
- Saturation Control: Avoid abrupt saturation shifts
- Light Mode: Use soft gradients toward near-neutrals
- Dark Mode: Use saturated gradients with harmonious hue pairs
- Text Gradients: Reserved for large, decorative headlines only—never for UI text
Application & Implementation
Theming & the 'Metamorphic' Soul
Override global tokens to rebrand Play+:
$color-primary-default: #007aff;
$color-secondary-default: #ffb900;
State Changes
| State | Light Mode | Dark Mode |
|---|---|---|
| Hover | 10% darker | 10% lighter |
| Active | 20% darker | 20% lighter |
| Disabled | Neutral color @ 40% opacity | Same |
Accessibility
- Text Contrast: 4.5:1 (normal), 3:1 (large text)
- UI Elements: 3:1 against background
- No Color-Only Cues: Supplement with icons or text
Guidance for Customization
- Pick a Primary Color: Ensure 4.5:1 contrast with
$color-text-primary - Choose a Complementary Secondary: Use analogous for harmony or triadic for energy
- Validate Full Palette: Run contrast tests with token pairs
Guardrails
[Illustration needed: Color Dos and Don'ts]
✅ Do
- Use token references exclusively
- Check contrast for all UI/text
- Use color semantically
- Supplement color with icons or text
❌ Don't
- Use hex codes directly
- Use color alone for meaning
- Overuse expressive colors
- Bypass theme logic
Color in Motion
Motion paired with color can guide, reassure, or delight. Use subtle color transitions to communicate system state changes or reinforce engagement.
[Illustration needed: Color + Motion Frames]
| Motion Use | Example |
|---|---|
| On Hover | Fade-in with slight tint change |
| On Load | Accent color streak or shimmer |
| On Success | Color pulse combined with checkmark |
Final Notes & Next Steps
Color is more than aesthetic—it's semantic, strategic, and sensorial. In the Play+ system, we use color not only to create clarity and cohesion but also to evoke emotion and drive action. When applied with precision and intent, color becomes a silent interface—guiding, informing, delighting.
This guide is not just a rulebook—it's a living contract between your brand and your users. Use it to create immersive, inclusive, and unmistakably Play+ experiences.
[Final illustration needed: "The Journey of Color in Play+" – from token to theme]