For designers, developers and AI helpers (handoff page 20)

The Lab's design system

The building blocks of the holographic look (V3). Everything below is drawn live by the real stylesheet, so this page always shows what the Lab really uses.

Colors

Night#06122c · page background

Hologram blue#47c8ff · --v3-a

Nebula violet#9b6bff · --v3-b

Gold#ffc84a · --v3-gold · main actions

Mint#5dffb1 · success

Alarm red#ff6b81 · danger, “I need help”

Ink#f2f8ff · --v3-ink · text

Glass--v3-glass-1 → --v3-glass-2

Each age world tints --v3-a and --v3-b (Discover pink, Adventure blue, Creator teal, Future slate). Contrast: body text is at least 4.5:1 on glass.

Type

Poppins 800 — page titles

Poppins 700 — section titles

Body 16 px, line height 1.55, never smaller than 14 px on phones.

Buttons

Primary (gold)

Touch targets are at least 44 × 44 px (tested on 33 public pages). Buttons float on hover and focus, with a visible focus ring for keyboards.

<button type="button" class="kbtn gold">🛍️ Open the Store</button>   (child pages)
<button type="submit" class="primary">Save lesson</button>           (grown-up tools)

Cards, chips and worlds

⭐ 30 starsLevel 2🛟 Help & check-in

Cards are glass panels with a holographic rim (radius 16–22 px). Hubs are 3D worlds: a picture world for the age group, with every place as a floating object that is also a real link.

HubWorld.page({ key, title, objects: [{ key, label, model, href }], below })   // a hub as a 3D world
kidPage({ title, emoji, color, back, sub }, node)                                // a child page
Pages.register('id', { title, kid: true, nav: 'learn', render() { … } })        // add a page

Screen shapes and motion

Layouts follow the screen: wide (computers, sideways phones), tall (phones, upright tablets) and square; sideways phones get a compact header.
Reduced motion stops floating, glows and live backgrounds. Reduced transparency makes glass solid. Increased contrast strengthens edges.
Watches get a one-column, round-screen layout with huge buttons (/watch/).
Older looks stay available: Classic V1 (/classic.html), Futuristic V2 (?gfx=classic), Holographic V3 (default).

Rules for anyone adding a page

A concept picture is not a feature: every button must call a real route that is tested.
Anything that could share something about a child starts off and needs a grown-up.
Children's words pass the safety screen on the server; grown-ups' words to children pass the adult screen.
Keep the original Teddy and white-bear artwork; do not invent replacements.
Add the page to Teddy's guide (docs/TEDDY_ASSISTANT.md) so Teddy can explain it and show the way.