# Design System Strategy: Radiant Play ## 1. Overview & Creative North Star This design system is built for a generation of digital natives in Latin America, moving beyond the "flat and sterile" educational templates of the past. Our Creative North Star is **"The Vibrant Canvas."** Unlike traditional LMS platforms that feel like digital filing cabinets, this system treats the UI as a series of tactile, layered invitations to explore. We leverage the semantic, lightweight foundation of Pico.css but transcend its minimalist roots through intentional asymmetry, "squishy" tactile depth, and a color palette that reflects the warmth of Latin American murals and textiles. We reject the rigid grid in favor of a rhythmic layout where content feels like it's floating on a sun-drenched surface. --- ## 2. Colors: The Palette of Life The color strategy is rooted in the high-contrast vibrancy of the Latin American landscape. We use color not just for decoration, but as a primary functional tool for navigation and emotional engagement. ### The "No-Line" Rule To achieve a premium, editorial feel, **this system prohibits the use of 1px solid borders for sectioning.** Boundaries must be defined through: * **Background Color Shifts:** Use `surface-container-low` for page backgrounds and `surface-container-lowest` for primary content areas. * **Tonal Transitions:** Defining an area by its container color rather than a stroke. ### Surface Hierarchy & Nesting Treat the UI as a physical stack of colorful cards. - **Base Layer:** `surface` (#f8f6f6) - **Content Zones:** `surface-container` (#e9e8e7) - **Interactive Cards:** `surface-container-lowest` (#ffffff) for maximum "lift." ### The "Glass & Gradient" Rule To escape the "default" look, use gradients and glassmorphism: * **Signatures:** Use a subtle gradient from `primary` (#006289) to `primary_container` (#2dbcfe) for main hero actions. * **Floating Elements:** Apply `backdrop-blur: 12px` with a semi-transparent `surface_container_lowest` (80% opacity) for navigation bars or floating progress indicators. This creates a "frosted glass" effect that feels expensive and modern. --- ## 3. Typography: Rounded Authority We utilize **Plus Jakarta Sans** across the entire scale. Its geometric but soft, rounded terminals provide a friendly, "child-safe" aesthetic without sacrificing the professional authority of a virtual academy. * **Display Scale (display-lg/md):** Use for "Big Wins" and section headers. The large `3.5rem` size creates a high-end editorial rhythm. * **Headline/Title:** Used for course names and card titles. The `headline-lg` (`2rem`) is our workhorse for engagement. * **Body Scale:** `body-lg` (`1rem`) is the minimum for child-facing instructional text to ensure legibility on smaller tablets. **Editorial Tip:** Use "Optical Weighting." Headlines should have tighter letter-spacing (-0.02em) to feel cohesive, while `body-sm` labels benefit from slightly increased tracking (+0.03em) for clarity. --- ## 4. Elevation & Depth: Tonal Layering Depth in this system is achieved through light and color, never through heavy lines. * **The Layering Principle:** Instead of shadows, nest containers. A `surface-container-highest` button inside a `surface-container-low` header provides a tactile "push" without visual clutter. * **Ambient Shadows:** For floating elements like modals or active cards, use a "Latin Sun" shadow. Instead of a grey shadow, use `on-surface` at 6% opacity with a large `40px` blur and `10px` vertical offset. This mimics natural, soft sunlight. * **The "Ghost Border" Fallback:** If a divider is mandatory for accessibility, use `outline_variant` at **15% opacity**. It should be felt, not seen. --- ## 5. Components ### Buttons (Tactile Triggers) Buttons must feel "squishy" and interactive. - **Primary:** Background: `primary`; Color: `on_primary`; Border-radius: `full`. Add a `4px` bottom-inset shadow to simulate a physical button. - **Secondary:** Background: `secondary_container`; Color: `on_secondary_container`. Use for "Next" or "Explore" actions. - **Large State:** For children, buttons should use `xl` padding (1.5rem 3rem) to ensure a high hit-rate on touch devices. ### Cards (Content Islands) - **Structure:** Use `surface-container-lowest` backgrounds with `lg` (2rem) rounded corners. - **Spacing:** No internal dividers. Use `32px` (2rem) of internal padding to let content breathe. - **Interaction:** On hover, a card should shift from `surface-container-lowest` to `surface-bright` with a soft ambient shadow. ### Progress Indicators - **Style:** Use the `tertiary_container` (#91f78e) for the background track and `tertiary` (#006b1b) for the fill. - **Visual Flourish:** The tip of the progress bar should have a small "sparkle" or glassmorphism highlight to make the progress feel rewarding. ### Input Fields - **Design:** Use `surface-variant` backgrounds with a `full` rounded corner. - **Active State:** The border should never be black; use `primary` at 2px with a soft glow using the `primary_fixed_dim` color. --- ## 6. Do's and Don'ts ### Do: * **DO** use intentional asymmetry. Place a large `tertiary` (green) circle or organic shape behind a card to break the "grid" feel. * **DO** prioritize "Tap-ability." Ensure every interactive element is at least 48px tall. * **DO** use `surface-container-low` for large background sections to reduce eye strain compared to pure white. ### Don't: * **DON'T** use 1px black or grey borders. This instantly "cheapens" the high-end feel of the academy. * **DON'T** use sharp corners. Every corner must use at least the `md` (1.5rem) roundedness token to maintain the "Radiant Play" persona. * **DON'T** crowd the screen. If in doubt, add more whitespace using the `xl` spacing scale. Space is the ultimate premium feature. --- ## 7. Custom CSS Implementation (Pico.css Extension)