Mathland logoMathland

Mathland Friends — Design System v1

This page exists only for development. It showcases every token, font, component, and character placeholder in the Mathland design system.

2. Colors

Color Tokens

Every brand and neutral color in the Mathland palette.

sunrise

#FF8C42

bg-sunrise

sunrise-light

#FFB07A

bg-sunrise-light

sunrise-dark

#E66A1F

bg-sunrise-dark

berry

#E84A6F

bg-berry

berry-light

#F47B98

bg-berry-light

sky

#4A90E2

bg-sky

sky-light

#7AAEEC

bg-sky-light

meadow

#5BBA6F

bg-meadow

meadow-light

#8FCF9D

bg-meadow-light

sunshine

#FFD93D

bg-sunshine

sunshine-soft

#FFE587

bg-sunshine-soft

lavender

#A78BFA

bg-lavender

lavender-soft

#C8B5FC

bg-lavender-soft

cream

#FFF8EC

bg-cream

cream-soft

#FCF1E0

bg-cream-soft

cream-dark

#F5E6D3

bg-cream-dark

ink

#2D1F3D

bg-ink

ink-soft

#5C4D6B

bg-ink-soft

ink-mute

#8B7E96

bg-ink-mute

3. Typography

Type Scale

All type tokens with their size, weight, and font family.

display-xl

Mathland

display-lg

Discover Math

display-md

Learn with Pi

h1

Welcome to Mathland

h2

Today's Lesson

h3

Number Patterns

h4

Exercise Instructions

body-lg

Children love exploring math when it feels like play.

body

Complete the multiplication table below.

body-sm

Last updated 3 minutes ago

caption

LESSON 3 OF 8

number-display

3.14

cta-large

Start Learning Free →

5. Radii

Border Radius Tokens

Generous rounding is central to the Mathland friendly feel.

rounded-sm

6px

rounded

10px

rounded-md

14px

rounded-lg

20px

rounded-xl

28px

rounded-2xl

36px

rounded-full

9999px

6. Shadows

Shadow Tokens

No black shadows — all shadows use ink or brand tints.

shadow-soft

0 4px 12px rgba(45,31,61,0.08)

shadow-medium

0 8px 24px rgba(45,31,61,0.10)

shadow-strong

0 16px 40px rgba(45,31,61,0.14)

shadow-sunrise

0 8px 24px rgba(255,140,66,0.30)

shadow-sky

0 8px 24px rgba(74,144,226,0.30)

9.1 Buttons

Button Variants × Sizes

All variants in sm, md (default), and lg. Plus disabled states.

Variantsmmd (default)lgdisabled
primary
secondary
outline
ghost
danger
9.2 Cards

Card Variants

Default (white, bordered) and soft (cream-soft). Interactive adds hover shadow + scale.

Default Card
White background, cream-dark border, soft shadow.

Use for primary content surfaces on cream pages.

Soft Card
Cream-soft background, no border. Subtle variation.

Use for secondary or nested content blocks.

Interactive Card
Hover to see shadow + scale animation.

Add interactive prop to clickable cards.

9.3 Inputs

Input Field

White background, cream-dark border. Focus state uses sky border + shadow.

9.4 Badges

Badge Variants

Status indicators using brand palette.

defaultsunrise
successmeadow
infosky
warningsunshine-soft
dangerberry
Characters

Pi, Tessa & Numo

Phase 1 SVG placeholders. Final illustrated art commissioned post-MVP.

Charactersmmdlgxl

pi

fox

64pxPi the fox, default
96pxPi the fox, default
144pxPi the fox, default
200pxPi the fox, default

tessa

turtle

64pxTessa the turtle, default
96pxTessa the turtle, default
144pxTessa the turtle, default
200pxTessa the turtle, default

numo

owl

64pxNumo the owl, default
96pxNumo the owl, default
144pxNumo the owl, default
200pxNumo the owl, default
8. Motion

Framer Motion Variants

Click a button to preview each animation variant.

Click a button above to see animation