Base CSS
Play+ Base Tokens: The Foundational Guide
Introduction
In Play+, design begins with structure. This document outlines the Base Tokens — the most foundational values in our design system. These tokens define the visual DNA of Play+, enabling us to create consistent, flexible, and accessible experiences across products, platforms, and brands.
All base tokens reside in styles/core/_base.css and contain:
- Global Tokens: The raw, context-agnostic values — the ingredients.
The application of context — how these tokens map to brand, mode, or component use — happens separately, through default theme maps and derivation logic.
This guide serves as a complete reference for what’s available at the foundational level.
1. Global Tokens (The Raw Palette)
These tokens are consistent, platform-agnostic values that serve as the core primitives of the system.
🎨 Colors
| Token Name | Default Value | Description |
|---|---|---|
--global-color-pink-500 | #e91e63 | Default brand primary color |
--global-color-pink-700 | #c2185b | Darker variant for hover states |
--global-color-purple-500 | #9c27b0 | Default secondary brand color |
--global-color-deep-purple-500 | #673ab7 | Extended theming option |
--global-color-violet-500 | #7c3aed | Extended theming option |
--global-color-royal-blue-500 | #2563eb | Extended theming option |
--global-color-cyan-500 | #03bdd4 | Extended theming option |
--global-color-spearmint-500 | #43bd90 | Extended theming option |
--global-color-rose-500 | #fa709a | Extended theming option |
--global-color-white | #ffffff | Pure white |
--global-color-black | #000000 | Pure black |
--global-color-gray-50 | #f5f5f5 | Lightest gray (backgrounds) |
--global-color-gray-100 | #eeeeee | |
--global-color-gray-200 | #dddddd | |
--global-color-gray-300 | #bbbec5 | Default border color |
--global-color-gray-400 | #a1a1a1 | Placeholder text color |
--global-color-gray-700 | #6b7280 | Primary text color |
--global-color-gray-900 | #111827 | Dark mode background |
--global-color-green-500 | #4caf50 | Success color |
--global-color-red-500 | #f44336 | Error color |
--global-color-yellow-500 | #ff9800 | Warning color |
--global-color-blue-info-500 | #2196f3 | Informational color |
Note: These global colors are only defined for the base theme. Dark and HCM variants are derived dynamically — no duplication is needed here.
🔠 Typography
Font Families
--global-font-family-display: "PP Neue Machina", sans-serif;
--global-font-family-heading: "Mulish", sans-serif;
--global-font-family-body: "Inter", sans-serif;
Font Weights
--global-font-weight-regular: 400;
--global-font-weight-medium: 500;
--global-font-weight-semibold: 600;
--global-font-weight-bold: 700;
Font Sizes
--global-font-size-xs: 0.75rem;
--global-font-size-sm: 0.875rem;
--global-font-size-md: 1rem;
--global-font-size-lg: 1.25rem;
--global-font-size-xl: 1.5rem;
--global-font-size-xxl: 2rem;
--global-font-size-xxxl: 3rem;
Line Heights
--global-line-height-tight: 1.2;
--global-line-height-default: 1.5;
--global-line-height-loose: 1.7;
📏 Spacing
Spacing Scale
--global-spacing-1: 0.25rem;
--global-spacing-2: 0.5rem;
--global-spacing-3: 0.75rem;
--global-spacing-4: 1rem;
--global-spacing-5: 1.5rem;
--global-spacing-6: 2rem;
--global-spacing-7: 3rem;
--global-spacing-8: 4rem;
🟦 Radius
--global-radius-sm: 8px; // e.g. tags
--global-radius-md: 12px; // e.g. buttons
--global-radius-lg: 24px; // e.g. cards
--global-radius-pill: 9999px; // full pill
--global-radius-circle: 50%; // perfect circles
Notes
- These tokens are single-source values.
- They are not expected to change across brands, themes, or modes.
- All contextual mapping (brand, dark, high contrast) occurs in
theme.map.jsonor its derived runtime styles.
To define or override context-aware styles, refer to the companion document: → [Play+ Default Theme: The Mapping Guide]