# Playful Software · Design system migration spec

> Source: https://playful.software  ·  Curated by OpenDesign  ·  en

> Worth including as a prime example of a warm, friendly, and high-impact consumer product landing page that avoids corporate tropes.

## 1. Identity DNA

Playful Software operates on the principle that personal expression deserves its own digital canvas. The system is built like a warm workshop, not a cold laboratory—a place where creativity feels accessible and sharing feels natural. Every design decision serves the goal of making technology feel personal and approachable.

**One-liner:** A platform for building and sharing personal mini-apps for the people who matter.
**Keywords:** personal · creative · shareable · mini-apps · playful
**Analogy:** A digital canvas for personal moments

## 2. Color

The palette is built on a foundation of warm, inviting neutrals—a soft beige (#FAF7F5) background that feels like natural light—punctuated by a high-chroma pink (#FF2E95) for moments of energy and action. This contrast ensures the vibrant accent always draws the eye to key interactive elements.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FAF7F5` | main background |
| `--ink` | `#141414` | body text |
| `--muted` | `#414040` | placeholder |
| `--accent` | `#FF2E95` | single accent |
| `--line` | `rgba(232,229,224,1)` | divider |

**Color principle:** Warm, inviting neutrals with a vibrant pink accent for energy.

The core principle is warmth and invitation; the palette avoids corporate grays and dark moods in favor of a bright, airy environment that feels inherently friendly.

## 3. Typography

The typographic voice is bold and declarative, using a heavy-weight humanist sans-serif for headlines that demand attention. The scale is built for high-impact moments like the hero headline, while body text maintains comfort through regular weight and generous line height for extended reading.

- **Display:** humanist-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 70px | 1.15 | 700 | -0.5px | Hero headline |

**Type rules:**
- 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.

## 4. Spacing

The rhythm of the page is established through generous whitespace, particularly around the central hero block, which frames the core message with deliberate quiet. This spacing creates a natural hierarchy, allowing the design to breathe and the user to focus.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace around the central hero block to emphasize the message.

## 5. Surfaces

Surfaces are defined by soft, elevated depth. Rounded square cards use layered shadows to create a subtle stack, while borders are reduced to a minimal 1px line in a complementary neutral for clear separation without visual noise.

- **Radius:** sm 4px · md 16px · lg 40px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.14) 0px 4px 20px 0px
  - rgba(71, 71, 71, 0.1) 0px 2.18px 5.44px 0px
- **Borders:** Subtle 1px borders using rgb(232,229,224) for card separation.

## 6. Layout

The layout skeleton begins as a single-column, centered stage for the hero section, designed for maximum visual impact. This focused introduction then transitions into a full-width grid, allowing content to expand and breathe as the user explores further.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is treated as a playful, organic extension of the interface, using elastic easing curves to give interactions a bouncy, responsive character. Transitions for state changes are kept smooth and consistent, enhancing the friendly feel without becoming distracting.

- **Durations:** micro 220ms · small 350ms · medium 800ms
- **Easing:** `cubic-bezier(0.34, 1.56, 0.64, 1)`
- **Patterns:**
  - Elastic easing for playful UI interactions.
  - Smooth background and opacity transitions.

- **Hover:** Subtle color shifts and slight scaling on interactive elements.
- **Click:** Elastic feedback using custom easing curves.
- **Transition:** Consistent 0.35s transitions for most state changes.
- **Keyboard:** Standard focus visibility for accessibility.

## 8. Voice & Don'ts

The editorial voice is friendly, direct, and innovative, matching the tone of a helpful guide rather than a formal instructor. It favors bold, declarative statements with a personal touch and action-oriented calls to action that feel inviting, not aggressive.

- **Tone:** Friendly, direct, and innovative.
- **Headline style:** Bold, declarative statements with a personal touch.
- **CTA style:** Action-oriented and inviting, like 'Join waitlist'.
- **Avoid:** Corporate jargon / Complex technical language / Overly formal or cold tone / Aggressive sales language / Small or timid typography

### Don'ts
- ❌ 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.

The system deliberately avoids corporate jargon, complex technical language, small or timid typography, and any aggressive sales tone.

## System Prompt (paste into AI tool)

```
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.
```