---
title: "Playful design system"
variant: extended
source: https://playful.app/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/playful-software)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Playful · Design System

> Personal software with a warm, playful edge

**Theme:** light · **Industry:** saas · **Source:** https://playful.app/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Playful pairs a warm, paper-like canvas and oversized italic headlines with vivid pink calls to action. Phone mockups and a full-width sunset hero make the product feel personal, while simple FAQ rows and a dark closing CTA keep the long page easy to scan.

## North star

Keep the warm editorial canvas quiet so bold type, real app mockups, and pink actions tell the personal-product story.

## Overview

The page builds its identity from a restrained warm-neutral foundation: #f6f1ed carries most content, while #eae5e1 distinguishes the opening band and #141414 anchors the final CTA. Bright #ff2e95 is reserved for primary actions and selective headline emphasis, so it remains a clear focal point. Inter supplies the compact navigation, readable body copy, and very heavy, tight-tracked display headlines; Caveat appears sparingly for handwritten personal notes in the app-story moments. The hero combines a large editorial message with a sunset-and-sea image and a floating phone mockup. Below, product screens and short explanatory blocks alternate across spacious, mostly single-column sections, with thin dividers organizing the FAQ. The page uses generous vertical breathing room and rounded pill buttons, but keeps cards largely flat; device frames, soft shadows, and layered mockups provide depth where product detail needs it. A dark closing band creates a decisive final contrast.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Parchment | `#f6f1ed` | `--color-soft-parchment` | brand | Main page canvas and background for most content sections. |
| Quiet Graphite | `#626261` | `--color-quiet-graphite` | neutral | Muted supporting copy and secondary text. |
| Night Frame | `#141414` | `--color-night-frame` | semantic | Dark footer band, inverse surfaces, and strong device outlines or borders. |
| Playful Pink | `#ff2e95` | `--color-playful-pink` | accent | Primary CTA fill, selected links, and emphasized headline words. |
| Oat Section | `#eae5e1` | `--color-oat-section` | surface | Opening section band and occasional subdued cards or controls. |
| Warm Charcoal | `#353535` | `--color-warm-charcoal` | neutral | Navigation, body copy, and secondary interface text. |
| Mockup Black | `#000000` | `--color-mockup-black` | semantic | Dark phone-screen surface within product mockups, not a dominant page color. |
| Headline Ink | `#1f1f1f` | `--color-headline-ink` | neutral | Primary heading and high-emphasis text. |
| Blush Paper | `#fff4f8` | `--color-blush-paper` | surface | Pale pink surface visible in selected cards and mockup details. |
| Petal Haze | `#f8cadc` | `--color-petal-haze` | surface | Soft pink gradient stop behind decorative or illustrated content. |
| Vanilla Glow | `#f8f8eb` | `--color-vanilla-glow` | surface | Pale gradient or product-art background, not a defining UI surface. |
| Lilac Mist | `#f7eefa` | `--color-lilac-mist` | surface | Light lilac gradient stop used in decorative content. |
| Rose Tint | `#ffe4f0` | `--color-rose-tint` | surface | Pink gradient or card tint within decorative and product visuals. |
| Fine Divider | `#ded9d5` | `--color-fine-divider` | neutral | Subtle hairlines and inset outlines separating FAQ rows and interface elements. |
| Clean White | `#ffffff` | `--color-clean-white` | surface | CTA label color and occasional text or mockup highlights. |
| Lavender Wash | `#ece2f8` | `--color-lavender-wash` | surface | A gradient accent in decorative or illustrated content, not a core surface. |

### Semantic aliases

`--color-canvas` → `#f6f1ed` (Soft Parchment) · `--color-surface` → `#eae5e1` (Oat Section) · `--color-surface-2` → `#000000` (Mockup Black) · `--color-surface-3` → `#141414` (Night Frame) · `--color-surface-4` → `#fff4f8` (Blush Paper) · `--color-text` → `#1f1f1f` (Headline Ink) · `--color-text-muted` → `#626261` (Quiet Graphite) · `--color-text-subtle` → `#353535` (Warm Charcoal) · `--color-border` → `#141414` (Night Frame) · `--color-accent` → `#ff2e95` (Playful Pink) · `--color-on-accent` → `#ffffff` (Clean White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1f1f1f` | `#f6f1ed` | 14.7:1 | AAA |
| `#1f1f1f` | `#eae5e1` | 13.18:1 | AAA |
| `#1f1f1f` | `#000000` | 1.27:1 | fail |
| `#1f1f1f` | `#141414` | 1.12:1 | fail |
| `#626261` | `#f6f1ed` | 5.44:1 | AA |
| `#626261` | `#eae5e1` | 4.88:1 | AA |
| `#626261` | `#000000` | 3.44:1 | AA-large |
| `#626261` | `#141414` | 3.02:1 | AA-large |
| `#353535` | `#f6f1ed` | 10.94:1 | AAA |
| `#353535` | `#eae5e1` | 9.81:1 | AAA |

### Gradients

- `radial-gradient(closest-side, color(srgb 1 0.180392 0.584314 / 0.2), rgba(0, 0, 0, 0))`
- `linear-gradient(to right bottom, rgb(255, 228, 240), rgb(255, 241, 239) 52%, rgb(255, 246, 232))`
- `linear-gradient(to right, rgb(234, 218, 244), rgb(236, 226, 248) 25%, rgb(247, 238, 250) 50%, rgb(245, 236, 248) 75%, rgb(242, 234, 246))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 700, 900, 600 | Navigation, body copy, buttons, headings, and most interface text. | Inter |
| Caveat | `--font-caveat` | webfont | 700, 400 | Handwritten-style notes and personal annotations around app examples. | Kalam |

- **Inter:** Use bold to black weights for display; headlines are oversized, italic, and tightly tracked, while body text stays clear and relaxed.
- **Caveat:** Use sparingly for informal handwritten phrases; retain a natural, expressive feel rather than applying it to general UI copy.

### Type scale — Perfect Fourth (ratio ≈ 1.303, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 900 | 1.08 | -0.02em | — | Inter | Large hero or closing statement headlines. |
| h1 | 52px | 900 | 1.1 | -0.02em | — | Inter | Primary hero headline with selective pink emphasis. |
| h2 | 41.5px | 900 | 1.12 | -0.02em | — | Inter | Major section headings introducing product benefits. |
| h3 | 34.5px | 700 | 1.15 | 0 | — | Caveat | Handwritten-style app annotations and personal notes. |
| h4 | 25.5px | 900 | 1.5 | -0.01em | — | Inter | Smaller feature or product-story headings. |
| body | 16px | 400 | 1.6 | 0 | — | Inter | Explanatory paragraphs and supporting section copy. |
| caption | 14px | 400 | normal | 0 | — | Inter | Small labels and details inside product examples. |
| button | 20px | 700 | normal | 0 | — | Inter | Primary Start making and closing CTA labels. |
| nav | 16px | 600 | normal | -0.02em | — | Inter | Header sign-in and primary navigation actions. |
| link | 16px | 400 | 1.6 | 0 | — | Inter | Inline links, support, and policy text. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 6, 7, 8, 10, 11, 12, 16, 20, 24, 26, 28, 32, 33, 40, 56 px.
- Section rhythm 80px · element gap 8px · card padding — · max content width 1072px.

The measured content max width is 1072px, with a comfortable, spacious rhythm and a measured 80px section gap. The page opens with a wide, image-led hero, then moves through mostly single-column story bands, a two-column product example, a four-part sharing section, and a single-column FAQ. Headings align to the start of their content blocks; the closing CTA centers its content. The large vertical gaps give the mockups room to read without crowding the copy.

## Shape & elevation

- Radius: button `9999px` · card `9999px` · nav `9999px` · link `9999px` · xs `16px` · sm `50px` · pill `9999px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0.28) 0px 24px 56px -24px`
- Shadow `xl-2` (card): `rgba(0, 0, 0, 0.3) 0px 48px 96px -24px`
- Shadow `xl-3` (card): `rgba(0, 0, 0, 0.1) 0px 24px 56px -16px`
- Shadow `xl-4` (card): `rgba(0, 0, 0, 0.12) 0px 24px 56px -16px`
- Shadow `inset` (link): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(222, 217, 213) 0px 0px 0px 1px inset`
- Motion: standard transition `0.2s cubic-bezier(0.4, 0, 1, 1)` on interactive elements.

Most content sits flat on the canvas, with thin #ded9d5 dividers structuring FAQ rows and occasional outlined surfaces. Depth is concentrated in the product imagery: phone frames, layered cards, and soft, broad shadows lift mockups from the background. Avoid adding shadows to every content block; retain the contrast of the dark final band.

## Imagery

The opening uses a wide sunset-and-sea scene as atmospheric photography, with a phone interface overlapping its lower edge. Further down, framed phone screens show personal mini-app examples, supported by small interface cards and handwritten annotations. Treat app screens as product evidence: preserve readable device framing, soft shadows, and clean screen surfaces. Keep decorative gradients subtle and avoid letting mockup colors redefine the warm neutral brand palette.

## Components

### Header navigation

Compact brand mark at left; sign-in text, pill-shaped pink Start making action, and a small theme control at right.

### Primary CTA

Bright #ff2e95 pill button with white Inter label; repeated across the hero, feature stories, and closing band.

### Hero story

Large heavy italic headline with a pink final line, short supporting copy, and an atmospheric sunset image behind a phone mockup.

### Phone mockup

Dark, rounded device frame containing a realistic personal mini-app screen; use gentle shadow and overlap with surrounding content.

### Feature story

Short bold heading and concise explanatory copy paired with a product screenshot or handwritten app-use example.

### FAQ list

Single-column questions with fine #ded9d5 hairlines, small right-aligned chevrons, and compact text.

### Closing CTA and footer

Centered white headline and pink action on a #141414 band, followed by understated policy and support links.

### Measured component styles

- **Primary button** (“Start making”): background #ff2e95 · text #ffffff · radius 9999.01px · padding 20px 32px · 700 20px Inter
- **Secondary button**: background #eae5e1 · text #4c4c4b · radius 9999.01px · padding 8px · 400 16px Inter
- **Link**: transparent background · text #ff2e95 · radius 0px · padding 0px · 400 16px Inter
- **Card** (“What is Playful?”): transparent background · text #353535 · border 1px solid #ded9d5 · radius 0px · padding 0px · 400 16px Inter
- **Navigation item** (“Sign in Start making”): transparent background · text #353535 · radius 0px · padding 0px · 400 16px Inter

## Do

- Use #f6f1ed as the primary page canvas.
- Reserve #ff2e95 for primary actions and selective emphasis.
- Set display headlines in heavy, tightly tracked Inter.
- Use Caveat only for personal handwritten annotations.
- Let phone mockups overlap spacious editorial sections.
- Use thin neutral dividers to organize FAQ rows.

## Don't

- Do not make pink the general page background.
- Do not crowd the hero with extra cards or controls.
- Do not apply handwritten type to navigation or body copy.
- Do not turn every section into a raised card.
- Do not treat mockup gradient colors as core brand colors.
- Do not use dense grids that compete with the product screens.

## Agent prompt

Build a new Playful-style SaaS page with a warm editorial feel. Use Soft Parchment (#f6f1ed) as the main canvas, Oat Section (#eae5e1) for a restrained band, Warm Charcoal (#353535) for navigation and copy, and Headline Ink (#1f1f1f) for strong headings. Make Playful Pink (#ff2e95) the clear primary CTA color with white labels. Use Inter for interface and headline typography, with heavy, tightly tracked display text; reserve Caveat for occasional handwritten annotations. Organize content in spacious story-led sections with realistic rounded phone mockups, subtle dividers, and soft shadows concentrated on product imagery. Finish with a centered CTA on Night Frame (#141414). Keep decorative pink and lilac gradients secondary to the real product screens.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Wide image-led opening band with left-aligned headline, supporting copy, CTA, and overlapping phone mockup. | primary CTA, product preview, theme control | warm section band, oversized italic headline, sunset photography, pink pill button |
| 2 | feature-split | Single-column story band with a heading, CTA, handwritten prompt card, and phone screen arranged across the space. | example-led explanation, start-making CTA | heavy heading, handwritten annotations, floating product mockup |
| 3 | product-showcase | Section introduction followed by widely spaced app examples and phone mockups. | use-case examples, repeat CTA | editorial heading, small annotations, device showcase |
| 4 | feature-split | Four-column supporting content with app and sharing interface imagery alongside a left-aligned feature heading. | privacy explanation, audience choice | privacy mockup, share controls, spacious feature copy |
| 5 | faq | Single-column FAQ heading above a vertical list of full-width question rows. | accordion questions, scan-friendly answers | thin hairlines, right-aligned chevrons, compact labels |
| 6 | cta | Full-width dark band with centered icon, headline, supporting line, CTA, and a low-profile footer row. | final conversion CTA, policy and support links | dark inverse surface, centered white type, pink pill button |

## Source CSS custom properties (selected)

```css
--background: #f6f1ed;
--foreground: #353535;
--card-foreground: #353535;
--popover-foreground: #353535;
--primary: #ff2e95;
--primary-foreground: #faf7f5;
--secondary: #f5006e;
--secondary-foreground: #faf7f5;
--tertiary-foreground: #fff;
--muted-foreground: #626261;
--accent-foreground: #fff;
--border: #ded9d5;
--radius: .5rem;
--sidebar-foreground: #353535;
--sidebar-primary: #ff6fb4;
--sidebar-primary-foreground: #f6f1ed;
--sidebar-accent-foreground: #353535;
--sidebar-border: #ded9d5;
--landing-panel-surface: #4d3945;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/playful-software