Wayground

Overview

Wayground is an AI-powered supplemental curriculum platform that transforms K12 education through vibrant, energetic design. The brand embodies 'Playful Maximalism'—a design philosophy that celebrates bold color, expressive typography, and joyful interaction while maintaining pedagogical clarity. The interface celebrates the energy of teaching and learning, using a deep plum foundation (#3b142a) as a sophisticated canvas for vivid accent colors (magenta #ff319f, peach #ffc48a, lavender #c6b4e5) that evoke creativity, warmth, and possibility. The visual language is intentionally optimistic: every interaction feels rewarding, every color choice deliberate, every surface carefully layered to guide attention.

Wayground's voice is encouraging, practical, and human-centered. The brand speaks to educators as collaborators and innovators—never patronizing, always respectful of their expertise. Vocabulary emphasizes agency ('Create', 'Discover', 'Differentiate') and outcomes ('Engage every student', 'Track progress'). The tone is warm but professional, energetic but grounded. Example sentence in brand voice: 'Create AI-powered assessments that actually reflect how your students learn.'

Colors

The Wayground color system is built on a 'Vibrant-on-Deep' foundation: a rich, sophisticated plum surface (#3b142a) provides visual stability and premium feel, while a carefully orchestrated palette of accent colors creates energy and guides interaction. Primary (#ff319f, a vivid magenta) is the signature brand accent—used exclusively for primary CTAs ('Sign up'), focus states, and brand-critical interactive elements. This color is never used for passive elements; every instance signals an action or invitation. Secondary (#ffc48a, a warm peach) supports primary as a complementary accent for secondary CTAs ('Get a quote'), badges, and highlights. Tertiary (#a3e5e0, aqua) and supporting colors (lavender #c6b4e5, yellow #eceb75) create a rich, playful palette for data visualization, status in

Typography

Wayground uses DM Sans Variable as its exclusive typeface family—a contemporary, geometric sans-serif that balances warmth with technical precision. The type system spans eight levels from display (81px, 700 weight) down to label-sm (12px, 600 weight), each calibrated for its context. Display is reserved for hero headlines ('What will you teach today?') and uses aggressive negative letter-spacing (-0.03em) to create visual impact and personality. Headline-lg (48px, 700 weight) is used for section titles and major content blocks. Body-md (16px, 400 weight) is the workhorse for interface copy, input labels, and body text, set at 24px line-height for comfortable reading. Label-md (14px, 700 weight) is applied to button text and form labels with 0.02em letter-spacing to add subtle emphasis. Al

Layout

Wayground uses a 12-column fluid grid with a maximum container width of 1440px, allowing the design to breathe on large screens while maintaining focus on medium and small viewports. The page rhythm is built on a semantic spacing scale: lg spacing (40px) separates major sections (hero, feature blocks, testimonials), md spacing (24px) divides subsections and card groups, and sm spacing (12px) creates breathing room within components. The hero section uses full-width background color (#3b142a) with centered content constrained to the container max-width, creating a sense of immersion. Section padding follows a consistent pattern: 64px (xl) vertical padding on desktop, reducing to 40px (lg) on tablet and 24px (md) on mobile. Cards and content blocks use 24px (md) internal padding with 12px (s

Elevation & Depth

Wayground uses a subtle shadow system to create depth without visual heaviness, respecting the brand's premium aesthetic. The elevation system defines three levels: Level 1 (Base, no shadow) for flat surfaces and the page background; Level 2 (Standard, 0 3px 8px rgba(0, 0, 0, 0.15)) for cards, modals, and lifted surfaces; Level 3 (Elevated, 0 3px 10px rgba(0, 0, 0, 0.1)) for hover states and interactive overlays. Shadows use a warm black (rgba(0, 0, 0, 0.15)) rather than pure black to harmonize with the warm color palette. Interactive elements (buttons, inputs) do not use shadows; instead, the

Shapes

Wayground employs 'Soft-Technical' border-radius philosophy: corners are slightly softened (0.25rem to 0.5rem) to feel approachable and modern, never sharp (0px) and never overly rounded (full circles except for badges). Buttons use 0.25rem (4px) radius—subtle enough to feel refined, rounded enough to signal interactivity. Cards and containers use 0.5rem (8px) radius for a more generous, inviting feel. Input fields use 0.25rem (4px) radius to maintain visual consistency with buttons and form controls. Badges and status indicators use full (9999px) radius to create a distinct visual category. T

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use {colors.primary} (#ff319f) background with {colors.on-primary} (white) text, {typography.label-md} (14px, 700 weight), 12px vertical / 24px horizontal padding, and {rounded.DEFAULT} (4px) radius. Hover state shifts background to {colors.primary-container} (#ff76bf) over 150ms (transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1)). Pressed state uses {colors.primary-fixed-dim} (#e3028d) with a 2px downward transform (transform: translateY(2px)) for tactile feedback. Secondary buttons mirror primary but use {colors.secondary-container} (#ffead6) background with {colors.on-secondary} (#3b142a) text. Tertiary (ghost) buttons use transparent background with {colors.primary} text and a 1px solid borde

Do's and Don'ts

**Do**

• Do use {colors.primary} (#ff319f) exclusively for primary CTAs and focus states—every instance should signal an action.
• Do apply {typography.display} (81px, 700 weight) only to hero headlines; never use it for body copy or secondary headings.
• Do maintain {spacing.lg} (40px) between major sections to create visual breathing room and guide user attention.
• Do use {rounded.DEFAULT} (4px) for buttons and inputs to signal interactivity; reserve {rounded.full} (9999px) for badges only.
• Do apply {elevation.md} (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and lifted surfaces; never use pure black shadows.
• Do test all interactive elements at 48px minimum height to ensure accessibility on touch devices.

**Don't**

• Don't use {colors.primary} (#ff319f) for passive elements like borders, dividers, or background fills—reserve it for interactive moments.
• Don't mix typefaces; DM Sans Variable is the exclusive font family across all contexts.
• Don't reduce {spacing.lg} (40px) section separation below {spacing.md} (24px) on any breakpoint; maintain visual hierarchy.
• Don't apply shadows to buttons or interactive elements; use color and transform for feedback instead.
• Don't use pure black (#000000) or pure white (#ffffff) as primary text or background colors; use the carefully calibrated palette instead.
• Don't apply border-radius greater than {rounded.lg} (8px) to cards or containers; the design rejects overly rounded corners as incompatible with the brand.