โœฆ
๐ŸฆŠ Papercub

Published on July2026.

A learning world made of paper.

The complete design system for a kids' learning & activity app โ€” playful, handcrafted, and cut from colorful paper. Ages 5โ€“10.

Paper-morphism Playful UI kit Tokens + Components
โ˜… SIGNATURE VARIANT

Paper Mode

One global styling switch. Standard gives clean modern UI; Paper transforms every surface into hand-cut, layered craft paper โ€” torn edges, folded corners, tape and stacked sheets.

๐Ÿ‰
STORY
The Sleepy Dragon

โญ 4.9 ยท 6 min read ยท A cozy bedtime tale about a dragon who just wants a nap.

๐Ÿ‰
STORY
The Sleepy Dragon

โญ 4.9 ยท 6 min read ยท A cozy bedtime tale about a dragon who just wants a nap.

๐Ÿงป Paper Mode is ON โ–ข Standard Mode
Same layout & content โ€” only the surface treatment changes.
BUTTON
Standard
Paper
PANEL
Tip of the day
Standard
Tip of the day
Paper (sticky note)
BOTTOM NAV
๐Ÿ ๐Ÿ“š๐ŸŽฎ๐Ÿ†
Standard
๐Ÿ ๐Ÿ“š๐ŸŽฎ๐Ÿ†
Paper (layered)

01 ยท Design Principles

๐ŸŽจ

Handmade, not digital

Every element looks cut, torn, and glued. Soft edges and stacked layers over flat screens.

๐Ÿงญ

Learn through play

Never feels like school. Rewards, characters and games carry every lesson forward.

๐Ÿ‘†

Big, safe, obvious

Large touch targets, one clear action per screen, minimal reading, zero clutter.

โœจ

Delight everywhere

Gentle bounces, sticker pops and confetti make progress feel joyful and earned.

02 ยท Color Palette

Primary

{{ c.name }}
{{ c.hex }}

Supporting

{{ c.name }}
{{ c.hex }}

Neutrals

{{ c.name }}
{{ c.hex }}

03 ยท Typography

Fredoka

Display & headings โ€” rounded, warm, confident.

Nunito

Body & UI โ€” tall x-height, superb readability.

{{ t.name }}
{{ t.meta }}
The quick paper fox

04 ยท Spacing, Radius & Paper Shadows

8px spacing scale

xs 4 ยท sm 8 ยท md 16 ยท lg 24 ยท xl 32 ยท 2xl 48

{{ sp.label }}
{{ sp.px }}px

Corner radius

sm ยท 10
md ยท 18
lg ยท 26
pill ยท โˆž

Paper elevation

A hard offset shadow reads as a stacked paper layer; a soft blur grounds it on the page.

Rest ยท e1
Raised ยท e2
Float ยท e3
Popover ยท e4

05 ยท Iconography

Bold, filled silhouettes with rounded corners โ€” like shapes punched out of paper. No thin outlines.

{{ ic.glyph }}
{{ ic.name }}

06 ยท Buttons

FAB

States

07 ยท Form Elements

๐Ÿ”ŽSearch storiesโ€ฆ
Choose a topicโ–พ
Animals โœ• Space โœ•
โœ“
Checked
Off
Selected
Empty
Difficulty
Grown-up PIN
4
2
ยท
ยท

08 ยท Cards

STORY

The Sleepy Dragon

โญ 4.9 ยท 6 min read

๐Ÿ“–
LESSON 4

Naming Words

7 / 10 done

๐ŸŽฎ
WORD GAME

Spelling Splash

๐Ÿ†
ACHIEVEMENT

Word Wizard

Learned 100 new words!

09 ยท Navigation

TOP APP BAR
โ†
Reading
๐Ÿ””
TAB BAR
Stories
Games
Quiz
PROGRESS / STEPPER
โœ“
2
3
BREADCRUMB
๐Ÿ  Homeโ€บ Grammarโ€บ Nouns
BOTTOM NAVIGATION
๐Ÿ 
Home
๐Ÿ“š
Learn
๐ŸŽฎ
Play
๐Ÿ†
Rewards

10 ยท Feedback & States

โœ“
Great job!
You finished the lesson.
!
Oops, try again
That wasn't quite right.
TOAST / SNACKBAR
SKELETON LOADER
๐Ÿ“ญ
Nothing here yet!
Finish a story to fill this shelf.
PROGRESS INDICATORS
Loading funโ€ฆ

11 ยท Gamification

XP1,240
๐Ÿช™86 Coins
โญ3 / 3 Stars
๐Ÿ”ฅ
7
DAY STREAK
BADGES
๐ŸŒŸ
๐Ÿš€
๐Ÿ“š
๐Ÿ”’
Level 5Explorer
780/1000

220 XP to Level 6 ๐ŸŽ‰

๐ŸŽŠ
โœฆ
๐ŸŽ
ACHIEVEMENT UNLOCKED
New sticker pack!
Tap to open your surprise ๐ŸŽ‰

12 ยท Learning Components

FLASHCARD โ€” tap to flip
๐ŸŽ
Apple
A fruit that
grows on trees ๐ŸŒณ
QUIZ CARD โ€” pick an answer
Which is a verb?
PUZZLE TILES & DRAG-DROP
C
A
T
MATCHING CARDS
๐Ÿถ
๐Ÿฑ
โŸถโŸถ
Dog
Cat
FILL IN THE BLANK
The cat sat on the .
mat hat log
READING PROGRESS TRACKER
๐Ÿ“•
Chapter 3
Page 12 of 20

13 ยท Motion

๐ŸŽˆ
Float
rewards drift up
โญ
Sticker pop
scale-in bounce
๐ŸฆŠ
Wobble
characters react
๐ŸŽ‰
Confetti
celebrate wins

14 ยท App Screens

๐ŸฆŠ
Hi, Maya!
Let's learn ๐ŸŽ’
๐Ÿ”ฅ7
๐ŸŽฏ
DAILY CHALLENGE
Match 5 words
Go
Your Journey
โœ“
Alphabet
Complete!
๐Ÿ“–
Naming Words
๐Ÿ”’
Action Words
Locked
๐Ÿ 
Home
๐Ÿ“š
Learn
๐ŸŽฎ
Play
๐Ÿ†
Rewards
โœ•
โค๏ธ3
QUESTION 6 OF 10
What is this?
๐Ÿš€
Rocket โœ“
Car
Boat
Plane
๐ŸŽ‰
Correct! +20 XP
You're on fire!
โœฆ
โœฆ
My Rewards
๐Ÿช™ 86
COINS
โญ 24
STARS
๐Ÿ†
Word Wizard
Learned 100 words!
Badge Collection
๐ŸŒŸ
Star
๐Ÿš€
Explorer
๐Ÿ”ฅ
Streak
๐Ÿ”’
Locked
๐Ÿ”’
Locked
๐Ÿ”’
Locked
๐ŸฆŠPapercub Design System ยท v1.0
๐Ÿงป
๐ŸŽ‰ Yay! You earned 10 coins!