Sprout

v18 · published

Bold, bouncy, and green - every tap feels like a win.

playfulsaturatedroundedtactilegamified

Sprout is a re-reading of the gamified-learning aesthetic: a bright, friendly canvas where chunky rounded buttons sit on a solid colored ledge, so they look genuinely pressable and punch down when you tap them. A single saturated feather-green carries every primary action, an electric macaw-blue plays the foil, and motion is springy and celebratory - things bob, wiggle, and pop into place. Type is rounded and confident, set in heavy uppercase for actions. It feels playful, tactile, and rewarding - software that turns a chore into a streak you don't want to break. The native mode is light and sunny; flip the toggle and the system drops into a deep midnight-navy, the same indigo the source spends on its boldest section.

Open the playground →Fork it · design a page →

re-imagined from https://www.duolingo.com

Use in your project

Pull this design system into any project - it follows the system's tokens, recipes and rules. Run the commands yourself, or let your coding agent set it up and build.

1 · Authenticate

npx synthesisui@latest login

2 · Add this design system

npx synthesisui add sprout --version 18

3 · Import the tokens in your global CSS

@import "_synthesisui/ds/sprout/tokens.css";
@import "_synthesisui/ds/sprout/theme.css";

Ask your agent

Use the "Sprout" design system (slug: sprout) to: build the UI I describe next

First make sure it's installed: run `npx synthesisui add sprout` if `_synthesisui/ds/sprout/` isn't in the project yet.

Read these files first (highest authority first):
- _synthesisui/ds/sprout/rules.md - project rules for this system (if present); obey them above everything else
- _synthesisui/ds/sprout/philosophy.md - the mission, voice and principles (if present); let it shape every screen
- _synthesisui/ds/sprout/v18/GUIDE.md - how to apply the system, the recipes and the token vocabulary

Follow this contract (target framework: next):
- First check whether this refers to UI that already exists in the project. If it does, modify only what's needed and keep the rest intact and on-system. If it doesn't, build it new.
- Scope the markup with `data-ds="sprout"` (or rely on it at the app root).
- Style with the design system only: reuse the `.ds-*` recipe classes and the DS-backed Tailwind utilities (`bg-primary`, `text-foreground`, `p-md`, `rounded-lg`, `font-display`…). Never use raw hex/px outside the system's scale.
- Make sure `tokens.css` + `theme.css` are imported in the global CSS (see the GUIDE's "How to apply").
- Wire the behavior yourself (open/close, focus, routing) - the system ships the looks, not the JS.

Composition (make it look composed, not just correct):
- Cap page content with a max-width container and center it - this DS ships `max-w-app` for dashboards/wide UI and `max-w-prose` for text columns. Don't stretch content edge-to-edge.
- Give the page a complete, intentional layout: clear vertical rhythm, sensible density and grouped sections. Never leave a single thin row floating on an empty screen.

Deliver senior-level, production-quality code: clean structure, accessible (ARIA + keyboard), and responsive.

Paste into Claude Code, Cursor or any coding agent. From your project you can also run npx synthesisui use sprout "…".

Dependencies

What to install or load so the system renders at full fidelity - it ships token names and recipes, not the assets.

Web fonts - Fredoka, Nunito, JetBrains Mono
The system ships token names, not the fonts. Load them (Google Fonts, next/font or Fontsource) or type falls back to a generic family and loses the system's identity.
Icons - Lucidenpm i lucide-react
Components reference Lucide icon names. Install it (or swap in your own icon set) to render them.
Chartsnpm i recharts
Charts are themed through your series tokens, but you bring the rendering library (the gallery uses Recharts).

Color

Primitives and roles.

Named scales forged by the synthesis; semantic roles only ever point at them.

color.bee

400#ffd43b

500#ffc800

600#e0a800

700#856800

800#8f6a00

color.veil

500#000437cc

color.cloud

50#ffffff

100#f7f7f7

200#e5e5e5

300#cdcdcd

400#afafaf

500#777777

600#4b4b4b

700#3c3c3c

750#737373

800#2b2b2b

900#1a1a1a

950#0f0f0f

color.macaw

50#e8f7ff

100#c9edff

200#93dbfc

300#5cc7fa

400#38bcf8

500#1cb0f6

600#0d8fd0

700#0a6fa3

750#0774a8

800#0774a8

color.night

700#1a2a66

800#0d1745

900#060e33

950#000437

color.feather

50#f0fce8

100#dcf7c5

200#bdee92

300#97e257

400#74d62b

500#58cc02

600#46a302

700#357a02

750#378001

800#285c02

850#378001

900#1d4302

color.cardinal

400#ff6b6b

500#ff4b4b

600#e63535

700#df0000

800#b82929

color.semantic - resolved live via CSS variables

info

{color.macaw.800}

faint

{color.cloud.400}

muted

{color.cloud.750}

scrim

{color.veil.500}

accent

{color.macaw.750}

border

{color.cloud.200}

canvas

{color.cloud.100}

danger

{color.cardinal.700}

raised

{color.cloud.50}

overlay

{color.cloud.50}

primary

{color.feather.750}

success

{color.feather.850}

surface

{color.cloud.50}

warning

{color.bee.700}

foreground

{color.cloud.700}

color.series - categorical data-viz palette (bg-series-*)

series-1

series-2

series-3

series-4

series-5

series-6

series-7

series-8

Foundations

Shape & depth.

Corner radius, spacing rhythm and elevation - the physical feel of the system.

radius

full

spacing

3xs2px

2xs4px

xs8px

sm12px

md16px

lg24px

xl40px

2xl64px

3xl96px

shadow

pop

ring

pop-blue

Typography

The voice of the system.

Display: Fredoka · Body: Nunito · Mono: JetBrains Mono

xsDesign, set free0.75rem / 1.4

smDesign, set free0.875rem / 1.5

baseDesign, set free1.0625rem / 1.6

lgDesign, set free1.25rem / 1.4

xlDesign, set free1.625rem / 1.25

2xlDesign, set free2.25rem / 1.15

displayDesign, set free3.25rem / 1.05

Motion

How it breathes.

Every keyframe runs live below, dressed in the system's own colors - durations, easing curves and the interactions they power.

keyframes - 8 live

press

pulse

bounce

pop-in

wiggle

fade-up

shimmer

celebrate

easings

standardease-in-out

snapcubic-bezier(0.22, 1, 0.36, 1)

bouncecubic-bezier(0.34, 1.56, 0.64, 1)

durations

base · 0.25sfast · 0.15sslow · 0.4sambient · 2s

interaction patterns

enterreveal

Tiles pop into place with a cheerful overshoot.

enterentrance

Content springs up and fades in.

presspress-in

The 3D button punches down onto its ledge.

entercelebrate

A completed goal does a happy little tada.

loopidle-bounce

Mascots and badges bob gently to stay alive.

hoverattention-wiggle

An idle CTA wiggles to invite a tap.

Components · 45

Recipes, rendered live.

Every value below is a token reference resolved by the renderer - hover, toggle and switch tabs to feel the states. Bespoke components are rendered from their anatomy hint.

ds-badge

Rounded chip for counts and status; bold colored text on a tinted fill.

intent

infoaccentdangerneutralprimarysuccesswarning

ds-button

The signature 3D action - bold uppercase on a solid colored ledge that punches down when pressed.

lawEvery pressable wears the ledge; the press pushes it down 2px - never remove the travel.
lawOne feather primary per view; secondary actions go outline.

intent

ds-streak

The bespoke streak counter - a flame and a big number that bobs to keep you coming back.

lawThe seedling grows with the streak; celebrate milestones, never show a broken streak in red.

tone

365day streak

ds-lesson-node

bespoke · control

The bespoke skill-tree node - a chunky circular tap target on a green ledge, the front door to a lesson.

tone

ds-card

Friendly white panel with a soft 2px ledge border; lifts and pops on hover.

lawCards sit on their soft ledge; reserve the elevated emphasis for the one card being compared.

padding

Default

A card wearing this system.

None

A card wearing this system.

emphasis

Default

A card wearing this system.

Elevated

A card wearing this system.

ds-alert

A message that sits on the page like a game tile - chunky border, tinted fill and the Sprout ledge in the tone's own color. One tone per alert, never stacked.

lawOne tone per alert, never stacked; the ledge color always matches the tone.

tone

Accent

A message wearing this system.

Danger

A message wearing this system.

Neutral

A message wearing this system.

Primary

A message wearing this system.

Success

A message wearing this system.

Warning

A message wearing this system.

ds-select

Field trigger that reveals a focus ring on interaction.

Choose an option

ds-input

Rounded field with a 2px border; a soft macaw ring blooms on focus.

ds-avatar

A chunky, pressable identity chip - round face, thick feather ring, and Sprout's signature ledge underneath so it sits on the page like a game piece. Image via ds-avatar-img.

lawGame pieces stay chunky: never shrink below 28px or drop the ring.

size

MAMAMA

ds-avatar-group

A party of game pieces - avatars overlapping with a bold cloud ring so every face stays chunky and readable.

lawNever more than five pieces; overflow becomes a +N piece.

MAJSKPRL

ds-chip

A pressable filter pill with the Sprout ledge - tap it and it feels like a win. data-active="true" fills it feather.

lawChips are choices in a game - active means picked, and picking should feel like a win.

active

MAMaya AndersenMAMaya Andersen

ds-link

bespoke · surface

Inline text link, for words inside sentences - the underline is the affordance, so it reads as a link without relying on colour alone. For standalone actions use button; for navigation chrome use navbar/sidebar items.

A surface wearing this system.

ds-kicker

bespoke · text

Mono uppercase eyebrow with wide tracking - the HUD microtype that labels a section ("01 · ECOSYSTEM"). Use above headings; data-tone="accent" for the highlighted variant.

tone

defaultaccent

ds-readout

bespoke · text

HUD data readout - a mono tabular value over a micro uppercase label ("42s · AVG RENDER"). The corner instrument of cinematic scenes; pair with the count-up hook for live-feeling numbers.

ValueLabel

ds-heading

bespoke · text

Display heading on the system's type scale - the display family at a semibold weight. Pick a `size` step (defaults to 2xl) so headings stay on-scale without hand-set styles.

size

lgxl2xldisplay

ds-text

bespoke · text

Body copy on the system's type scale. Pick a `size` step and a `tone`; defaults to base body text on the foreground color - so text stays on-system without hand-set styles.

size

xssmbaselg

tone

defaultmuted

ds-stack

bespoke · surface

Vertical layout primitive - a flex column with a token `gap` (defaults to md). Stack sections/cards without hand-set flex styles.

gap

A surface wearing this system.

align

A surface wearing this system.

ds-row

bespoke · surface

Horizontal layout primitive - a centered flex row with a token `gap` (defaults to sm). Compose toolbars/inline groups without hand-set flex styles.

gap

A surface wearing this system.

justify

A surface wearing this system.

align

A surface wearing this system.

ds-switch

Binary toggle - the track wears the system, on flips primary. Set data-state="on" on the track and the thumb.

state

ds-checkbox

Native checkbox/radio tinted to the system via accent-color. Put ds-checkbox on an <input type="checkbox"> (or radio).

ds-slider

Native range slider tinted to the system via accent-color. Put ds-slider on an <input type="range">.

ds-radio

Native radio tinted to the system via accent-color. Put ds-radio on an <input type="radio"> and give grouped radios a shared name.

MonthlyYearly

ds-stepper

Numeric stepper - a value flanked by minus/plus controls. Compose ds-stepper with two ds-stepper-button (each a <button>; add the disabled attribute at a bound) and a ds-stepper-value between them.

ds-steps

Step indicator for a multi-step flow (wizard/checkout/onboarding). Compose ds-steps with ds-steps-step and ds-steps-connector between them; nest a ds-steps-marker (the numbered circle) and ds-steps-label inside each step. Mirror data-state="done|active|upcoming" on BOTH the step and its marker (like switch on/off).

ds-divider

Hairline separator. Horizontal by default; data-orientation="vertical" makes a vertical rule (stretches to the flex row height).

orientation

ds-tabs

Segmented control. The trigger marked data-active="true" lifts onto a surface; panels carry the body.

ds-progress

Determinate track - the fill carries the primary.

ds-count

Notification indicator to overlay on an icon/button. ds-count shows a number on a high-contrast inverted bubble (portable in any DS); data-dot="true" drops the label for a small alert dot tinted danger. Position it absolutely over the trigger.

dot

ds-stat

KPI / metric - a label over a prominent value, with an optional delta. Compose ds-stat with ds-stat-label, ds-stat-value and ds-stat-delta (tone=up/down colors the change against neutral). Line several ds-stat in a flex row with a divider/border for a KPI strip.

Monthly revenue$128,430▲ 4.2%

ds-table

Data table. Compose <table class="ds-table"> with ds-table-head, ds-table-row, ds-table-cell-head and ds-table-cell.

Project	Status	Updated
Halogen	Active	2h ago
Cinnabar	Paused	1d ago
Ember	Active	3d ago

ds-modal

Centered dialog over a scrim. Compose ds-modal (the centering layer) with ds-modal-overlay, ds-modal-panel, and ds-modal-header/body/footer.

ds-sheet

Off-canvas panel (drawer) for mobile nav and side detail. Compose ds-sheet (the fixed layer) with ds-sheet-overlay (the scrim) and ds-sheet-panel; the panel docks to the right by default - data-side="left" docks it left.

Filters

ds-menu

Dropdown/popover surface. Compose ds-menu with ds-menu-item (tone=danger for destructive) and ds-menu-separator.

ds-field

Form field group. Compose ds-field with ds-field-label, the control, ds-field-hint and (when invalid) ds-field-error.

EmailEnter a valid email.

ds-sidebar

App navigation rail. Compose ds-sidebar with ds-sidebar-item (active=true marks the current route).

ds-topbar

App top bar - brand/search on the left, actions on the right.

ds-navbar

Horizontal navigation bar. Compose ds-navbar with ds-navbar-item (active=true marks the current route; data-locked="true" dims a disabled/"soon" item).

ds-textarea

Multi-line text field - the input's taller sibling.

A multi-line field wearing this system…

ds-breadcrumb

Trail of ancestors. Compose ds-breadcrumb with ds-breadcrumb-item (current=true for the leaf) and ds-breadcrumb-separator.

ds-pagination

Page navigation. Compose ds-pagination with ds-pagination-item (active=true for the current page).

ds-empty-state

Zero-data placeholder. Compose ds-empty-state with ds-empty-state-icon, ds-empty-state-title and ds-empty-state-description.

✦

No projects yet

Create your first project to get started.

ds-toast

Transient notification. Tone tints the border; compose ds-toast with ds-toast-title and ds-toast-description.

tone

NotificationYour changes were saved.

successYour changes were saved.

warningYour changes were saved.

dangerYour changes were saved.

infoYour changes were saved.

ds-tooltip

Small label bubble - inverted surface for contrast against the canvas.

ds-icon-button

Square, label-less action for toolbars and row controls - a quieter sibling of button.

ds-skeleton

Loading placeholder block. Ships the muted shape; animate it with Tailwind's `animate-pulse` (or a DS shimmer keyframe).

Engagement blocks · 5

Engagement, wearing the system.

Optional gamification blocks the AI advisor can propose - token-only, so they re-skin to any base. A library to compose from, not a parallel product.

ds-streak

The streak is a growing thing - in Sprout the spark is a seedling, and keeping it alive is the game.

12day streak

ds-xp-bar

Experience / level progress bar - visualizes advancement toward a goal.

Level 4620 / 1000 XP

ds-progress-ring

Circular progress ring - goal completion at a glance. Set --ds-ring (e.g. 72%).

72%

ds-badge-level

Level / rank badge - recognizes earned status.

tier

★ bronze★ silver★ gold

ds-leaderboard

Leaderboard - ranks peers to motivate progress (use sparingly in B2B).

1Ana2,480

2Bruno2,210

3Caio1,990

Icons · lucide

A consistent icon set.

Icons inherit the system: color via currentColor, a standardized stroke, sizing on the scale. Lucide by default; more libraries can be enabled per system.

Pages · 3

Whole pages, themed live.

Full-page layouts assembled only from recipes and tokens - every region re-themes to the system automatically. Icons and media render as placeholders until their adapters land.

dashboard-sidebarapp-shell

onboardingblank

Step 1 of 3

Welcome - let's set you up

We'll tailor the workspace to your answers.

Step 2 of 3

Tell us about you

Your name

Work email

Step 3 of 3

Pick a plan to finish

Team size

landinglanding

Acme

ProductPricingDocsChangelog

New · v2.0

Ship a coherent product, faster

A complete design system, themed end to end - every token in its place, every screen already wearing your brand.

Free to start · no credit card required

Trusted by product teams everywhere

Why Acme

Everything ships on-system

Built to scale

Tokens compose into any surface you need.

Measured by design

Charts and dashboards inherit the theme for free.

Whole pages, themed

App shells and landings assume your shape instantly.

Workflow

From token to shipped page

Design once at the foundation and every component, chart and template re-dresses itself - no per-screen rework.

Foundations cascade to every surface

Components stay on-system by construction

Templates arrive already assembled

Quality

Excellent by default

Every piece ships measured: contrast, hierarchy and consistency are scored before anything reaches production.

Accessibility checked at the source

Design reviews built into the pipeline

One source of truth for every team

12k+

teams building on-system

99.9%

uptime across releases

4.9/5

average team rating

“We rebuilt our whole app on this system in a week - every screen came out consistent by default.”

Maya ChenHead of Design, Numera

Start building today

Spin up your system and ship the first page before lunch.

Charts · 5

Data, painted by the system.

Chart recipes themed entirely from token refs - series, grid, axes and fills re-paint to the system automatically. Sample data; the theming is the point.

revenuearea

usagebar

conversiondonut

trend-upsparkline

trend-downsparkline