CURATED · OPEN · FREE

Playful Software

A platform for building and sharing personal mini-apps for the people who matter.

ProductPlayfulBold TypographyGradientConsumer

↓ Download design system (6 MB)Open in OpenDesign

Visit: https://playful.software

📦 Browse pack contents →

Identity DNA

personalcreativeshareablemini-appsplayful

A digital canvas for personal moments

Color

#FF2E95Accent

#141414Ink

#FAF7F5BG

#414040Muted

rgba(232,229,224,1)Line

Warm, inviting neutrals with a vibrant pink accent for energy.

Typography

humanist-sans

display70px · 700

Display text uses tight tracking and heavy weight for maximum impact. · Body text maintains comfortable reading with regular weight and generous line height. · Headlines are center-aligned for strong visual focus.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Generous whitespace around the central hero block to emphasize the message.

Surfaces

sm · 4px

md · 16px

lg · 40px

pill · 999px

Subtle 1px borders using rgb(232,229,224) for card separation.

rgba(0, 0, 0, 0.14) 0px 4px 20px 0px · rgba(71, 71, 71, 0.1) 0px 2.18px 5.44px 0px

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Single-column centered hero layout transitioning to a full-width grid for content.

Motion & Interaction

220msmicro

350mssmall

800msmedium

cubic-bezier(0.34, 1.56, 0.64, 1)easing

Elastic easing for playful UI interactions. · Smooth background and opacity transitions.

Subtle color shifts and slight scaling on interactive elements. · Elastic feedback using custom easing curves.

Components

button High-contrast pill-shaped buttons with the accent color and white text.
card Rounded square cards with soft shadows, often overlapping in a dynamic stack.
chip Minimal use, primarily for form elements like the email input.
input Clean, rounded input fields with subtle borders.
hero Large-scale bold typography over a soft gradient background with floating 3D-style app icons.

Voice & Don'ts

Tone Friendly, direct, and innovative.
Headlines Bold, declarative statements with a personal touch.
CTAs Action-oriented and inviting, like 'Join waitlist'.

don't use muted, corporate grays — screenshot shows a warm beige/cream (#FAF7F5) background.
don't use thin, decorative serifs for headlines — screenshot shows heavy, bold humanist sans-serif.
don't use a dark, moody color palette — screenshot shows a bright, airy, and warm environment.
don't use sharp, 90-degree corners for major elements — screenshot shows high-radius pills and rounded cards.
don't use a passive, subtle call-to-action — screenshot shows a vibrant pink (#FF2E95) button.
don't use excessive borders or dividers — screenshot shows clean surfaces with minimal or no visible lines.
Avoid: Corporate jargon
Avoid: Complex technical language
Avoid: Overly formal or cold tone
Avoid: Aggressive sales language
Avoid: Small or timid typography

Inside the pack — real screenshots

Playful Software — 桌面首屏（hero） — 桌面首屏（hero）

Playful Software — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

This is a playful, consumer-focused product landing page for 'Playful Software', emphasizing personal creativity and sharing. The design DNA features a warm, inviting beige (#FAF7F5) background with a soft pink gradient and a vibrant pink (#FF2E95) accent color. Typography is bold and humanist sans-serif, used for high-impact, declarative headlines. Critical constraints: never use cold, corporate grays or a dark background; avoid thin, decorative serif fonts for headlines; do not use sharp 90-degree corners for primary UI elements; never use a muted or passive call-to-action color; avoid excessive borders or complex grid lines that clutter the warm aesthetic; and do not use a dry, technical voice—keep it friendly and direct.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko