30 days free for new families · No ads, ever
BuddyLearn
Sign in Sign up free

Style guide

Everything below is rendered from the same tokens the rest of the site uses. Open the customiser (bottom right) and switch skins — every swatch, radius and shadow on this page changes with it.

Colour

Semantic names, never raw hex. A skin re-points them; your markup never changes.

Surfaces & ink

bg

--bl-bg

bg-alt

--bl-bg-alt

surface

--bl-surface

surface-alt

--bl-surface-alt

surface-sunken

--bl-surface-sunken

surface-inverse

--bl-surface-inverse

ink

--bl-ink

ink-soft

--bl-ink-soft

ink-faint

--bl-ink-faint

line

--bl-line

Brand & state

primary

bg-primary

accent

bg-accent

secondary

bg-secondary

success

bg-success

warning

bg-warning

danger

bg-danger

info

bg-info

focus

bg-focus

Decorative cycle

Add accent-1 … accent-8 to a container and its children pick that colour up through --accent.

accent-1

accent-2

accent-3

accent-4

accent-5

accent-6

accent-7

accent-8

Typography

Nunito, 400 to 900. Display weight and tracking are skin-controlled.

.display-1Learning buddy
.display-2Learning buddy
.display-3Learning buddy
.leadLessons, songs and games led by friendly characters.
bodyLessons, songs and games led by friendly characters.
.mutedLessons, songs and games led by friendly characters.
.eyebrowSection kicker

Buttons

Bootstrap's button CSS is deliberately not imported, so .btn is ours.

Form controls

A helper line sits under the field.

Enter a valid email address.

Components

Chips & badges

Chip Primary Secondary Quiet
NeutralDone PausedOverdue New

Progress

68%
34%
MTWTFSS

Avatars

N T W
NTWA

Alerts

Saved. Your changes are live.
Your trial ends in three days.
We couldn't reach the payment provider.
Tip: download lessons before a flight.

Quiz options

AGES 11–13 Big Brains 160 lessons

Science · 12 min

Why does ice float?

A five-minute experiment that explains a very strange exception.

Popular

Card with sticker

A rotated tag pinned to the corner. Uses the skin's radius and border.

Lab Partner Ten experiments run

Bootstrap widgets

Behaviour and ARIA from Bootstrap; every colour, border and shadow bridged to BuddyLearn tokens.

Modal, dropdown, tooltip

Driven by --bs-accordion-*, all pointed at BuddyLearn tokens.

Try it in the Cosmic skin — hairline borders, glow shadow, same markup.

Shape & elevation

These are the tokens that make skins feel structurally different, not just recoloured.

--bl-radius-xs

--bl-radius-sm

--bl-radius-md

--bl-radius-lg

--bl-radius-xl

--bl-shadow-xs

--bl-shadow-sm

--bl-shadow-md

--bl-shadow-lg

--bl-shadow-xl

Icons

131 symbols in one sprite, inlined per page. They inherit currentColor and font-size. Search the full set.