Playground

Overview

Playground is a comprehensive child care management platform that serves 300,000+ providers across the United States. The design system embodies a "Professional Clarity" aesthetic—combining the trustworthiness of enterprise software with the warmth and approachability needed for the education sector. The visual language prioritizes legibility, operational efficiency, and emotional reassurance through a clean white canvas, vibrant blue primary actions, and carefully calibrated typography hierarchy. The brand voice is direct, competent, and human-centered: never condescending, always solution-focused. Example: "Your billing runs on time. Your staff knows what's happening. Your families stay connected."

Colors

The color system is anchored by a vibrant primary blue (#066dfe) used exclusively for interactive elements—buttons, links, and focus states—creating a clear visual distinction between actionable and informational content. The surface stack ranges from pure white (#ffffff) at the brightest level to warm off-whites (#fbfaf9, #f2f4f6) for subtle container differentiation, with neutral grays (#6a7074, #898d91) reserved for secondary text and disabled states. A warm orange tertiary (#ffa500) provides accent support for highlights and badges, while the error red (#d32f2f) is reserved for destructive actions and validation failures. All text on white surfaces uses a near-black (#1c1917) for maximum contrast and readability; inverse surfaces (#1f282e) support dark-mode contexts with high-contrast

Typography

The type system uses CircularXX TT as the primary typeface family, chosen for its geometric clarity and professional warmth. Display (68px, 900 weight) anchors hero sections with commanding presence; Headline-lg (40px, 700 weight) and Headline-md (28px, 700 weight) structure content hierarchy with consistent -0.01em to -0.02em letter-spacing to tighten large text. Body text (16–18px, 400–450 weight) maintains 24–28px line-height for comfortable reading on screen. All interactive labels use Medium weight (500) at 14px with 0.01em letter-spacing to signal interactivity. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) on small labels (12px) when placed over busy backgrounds to ensure legibility. Avoid mixing typeface families within a single component; CircularXX TT variants (Book, Regular,

Layout

The layout system uses a 12-column grid with a 1280px max-width container, maintaining 24px horizontal gutters on desktop and 16px on tablet. White-space is generous: section separation uses 40px (lg spacing) vertically, while component internal padding uses 24px (md spacing) for breathing room. Cards and containers nest at 12px (sm spacing) intervals for visual hierarchy. The page rhythm follows a 8px baseline grid, ensuring all spacing values are multiples of 8px (4px, 12px, 24px, 40px, 64px). Avoid cramped layouts; the brand philosophy values clarity over density. Container backgrounds should remain white (#ffffff) or off-white (#f7f9fb) to maintain the clean, professional aesthetic. Use surface-container tokens for subtle visual separation without introducing visual noise.

Elevation & Depth

Depth is conveyed through subtle shadows and border treatments rather than dramatic layering. Level 1 (Base/Cards): 0 1px 2px rgba(0, 0, 0, 0.06) with a 1px border in surface-container-high (#d2d5d7). Level 2 (Elevated Cards/Modals): 0 4px 12px rgba(0, 0, 0, 0.08) with the same border. Level 3 (Floating Elements/Popovers): 0 10px 20px rgba(0, 0, 0, 0.13) with a 1px border. Primary buttons receive a subtle blue shadow (0 2px 8px rgba(6, 109, 254, 0.2)) to reinforce interactivity. Hover states intensify shadows by 50% (e.g., 0 4px 12px rgba(6, 109, 254, 0.3)) without changing background color. A

Shapes

The shape system follows a "Soft-Technical" philosophy: rounded corners are present but restrained, signaling approachability without sacrificing professional rigor. Buttons and inputs use 8px (DEFAULT) or 16px (lg) border-radius; cards use 12px (md) for subtle definition. Large containers and modals use 20px (xl) to create breathing room. The full (9999px) radius is reserved exclusively for badges and pill-shaped elements. Never use sharp corners (0px) on interactive elements; always apply at least 4px (sm) radius. The 12px radius on cards creates visual distinction from the white background

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (#066dfe background, white text, 44px height, 12px 24px padding, 16px border-radius) use label-md typography and include a subtle blue shadow (0 2px 8px rgba(6, 109, 254, 0.2)). On hover, the background shifts to #3079ff and shadow intensifies to 0 4px 12px rgba(6, 109, 254, 0.3). Active state uses #0552c4. Secondary buttons are transparent with a 1px primary-blue border and inherit the same hover/active behavior. All button transitions use 200ms cubic-bezier(0.2, 0, 0.38, 0.9) for snappy feedback.

Containers & Surfaces Cards are the fundamental container unit: white background (#ffffff), 12px border-radius, 24px padding, 1px border in #d2d5d7, and 0 1px 2px rgba(0, 0, 0, 0.06) shadow. On hover, the shado

Do's and Don'ts

**Do**

• Do use #066dfe primary blue exclusively on interactive elements (buttons, links, active states, focus rings) to create clear visual affordance.
• Do maintain 24px gutters and 40px section spacing to preserve the clean, breathing aesthetic that defines the brand.
• Do apply 12px border-radius on cards and 16px on buttons to signal approachability without sacrificing professionalism.
• Do use CircularXX TT typeface family exclusively; avoid mixing in system fonts or serif faces.
• Do apply subtle shadows (0 1px 2px rgba(0, 0, 0, 0.06)) on cards and 0 10px 20px rgba(0, 0, 0, 0.13) on modals for depth without drama.
• Do use the full surface-container stack (#fbfaf9 through #bbbdbf) for visual hierarchy; never introduce new grays outside this range.

**Don't**

• Don't use primary blue (#066dfe) on non-interactive elements like backgrounds, text, or decorative frames—reserve it exclusively for CTAs and active states.
• Don't apply border-radius greater than 20px on standard components; the brand is professional, not playful.
• Don't mix typeface families within a single component; CircularXX TT variants provide all necessary weights (400, 500, 700, 900).
• Don't use drop-shadows on text; text-shadow is acceptable only for contrast enhancement (0 1px 2px rgba(0, 0, 0, 0.08)) on busy backgrounds.
• Don't introduce new colors outside the defined palette; the system is intentionally constrained to ensure visual coherence.
• Don't use sharp corners (0px border-radius) on any interactive element; minimum 4px (sm) radius on all buttons, inputs, and cards.