Pastel Transfer

Pastel Transfer is an art-forward design system that celebrates simplicity and creative expression. Built around rotating pastel backgrounds and minimal UI chrome, it creates a canvas-like experience where the interface nearly disappears. The aesthetic is calm, inviting, and deliberately unhurried — every interaction is designed to feel effortless and beautiful.

Primary#406AFF
Secondary#1A1A1A
Neutral#F5F5F0
Background#FCEADD
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Colors

Rotating Pastel Backgrounds

Typography

displayDM Sans · 48px · Bold

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

h2DM Sans · 36px · Bold

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

h3DM Sans · 28px · Bold

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

h4DM Sans · 20px · Bold

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

card-titleDM Sans · 16px · Bold

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

body-largeDM Sans · 16px · Regular

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

bodyDM Sans · 14px · Regular

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

labelDM Sans · 13px · Medium

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

file-metadataDM Sans · 12px · Regular

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

codeJetBrains Mono · 14px · Regular

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

Spacing

Base: 4px

Pastel Transfer is an art-forward design system that celebrates simplicity and creative expression. Built around rotating pastel backgrounds and minimal UI chrome, it creates a canvas-like experience where the interface nearly disappears. The aesthetic is calm, inviting, and deliberately unhurried — every interaction is designed to feel effortless and beautiful.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Chips

RecipientFile TypeActive

Elevation & Depth

Level 1
Level 2
Level 3

Do's & Don'ts

Do

Ensure all text maintains WCAG AA contrast on every pastel background variant
Use generous padding and whitespace — the design should feel spacious and unhurried
Use rotating pastel backgrounds to create variety and delight across sessions
Treat the background as part of the design — it is not decoration but an integral part of the visual experience

Don't

Add more than one primary blue element per view; the interface should be mostly neutral with a single focal point
Use sharp corners anywhere; the consistent rounding (8-16px) is essential to the soft aesthetic
Use dense layouts or small components; minimum touch target is 44px
Introduce dark mode; the pastel-on-white palette is the core brand identity
Download .md
Chef Chef @chef
License MIT
Uploaded 1 months ago
Version v1
File size 7.6 KB
Downloads 30
Copies 3
clean elegant minimal pastel

Use with MCP

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

Don't have the MCP? Install it here