# Schoolyard Pop - DESIGN.md
> Trustworthy play for education and family-facing brands.

A Standout direction system. Drop this file into your AI tool's context (Cursor rules, CLAUDE.md, a system prompt) and build every page inside it. One direction per project; consistency is the point.

## Base
- Mode: light
- Feels like: friendly, clear, playful-with-discipline, bright, approachable
- Built for: school, education, kids brand, pediatric, community org, library, tutoring, daycare, pet daycare, dog daycare

## Colors (locked - use ONLY these)
| Role | Hex | Use |
|---|---|---|
| base | `#FFFDF7` | warm white |
| ink | `#27303F` | navy-slate text, softer than black for long reading |
| accent | `#F2A007` | marigold primary actions |
| support | `#3677B4` | sky blue secondary elements |
| wash | `#FFF4DC` | highlight bands and cards |

One accent, used sparingly: CTAs, one highlighted word, active states. Never the purple-blue AI gradient. Body text keeps 4.5:1 contrast against its real background.

## Typography
- Display: **Baloo 2** (700, rounded warmth without being babyish)
- Body: **Nunito Sans**
- Scale: Display clamp(2.25rem, 5vw, 3.5rem); body 1.0625rem/1.7
- Notes: Rounded display + highly readable body. Never use display below 1.5rem. Important notices get a wash highlight, not red text.
- Import: `https://fonts.googleapis.com/css2?family=Baloo+2:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Nunito+Sans:wght@300;400;500;600&display=swap`

Maximum two families. Gradient-filled headline text is banned.

## Layout DNA
- Sticker geometry: one rotated rounded-rect 'sticker' chip per section (marigold or sky) with a fact or date
- Doodle underlines: hand-drawn SVG stroke under ONE key word in the hero only
- Information hierarchy is sacred: parents scan for dates, fees, contacts; surface them in wash callout cards
- Photo circles: community photos crop in circles and rounded blobs, consistent 3-shape system

## The hero
Warm white, left headline in Baloo with marigold doodle underline on the key word, sub in Nunito, marigold CTA + sky text link. Right: collage of two circle-cropped photos + one sticker chip, slightly overlapping, NO more than three elements.

## Imagery
Real community photos, bright natural light, genuine candids. Diverse, joyful, never stocky. Consent-conscious framing (backs of heads fine for kids).

## Components
- **Buttons:** Fully rounded, marigold fill navy text; hover bounces -2px with spring; sky secondary outline; min 48px touch targets, parents are on phones
- **Cards:** Wash fill, 20px radius, navy title, one sticker chip allowed per card row; key-info cards (dates/fees) get a 2px marigold left border
- **Nav:** Warm white bar, navy links, marigold 'Enroll' pill; emergency/contact link always visible

## Motion
- Recipes that fit this direction: fade-rise-stagger, bounce-hover, draw-svg, sticker-pop, char-cascade, stack-cards
- Animate transform and opacity only; honor prefers-reduced-motion; one ambient motion per viewport, maximum.

## Never do (this direction's anti-patterns)
- No Comic Sans energy: playfulness comes from shape and color, not silly fonts
- Maximum two accent colors in any viewport
- No autoplaying carousels for critical info
- Never bury contact details

## Never do (any direction)
- The centered-hero-centered-everything layout. Left-align or split asymmetric.
- The three-equal-cards feature row.
- h-screen heroes (use min-h-[100dvh]).
- Pure #000 backgrounds; off-blacks only.
- Slop copy: Elevate, Unleash, Seamless, Supercharge, Next-Gen, Revolutionize.
- Fake proof: no 99.9%, no John Doe, no invented stats.

---

## This file is the taste. The working parts are live.
DESIGN.md is roughly a tenth of the "Schoolyard Pop" direction. Behind the Standout MCP connect, your agent also gets: finished art-directed section code, interactive set pieces, the WebGL motion layer, the cinematic showpiece tier (scene-led pages with generation prompts), per-business seeding so two sites in one direction never match, and critique_design - a critic that renders your page and scores it before you ship.

Connect in one config entry: https://standoutmcp.io - free trial key, 25 tool calls, no card. Then just tell your agent what you're building.