Bear breathing
3 minutesSlow, deep breaths shaped like a bear hug.
Design System
TinyRoots Component Library
Every token and component in every state. Development reference only.
Colors
Base Palette
Primary
--color-primary
Primary Hover
--color-primary-hover
Primary Light
--color-primary-light
Primary Dark
--color-primary-dark
Primary Display
--color-primary-display
Secondary
--color-secondary
Secondary Text
--color-secondary-text
Accent (Gold)
--color-accent
Background
--color-bg
Card
--color-card
Surface
--color-surface
Surface Hover
--color-surface-hover
Text Dark
--color-text-dark
Text Mid
--color-text-mid
Text Soft
--color-text-soft
Text Body
--color-text-body
Muted
--color-muted
Grabber
--color-grabber
Semantic
Info Bg
--color-info-bg
Info Border
--color-info-border
Info Text
--color-info-text
Success Bg
--color-success-bg
Success Border
--color-success-border
Success Text
--color-success-text
Warning Bg
--color-warning-bg
Warning Border
--color-warning-border
Warning Text
--color-warning-text
Error Bg
--color-error-bg
Error Border
--color-error-border
Error Text
--color-error-text
Emotion Accents
Anxiety
--emotion-anxiety
Anxiety Bg
--emotion-anxiety-bg
Anger
--emotion-anger
Anger Bg
--emotion-anger-bg
Grief
--emotion-grief
Grief Bg
--emotion-grief-bg
Literacy
--emotion-literacy
Literacy Bg
--emotion-literacy-bg
Typography
Font Families
Fraunces — Headings
--font-heading / Weights: 400, 700
Lato — Body copy and descriptions
--font-body / Weights: 400, 700
Manrope — Buttons, labels, navigation
--font-ui / Weight: 600
Type Scale
Hero
--fs-hero / 48px / Fraunces 700
Display
--fs-display / 40px / Fraunces 700
H1
--fs-h1 / 32px / Fraunces 700
H2
--fs-h2 / 28px / Fraunces 400
XL
--fs-xl / 24px / Fraunces 400
LG
--fs-lg / 22px / Fraunces 400
H3
--fs-h3 / 20px / Fraunces 400
MD
--fs-md / 18px / Fraunces 400
SM
--fs-sm / 16px / Fraunces 400
Body LG
--fs-body-lg / 17px / Lato 400
Body
--fs-body / 14px / Lato 400
Button
--fs-button / 15px / Manrope 600
Button SM
--fs-button-sm / 13px / Manrope 600
Caption
--fs-caption / 12px / Lato 400
Label
--fs-label / 11px / Manrope 600
Tag
--fs-tag / 11px / Manrope 600
XS
--fs-xs / 10px / Manrope 600
Spacing
--space-0-5
2px
--space-1
4px
--space-1-5
6px
--space-2
8px
--space-2-5
10px
--space-3
12px
--space-3-5
14px
--space-4
16px
--space-4-5
18px
--space-5
20px
--space-5-5
22px
--space-6
24px
--space-7
28px
--space-8
32px
--space-9
36px
--space-10
40px
--space-12
48px
--space-14
56px
--space-16
64px
--space-20
80px
--space-22
88px
Border Radius
--radius-sm
6px
6px
--radius-md
8px
8px
--radius-md-lg
10px
10px
--radius-lg
12px
12px
--radius-xl
16px
16px
--radius-2xl
24px
24px
--radius-full
9999px
9999px
Shadows & Effects
--shadow-card-hover
Card hover
Card hover
--shadow-sheet
Bottom sheet
Bottom sheet
--color-scrim
Overlay scrim
Overlay scrim
--color-backdrop-nav
iOS tab bar blur
iOS tab bar blur
Layout & Navigation
WebNav
Default — Library active
BrandMark
TinyRoots
Default
App Icons
Favicon (SVG, 32x32)
iOS App Icon (180x180)
iOS App Icon (large preview)
IOSTabBar
Finder active
Library active
About active
Primitives
Button — Primary
Default
Default
Default
Disabled
Loading
Button — Secondary
Default
Default
Saved
Disabled
Tag
2-5
Stone (age)
Anxiety
Anxiety
Anger
Anger
Grief
Grief
Literacy
Literacy
CBT
Framework
Mindfulness
Framework
Home
Stone (setting)
3 minutes
Stone (duration)
SectionLabel
Activity Finder
Free · No accounts · No AI
Hairline
Content above
Content below
Filter Components
AgeSelector
No selection
EmotionTile
FilterPanel + FilterSection
ActiveFilterPill
Filters
FilterBottomSheet
Content Cards
ActivityCard
Default
Volcano breathing
4 minutesBig arms up like an eruption, then slow hands down.
Default (anger)
Bear breathing
3 minutesSlow, deep breaths shaped like a bear hug.
With setting tag
RelatedCard (iOS)
Five things you can see
The feelings thermometer
Ice cube hands
PacketRow
1
Bear breathing
2
Memory jar
3
Feelings charades
Feedback Components
SemanticBanner
Info
Success
Warning (adult guidance)
Error
InlineToast
Saved.
Web variant
Saved to packet
iOS variant
Empty States
Finder empty
Pick an age and a feeling above
We’ll match three to five activities. Most take less than five minutes.
Library no results
No activities match these filters yet
The library is small on purpose — every activity is reviewed before it lands. Try widening the age range, or drop a filter.
Packet empty
Nothing saved yet
Browse the Library or use the Finder. Hit Save on any activity and it lands here — ready to print together.
Activity Detail Components
BackLink
Library
iOS
StepList
- 1
Sit close. Cross your arms over your chest like you're giving yourself a hug.
- 2
Breathe in slowly through your nose for four. Pretend you're smelling honey.
- 3
Breathe out through your mouth for six. Pretend you're cooling soup.
- 4
Three rounds. The exhale is the part that calms — make it the longest.
MaterialsList
- Nothing — just you and them
Nothing needed
- Paper
- Crayons or markers
Materials present
Home-Only Components
HeroSection
Free · No accounts · No AI
An activity for the feeling, the age, the moment.
Calm tools for parents, teachers, and counselors. Pick what they're feeling and how old they are — we'll show you three or four things that work, ready to print.
PersonaCard
For parents at home
When the meltdown starts and you need something to try in the next three minutes — not an article to read.
For Pre-K & elementary teachers
Twenty kids, limited resources, no counselor on site. Print a packet on Monday, use it all week.
For school counselors
Pull from a searchable library for a specific child, a specific situation. Build a packet, print it, hand it over.
DonateStrip
Free forever
Built and kept free by small donations.
No subscriptions, no premium tier, no ads. If TinyRoots helped someone today, you can help us keep it going.
Packet Builder Components
PacketExportPanel
1
Bear breathing
2
Memory jar
3
Feelings charades
IOSExportStrip
3 activities·~5 pages·B&W safe