A toolkit for the joy of learning

A little room
to grow.

Meet Sprout. Thoughtful components, a softer palette, and just enough play. Make the next lesson feel like an invitation.

Explore components Make it yours

Quiet by default.Room to focus. Color with a purpose.

A little personality.Soft edges. Small celebrations.

Yours to shape.Own the source. Compose the pieces.

01Start with the essentials

Semantic tokens, shared across every component.

Typography / Warm, clear, familiar

Aa, a fresh start.Aa 0123

Palatino for moments of discovery. Trebuchet for everyday learning.
12 / 14 / 16 / 20 / 24 / 32 / fluid display. Local fonts, no downloads.

Space & shape / A steady rhythm

481216243248

4px base spacing. 8px small corners, 12px controls, 20px cards.
44px minimum control height. 140ms feedback, reduced-motion aware.

02Small pieces. Plenty of possibility.

Try them. These are working controls.

Buttons

Button

Everyday actions

Sizes & intent

Fields

Field · Input · Select

Badges & people

Badge · Avatar

✓ Completed◷ In progressDraft! Overdue

BiologyCreative thinking12 lessons

MCARLP

Better when we learn together.

Choices & progress

Checkbox · Switch · Progress

Show hints Lesson reminders

Your weekly goal3 of 5 lessons3 of 5 lessons

A little more, a little further.

Helpful feedback

Alert

✓ Nice work. You're all caught up.

Your latest lesson is saved. Take a well-earned pause.

A small heads-up

This assignment is due tomorrow at 5 pm.

Notes & loading

Textarea · Skeleton

A thought to keep

03Put a little learning into it

The same pieces, with a purpose.

Big ideas.
Tiny beginnings.

Creative thinking6 lessons · 45 min

Learn to see things differently

Everyday exercises for your wonderfully curious mind.

2 of 6 lessons complete33%2 of 6 lessons

MCWith Maya Chen

04See how everyone is growing

Clear information, even on busy days.

3 learners in this demo

Creative thinking · Study group
Learner	Progress	Status	Last active
Maya Chen	6 / 6 lessons	✓ Completed	Today
Arjun Rao	4 / 6 lessons	◷ In progress	Today
Lina Park	0 / 6 lessons	Not started	Yesterday

05Make yourself at home

Copy. Compose. Make it yours.

Your components.
Your next chapter.

Copy the source into your project. Choose the pieces you need, then change them freely. Every component shares the same tokens and accepts native HTML props.

Wrap your UI in .sprout and import the two style files. The included React components need only React 19. This catalogue runs entirely offline.

Read the usage guide

LessonCard.tsx

<Card>
  <CardHeader>
    <Badge tone="lilac">Biology</Badge>
    <CardTitle>Small wonders</CardTitle>
    <CardDescription>
      A closer look at the living world.
    </CardDescription>
  </CardHeader>
  <CardFooter>
    <a {...buttonProps()} href="/lessons/1">
      Start learning →
    </a>
  </CardFooter>
</Card>

A little roomto grow.