Design system

TinyTeller, on paper

The live gallery for tokens, typography, primitives, and experience components. If a UI pattern is not represented here, it belongs in the component library before it belongs in a product page.

Back to app status

Foundations

Colors

Warm lantern glow on deep night-sky navy, with cream paper and ink for book surfaces.

Brand

Lantern
--lantern
#f4b860

Primary accent, CTAs, icons, section labels.

Lantern soft
--lantern-soft
#f9d89a

Warm highlights and glow moments.

Lantern deep
--lantern-deep
#c88636

Labels and details on paper surfaces.

Rose
--rose
#d97b6c

Secondary accent and gentle danger states.

Surfaces

Deep
--deep
#0d1428

Page background.

Deep 2
--deep-2
#141c36

Primary component surface.

Deep 3
--deep-3
#1c2544

Surface gradient partner.

Ink and Paper

Cream
--cream
#fdf4dc

Copy on dark and paper surface color.

Cream soft
--cream-soft
#f9ecc9

Soft paper highlight.

Paper
--paper
--cream

Story-page base.

Paper highlight
--paper-highlight
--cream

Page highlight.

Paper edge
--paper-edge
--cream-soft

Light page edge.

Ink
--ink
#2a1a08

Book text and text on cream.

Voice

Typography

Three families, each with a job: Young Serif for titles, Nunito for UI, Gentium Book Plus for story text.

Title XLYoung Serif · 54px · 1.05
A book starring the people they love.
Title LGYoung Serif · 40px · 1.08
Made for the people who made them.
Title MDYoung Serif · 28px · 1.15
Who is this book for?
Title SMYoung Serif · 21px · 1.15
Where bedtime stories come to life.
Body LGNunito · 19px · 1.55
The most personal gift you will ever give. Hardcover, made with care, sent with a little glow.
Body SMNunito · 15px · 1.55
A quiet supporting line for hints, component descriptions, and lower-priority UI copy.
EyebrowNunito · 13px · 0.15em tracking
Personalized children's books
Book LGGentium Book Plus · 22px · 1.55
My dad is the tallest man I know. When he lifts me up, I can almost touch the clouds.

Components

Buttons

The wobble pill is the signature CTA. Use it sparingly so it keeps its charge.

CTA

Secondary and text

Coin buttons

Components

Inputs

Parchment inputs use asymmetric corners and lantern focus glow.

Just the first name is enough.

Used for previews and account access.

Optional, but this is the detail that makes the book feel like them.

Components

Chips and option cards

Use the right choice component for the answer type: textual, descriptor, compact icon, or visual.

Chips and tags

Visual options

Small icon options

Components

Book card

Hardcover previews are part of the product language. The book block stays planted while the front cover hinges open from the spine.

The Love Between book cover
Our First Year book cover
Nana & Me book cover

a tinyteller book

The Love Between

Daddy & Mia

a tinyteller book

Our First Year

Little Theo

a tinyteller book

Nana & Me

Nana & Emma

Components

Story card loading

The generating story card keeps the blur reveal near the top of the cover so the book still feels hidden while it is being made.

A TinyTeller demo book cover
A TinyTeller demo book cover
Creating story

This may take 3-5 minutes. You will receive an email when it's ready.

The book is being illustrated.
Playing1x
Demo timeline: 0%

Components

Page card

Story pages use cream paper, ink text, and Gentium Book Plus.

Page 3
My dad is the tallest man I know. When he lifts me up, I can almost touch the clouds.
~ ✦ ~
Page 7
He makes pancakes shaped like whales on Saturdays. Mine are always the biggest.
~ ✦ ~
Page 14
When the world is loud, my dad's voice is the quietest one. I can always find it.
~ ✦ ~

Foundations

Icons

Phosphor Duotone is the only icon family. The default treatment is lantern on deep.

book-open
heart
gift
star
clock
envelope
user-circle
map-pin
paint-brush
sparkle
package
baby
cake
moon-stars
feather
inline · 24px
feature · 32px
badge · circle
hero · 56px

Components

Badges and notices

Small status components used across internal and setup screens.

NeutralConfiguredNeeds attentionError
Neutral note for low-pressure system messages and setup hints.
Lantern success state for configured services.
A gentle warning state for recoverable setup issues.
Rose danger state for errors that need attention.