DoodlePad Design System

DoodlePad Design System mockup preview
Click to expand

DoodlePad is a crayon-textured, hand-drawn design system crafted for children's creative and drawing apps. It embraces the imaginative spirit of childhood art with a warm ivory background, sky blues, grass greens, and sunny yellows. The handwritten headline font and generous rounded corners create an interface that feels like a living sketchbook.

Color Primary#60A5FA
Color Secondary#4ADE80
Color Tertiary#FBBF24
Surface Base#FFFFF0
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

h1Patrick Hand · 40px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h2Patrick Hand · 32px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h3Patrick Hand · 24px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h4Patrick Hand · 20px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodyNunito · 18px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

smallNunito · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

xsNunito · 14px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 8px

DoodlePad is a crayon-textured, hand-drawn design system crafted for children's creative and drawing apps. It embraces the imaginative spirit of childhood art with a warm ivory background, sky blues, grass greens, and sunny yellows. The handwritten headline font and generous rounded corners create an interface that feels like a living sketchbook.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

FilterStatus

Elevation & Depth

shadow-sm
shadow-md
shadow-lg
shadow-blue
shadow-green

Do's & Don'ts

Do

Use dashed borders on cards and ghost buttons to reinforce the hand-drawn, sketchbook vibe
Use Patrick Hand for all headings; it establishes the entire creative personality of the system
Maintain the ivory background throughout; it creates the warm paper-like canvas feel
Use the sky blue primary for tool selection states and active drawing tools
Make color swatches and tool icons at least 44px for easy tapping by children
Use the sunny yellow for reward moments, star ratings, and positive reinforcement animations

Don't

Use text smaller than 14px; young users need large, clear type for readability
Use sharp corners; every element should feel soft and rounded with 16-24px radius minimum
Use scary or harsh error messaging; keep feedback gentle with soft reds and friendly language
Overcomplicate layouts; keep tool palettes simple with no more than 6-8 options visible
Download .md
Chef Chef @chef
License MIT
Uploaded yesterday
Version v1
File size 6.8 KB
Downloads 0
kids light mobile-app playful warm

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/doodlepad and implement it in my code

Don't have the MCP? Install it here