🧊 Brand & design system

The KIDIGLOO system.

Cool, sturdy exterior; warm, safe interior. One parent system that every Quarlabs brand inherits — trustworthy enough for identity & payments, playful enough for kids. Sub-brands like Nook keep the bones and change the skin.

01 — Brand

Logo

The Cosy Igloo: an ice-blue snow-block dome with a warm hearth glowing through the doorway. The mark always keeps its hearth — that warm glow is the heart of the brand.

kidiglooPrimary lockup (horizontal)

kidiglooStacked lockup

Mark only

kidiglooWordmark

kidiglooOn night

Reduces to 16px

✅ Do

Keep clear-space of one dome-width around the mark. Use on snow, frost-50, or night. Keep the hearth warm.

🚫 Don't

Recolour the hearth cold, stretch, rotate, add shadows to the wordmark, or place on busy photos without a snow scrim.

Files

/components/brand/logo.tsx is the source of truth; SVG exports live in /public/brand.

02 — Foundations

Colour

Snow + hearth. Cool ice-blues (Frost) and deep indigo (Night) carry trust and structure; warm amber→coral (Ember/Hearth) carries the cosy glow. Semantic tokens flip automatically in dark mode.

Core palette

Night

#14143a

Frost

#1f8ae3

Sky

#74c0fb

Hearth

#ff7e5f

Ember

#ffb454

Snow

#f4faff

Ramps

Night--color-night-*

100

200

300

400

500

600

700

800

900

Frost--color-frost-*

100

200

300

400

500

600

700

800

900

Ember--color-ember-*

100

200

300

400

500

600

700

800

900

Slate--color-slate-*

100

200

300

400

500

600

700

800

900

Semantic tokens

primary

--primary

accent

--accent

success

--success

warning

--warning

danger

--danger

info

--info

Tenant accents

Every brand that joins the hub gets one accent block. Sub-brands override the brand layer with theirs.

Nook pink

Nook purple

Piggy blue

Piggy green

Teal

Sun

03 — Foundations

Typography

Baloo 2 for display (rounded, warm, sturdy). Plus Jakarta Sans for UI & body (warm but credible, great on billing & admin). JetBrains Mono for code, keys & tokens. Bilingual-ready (English + 繁體中文).

Baloo 2

Display · 600 / 700 / 800

font-display

Plus Jakarta Sans

UI / body · 400–800

font-sans

JetBrains Mono

Code · keys · tokens

font-mono

Display

One cosy home

Heading 1

Membership, simplified

Heading 2

Heading 3

Your family’s subscriptions

Body large

Warm inside, sturdy outside — one account for every brand.

Body

Tenant apps ask KIDIGLOO whether a member is entitled to a feature.

Small

We minimise data we collect about children.

Caption / mono

ENTITLEMENTS · API

繁體中文

一個帳戶，暢享每個品牌 ✨ 安全又溫暖的家

04 — Foundations

Spacing

A 4px base grid. Use the scale — never arbitrary values — so every brand lines up on the same rhythm.

space-1

4px

space-2

8px

space-3

12px

space-4

16px

space-6

24px

space-8

32px

space-12

48px

space-16

64px

05 — Foundations

Radius

Rounded but structured — cosy, not bubbly. Pills for actions & chips; soft rectangles for cards & inputs.

rounded-xs

rounded-sm

rounded-md

rounded-lg

rounded-xl

rounded-2xl

rounded-3xl

rounded-full

06 — Foundations

Elevation

Soft, cool, snow-tinted shadows. The warm “hearth” glow is reserved for the single most important action on a screen.

hearth

07 — Foundations

Motion

Cosy easing with a slight “snap” when blocks settle. Gentle and purposeful — and fully disabled under prefers-reduced-motion.

🧊

Float

Idle warmth (mark, hero)

🧊

Glow

The hearth, live states

🧊

Sparkle

Delight accents

🧊

Snap-in

Blocks settling in

Cosy easecubic-bezier(.22,1,.36,1)

Snap easecubic-bezier(.34,1.56,.64,1)

Fast150ms

Base / Slow250ms / 400ms

08 — Library

Components

Built once on the tokens, inherited by every brand. Primitives live in /components/ui.

Buttons

Pills. One warm “hearth” CTA per screen.

Badges & status

Entitlements, plan tiers, account states.

Frost planFamilyEntitledTrial ends soonPast dueVerified

Fields

Inputs, labels, helper text.

EmailPasswordAt least 10 characters.

Alerts

Semantic feedback that flips in dark mode.

✓Entitlement granted across the household.

!Your Family plan renews in 3 days.

×Payment failed — update your card.

Tenant blocks

Each brand is a coloured block snapping into the hub.

Nook

connected tenant

Brand Two

connected tenant

Brand Three

connected tenant

09 — Library

Iconography

Rounded line icons — 1.75 stroke, round caps & joins, 24px grid. Warm, friendly, legible. Matches the dome’s curves.

Home

Key (SSO)

Shield

Family

Billing

Sparkle

10 — Brand

Voice & tone

Warm, plain-spoken, and parent-respecting. Playful in small moments; serious where it counts — money, privacy, and children.

Principles

Cosy, not childish. Friendly to parents first; the delight is in details, not baby-talk.

Clear over clever. Especially around billing, consent, and security. Say exactly what happens.

Safe by default. Lead with what we protect and what we don’t collect.

Bilingual & inclusive. Reads naturally in English and 繁體中文.

Say / Don’t say

✓One account for every brand your kids love.

✗Sign up for our SSO IdP solution.

✓We keep children’s data to a minimum.

✗We collect data to improve engagement.

✓Your card was declined — let’s fix it.

✗Error 402: payment_intent failed.

✓You’re all set. Welcome home. 🧊

✗Onboarding complete.

11 — System

Sub-brands inherit, then vary

The whole point of a parent system. Both panels below use the same components and the same spacing, type scale, radius and motion — only the brand/accent tokens differ. Nook just adds class="theme-nook".

KIDIGLOO coreparent

Welcome home.

Trust-leaning, warm. Frost + Night + Hearth.

Frost planEntitled

✨Nooktenant

Today’s wonders ✨

Same bones, playful skin. Pink → purple, sparkly.

Sparkle planEntitled

Inheritance is defined in app/globals.css → .theme-nook. Real Nook also swaps the display face to Nunito.