---
name: Playful Software
description: "Worth including as a prime example of a warm, friendly, and high-impact consumer product landing page that avoids corporate tropes."
version: alpha

colors:
  background: "#FAF7F5"
  primary: "#141414"
  tertiary: "#FF2E95"
  neutral: "#414040"
  line: "rgba(232,229,224,1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 70px
    lineHeight: 1.15
    fontWeight: 700
    letterSpacing: "-0.5px"

rounded:
  sm: 4px
  md: 16px
  lg: 40px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

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

*A digital canvas for personal moments*

## Colors

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

- **Background (`#FAF7F5`)** — uses `bg` token
- **Primary text (`#141414`)** — uses `ink` token
- **Accent (`#FF2E95`)** — uses `accent` token
- **Muted (`#414040`)** — uses `muted` token
- **Borders (`rgba(232,229,224,1)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* Generous whitespace around the central hero block to emphasize the message.

## Elevation & Depth

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

## Shapes

- `sm`: 4px
- `md`: 16px
- `lg`: 40px
- `pill`: 999px

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

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

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