# Playful

> # Playful — Style Reference

## Prompt Content

```
# Playful — Style Reference
> Cuốn sổ tay dưới ánh nắng với bút highlighter hồng neon. Một bề mặt sản phẩm editorial thân thiện, in trên giấy kem ấm, nơi một điểm nhấn magenta rực rỡ duy nhất tạo điểm nhấn cho toàn bộ thế giới monochrome xám ấm.

**Theme:** light

Playful mang phong cách một xưởng thủ công ấm áp, in trên giấy kem. Toàn bộ bề mặt nằm trên nền oat canvas màu cát (#f6f2ee) thay vì trắng lạnh, mang đến cho mọi màn hình cảm giác ấm áp, gần gũi như giấy. Một màu hot-pink duy nhất (#ff2e95) đảm nhận toàn bộ công việc tạo màu sắc — CTA, link, logo mark — trên nền mực gần đen (#111/#000), giúp màn hình luôn yên tĩnh về mặt thị giác cho đến khi cần một hành động. Display type được thiết kế đậm và italic ở 70–79px, thiên về năng lượng poster editorial thay vì tính trung tính của SaaS. Các component lớn và mềm mại: card 44px trên pill-shaped buttons, đổ bóng khuếch tán sâu, khoảng thở rộng rãi. Nhịp điệu tổng thể là một tuyên bố typography đậm mỗi section, bao quanh bởi khoảng trắng ấm yên tĩnh.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Hot Magenta | `#ff2e95` | `--color-hot-magenta` | Primary CTA fill, logo mark, link color, accent strokes — giọng màu duy nhất trong hệ thống, dùng có chừng mực để báo hiệu hành động |
| Ink Black | `#000000` | `--color-ink-black` | Heading text chính, button text, border đậm, navigation bar background |
| Oat Canvas | `#f6f2ee` | `--color-oat-canvas` | Page background, large surface fills — màu kem ấm thay thế trắng lạnh trong toàn bộ hệ thống |
| Soft Ink | `#111111` | `--color-soft-ink` | Body text và heading trên bề mặt sáng, card surface background cho phần tử tối |
| Slate | `#0f172a` | `--color-slate` | Secondary text, body copy nhẹ nhàng — màu gần đen hơi lạnh dùng cho non-headline text |
| Charcoal | `#414040` | `--color-charcoal` | Neutral form states, badge text, và phản hồi UI nhẹ nhàng nơi màu sắc cần giữ kín đáo. Không nâng lên thành primary CTA color |
| Stone | `#848383` | `--color-stone` | Icon strokes, muted helper text, UI divider nhẹ |
| Paper White | `#ffffff` | `--color-paper-white` | Card surfaces, elevated panels, bề mặt tương phản với oat canvas |
| Warm Mist | `#e8e5e0` | `--color-warm-mist` | Hairline borders, divider, container outline nhẹ — tông ấm để phù hợp với canvas |
| Sand | `#e2dcd6` | `--color-sand` | Secondary borders, decorative outlines trên bề mặt ấm |
| Driftwood | `#c3c1bf` | `--color-driftwood` | Card shadow base tone, muted surface fills |
| Midnight | `#202126` | `--color-midnight` | Deep heading text variant, gần đen với sắc lạnh nhẹ cho headline weight cao |

## Tokens — Typography

### Inter — Primary typeface cho mọi thứ. Display headlines dùng 700/900 italic ở 70–79px cho năng lượng poster editorial; subheads ở 26–30px 600/700; body 16–18px 400; captions 14px 500. Display italic đậm là signature — hầu hết product site mặc định là upright, Playful nghiêng về độ nghiêng để tạo cá tính. · `--font-inter`
- **Thay thế:** DM Sans, Manrope
- **Weights:** 400, 500, 600, 700, 900
- **Kích thước:** 14px, 16px, 18px, 26px, 30px, 70px, 79px
- **Line height:** 1.15 (display), 1.20 (headings), 1.33–1.40 (subheads), 1.50–1.70 (body)
- **Letter spacing:** -0.002em trên mọi kích thước (siết nhẹ gần như không thấy)
- **OpenType features:** `"ss01" on, "cv11" on`
- **Vai trò:** Primary typeface cho mọi thứ. Display headlines dùng 700/900 italic ở 70–79px cho năng lượng poster editorial; subheads ở 26–30px 600/700; body 16–18px 400; captions 14px 500. Display italic đậm là signature — hầu hết product site mặc định là upright, Playful nghiêng về độ nghiêng để tạo cá tính.

### Arial — System fallback dùng trong một số button và input context. Nên ưu tiên Inter; Arial chỉ xuất hiện như lớp degradation. · `--font-arial`
- **Thay thế:** Inter
- **Weights:** 400, 600, 700
- **Kích thước:** 13px, 15px, 16px, 20px
- **Line height:** 1.20–1.40
- **Letter spacing:** normal
- **Vai trò:** System fallback dùng trong một số button và input context. Nên ưu tiên Inter; Arial chỉ xuất hiện như lớp degradation.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|---------|-----------|-------------|----------------|-------|
| caption | 13px | 1.4 | -0.026px | `--text-caption` |
| body | 16px | 1.5 | -0.032px | `--text-body` |
| body-lg | 18px | 1.5 | -0.036px | `--text-body-lg` |
| subheading | 26px | 1.23 | -0.052px | `--text-subheading` |
| heading-sm | 30px | 1.2 | -0.06px | `--text-heading-sm` |
| display | 79px | 1 | -0.158px | `--text-display` |

## Tokens — Spacing & Shapes

**Density:** spacious

### Spacing Scale

| Tên | Giá trị | Token |
|-----|--------|-------|
| 4 | 4px | `--spacing-4` |
| 5 | 5px | `--spacing-5` |
| 8 | 8px | `--spacing-8` |
| 10 | 10px | `--spacing-10` |
| 12 | 12px | `--spacing-12` |
| 14 | 14px | `--spacing-14` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 25 | 25px | `--spacing-25` |
| 26 | 26px | `--spacing-26` |
| 30 | 30px | `--spacing-30` |
| 32 | 32px | `--spacing-32` |
| 36 | 36px | `--spacing-36` |
| 60 | 60px | `--spacing-60` |
| 180 | 180px | `--spacing-180` |

### Border Radius

| Element | Giá trị |
|---------|--------|
| tags | 999px |
| cards | 44px |
| images | 16px |
| inputs | 99px |
| buttons | 99px (pill) |

### Shadows

| Tên | Giá trị | Token |
|-----|--------|-------|
| xl | `rgba(0, 0, 0, 0.22) 0px 32px 80px 0px, rgba(0, 0, 0, 0.08) 0px 2px 8px 0px` | `--shadow-xl` |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 113px
- **Card padding:** 24px
- **Element gap:** 10-16px

## Components

### Pill CTA Button (Primary)
**Vai trò:** Nút hành động đã tô màu cho hành động quan trọng nhất trên màn hình

Nền Hot Magenta (#ff2e95), chữ trắng, Inter 600 ở 16px, border-radius 99px, padding 14px 24px. Đậm và tự tin — phần tử màu sắc duy nhất cạnh tranh với display type.

### Email Input Field
**Vai trò:** Thu thập email người dùng cho đăng ký waitlist

Nền Oat Canvas (#f6f2ee), border 1px Charcoal (#414040), border-radius 99px, white card container bao bọc input + button thành một pill thống nhất. Placeholder Inter 400 16px màu xám nhạt. Kết hợp trực quan với Pill CTA để tạo thành một composite inline duy nhất.

### Editorial Display Headline
**Vai trò:** Tuyên bố hero section

Inter 700 hoặc 900 italic, 70–79px, line-height 1.00, letter-spacing -0.002em, màu Ink Black (#000) hoặc Soft Ink (#111). Đặt trong một hoặc hai dòng, căn giữa. Đây là signature element — italic đậm ở tỷ lệ lớn tạo khoảnh khắc poster thay vì SaaS tagline.

### App Tile Card
**Vai trò:** Trưng bày mini-app examples theo hàng

border-radius 44px, bề mặt Paper White (#ffffff), đổ bóng khuếch tán sâu (0 32px 80px rgba(0,0,0,0.22)). Chứa illustration hoặc icon full-bleed. Kích thước khoảng 140–180px vuông, hiển thị trong hàng hơi nghiêng chồng lên nhau để gợi ý một xấp bài.

### FAQ Accordion Card
**Vai trò:** Câu hỏi/câu trả lời có thể mở rộng trong FAQ section

Bề mặt Paper White (#ffffff), border-radius 44px, border ấm hoặc không, soft shadow stack (0 32px 80px / 0 2px 8px rgba(0,0,0,0.22/0.08)). Text câu hỏi Inter 600 italic 16–18px, chevron icon màu Stone (#848383). Xếp chồng dọc với khoảng cách 12–16px giữa các card.

### Category Navigation Bar
**Vai trò:** Thanh cuộn ngang danh mục (Birthdays, Creativity, v.v.)

Nền Ink Black (#000), chữ trắng Inter 500 14–16px, cuộn ngang, các item cách nhau 24–32px. Không có border hoặc thay đổi nền rõ ràng trên thanh — nó đọc như một dải tối cắt ngang trang.

### Logo Wordmark
**Vai trò:** Nhận diện thương hiệu trong header và footer

Wordmark 'playful' cách điệu màu Hot Magenta (#ff2e95) ở Inter 700 italic, kết hợp với icon hình học nhỏ (rounded square mark). Hoạt động như cả thương hiệu và link, vì vậy màu magenta đảm nhận cả hai vai trò nhận diện và điều hướng.

### App Icon
**Vai trò:** Brand mark trong footer / final CTA section

Rounded square (bán kính 16–20px) container tối với pictogram Hot Magenta (#ff2e95) bên trong. Xuất hiện như một mark độc lập phía trên headline cuối cùng, lặp lại thành phần icon của logo.

### Gradient Highlight Section
**Vai trò:** Dải không khí giữa trang

Gradient radial hoặc linear lớn mềm từ Hot Magenta (#ff2e95) qua lavender-pink đến Oat Canvas (#f6f2ee). Không có cạnh xác định — hòa vào các section xung quanh. Chứa một headline italic duy nhất ở 30px với weight hỗn hợp ('Describe it. It's yours in minutes.').

### Hero Subtext
**Vai trò:** Đoạn văn hỗ trợ bên dưới display headline

Inter 400 16–18px, Slate (#0f172a), căn giữa, max-width ~560px. Yên tĩnh theo thiết kế — để headline chiếm trọng lượng thị giác.

### Two-Column FAQ Section Layout
**Vai trò:** Sắp xếp danh sách câu hỏi

Cột trái: label nhỏ 'Got questions?' ở Inter 500 + heading đậm 'Things people want to know'. Cột phải: FAQ accordion cards xếp chồng. Container max-width 1200px, section gap 64–80px phía trên và dưới.

## Do's and Don'ts

### Nên làm
- Chỉ dùng Hot Magenta (#ff2e95) cho primary CTA, logo, và link accents — không bao giờ dùng làm large surface fill, icon background, hoặc decorative wash dài hơn một section
- Đặt display headlines ở Inter 700/900 italic 70–79px, line-height 1.00, letter-spacing -0.002em — italic ở tỷ lệ lớn là chữ ký typography của thương hiệu
- Xây dựng card và tile với border-radius 44px và dual-layer shadow stack (0 32px 80px rgba(0,0,0,0.22) + 0 2px 8px rgba(0,0,0,0.08))
- Dùng Oat Canvas (#f6f2ee) làm page background cơ bản — không chuyển sang trắng tinh khiết cho bề mặt toàn trang
- Ghép mỗi email input với Pill CTA bên trong một white pill container duy nhất (99px radius) để đọc như một đơn vị composite
- Căn giữa hero composition — headline, subtext, và CTA xếp chồng dọc với section gap 113px rộng rãi giữa các dải chính
- Giữ icon dạng stroke trong Stone (#848383) ở weight 1.5–2px, không bao giờ tô màu

### Không nên làm
- Không dùng upright (non-italic) weight 700+ cho display headlines — độ nghiêng italic là thứ làm Playful mang cảm giác editorial thay vì corporate
- Không thêm accent colors bổ sung — xanh dương, xanh lá, cam, tím đều nằm ngoài hệ thống; Hot Magenta là giọng màu duy nhất
- Không dùng pure black (#000000) trên pure white (#ffffff) cho body text mà không kiểm tra — dùng #111 hoặc #0f172a để bớt chói trên nền ấm
- Không áp dụng sharp 0–4px radii cho card hoặc button — thang 16/44/99px là một phần của sự mềm mại thân thiện
- Không xếp chồng hơn hai type weights trên một màn hình — thường là 400 body + 700/900 italic display, với 500/600 cho subheads
- Không đặt white cards trực tiếp trên nền trắng — luôn đặt Paper White trên Oat Canvas để card đọc như được nâng lên
- Không dùng drop shadows trên text, button, hoặc icon — shadows chỉ dành cho card-level elevation

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|--------|-----|--------|---------|
| 0 | Oat Canvas | `#f6f2ee` | Base page background — màu kem ấm tạo sự khác biệt cho toàn bộ hệ thống so với cold-white SaaS |
| 1 | Paper White | `#ffffff` | Card và elevated panel surface nằm trên oat canvas |
| 2 | Soft Ink | `#111111` | Dark card variant và navigation bar background |
| 3 | Hot Magenta | `#ff2e95` | Accent surface — CTA fills, highlight wash zones |

## Elevation

- **FAQ card / app tile:** `rgba(0, 0, 0, 0.22) 0px 32px 80px 0px, rgba(0, 0, 0, 0.08) 0px 2px 8px 0px`

## Imagery

Ngôn ngữ hình ảnh thiên về illustration, không phải nhiếp ảnh. Trang web hiển thị app icons 3D cách điệu và linh vật nhân vật vui nhộn (bông cải xanh có mặt, blob hồng, ma xanh, sinh vật trắng) được render ở dạng 3D mềm mại với bề mặt tròn, kẹo và màu sắc bão hòa. Các illustration nằm bên trong app tiles hình vuông bo tròn (44px radius) hơi nghiêng và chồng lên nhau theo kiểu xếp hình quạt, gợi lên một xấp bài thay vì một grid cứng nhắc. Không có nhiếp ảnh xuất hiện ở bất cứ đâu — sự ấm áp đến từ cream canvas và phong cách illustration 3D, không phải từ lifestyle imagery. Icon trong UI là minimal line icons màu xám nhạt, không có màu sắc.

## Layout

Căn giữa, container max-width 1200px với section gap 113px rộng rãi giữa các dải dọc chính. Nhịp điệu trang xen kẽ giữa các section warm-cream yên tĩnh (hero, FAQ) và một section gradient hồng rực rỡ duy nhất ở giữa. Hero là một stack căn giữa: display headline → subtext → email+CTA pill composite → hàng app tiles nghiêng. Bên dưới gradient band, FAQ section sử dụng layout hai cột (label trái, accordion stack phải) trước khi quay lại CTA căn giữa cuối cùng. Một full-width black category navigation bar cắt ngang trang tại điểm chuyển tiếp giữa hero và gradient sections, cung cấp dải tối duy nhất. Mật độ tổng thể là spacious — các phần tử đơn lẻ thở thay vì nhồi nhét vào grid.

## Agent Prompt Guide

**Quick Color Reference**
- text: #111111
- background: #f6f2ee
- border: #e8e5e0
- accent: #ff2e95
- primary action: #ff2e95 (filled action)

**Example Component Prompts**
1. Tạo Primary Action Button: nền #ff2e95, text #000000, radius 9999px, pill padding nhỏ gọn. Dùng filled treatment này cho main CTA.

2. Tạo FAQ card: bề mặt #ffffff, border-radius 44px, shadow 0 32px 80px rgba(0,0,0,0.22) + 0 2px 8px rgba(0,0,0,0.08). Text câu hỏi Inter 600 italic 18px #111111, chevron icon màu #848383.

3. Tạo app tile: 160px vuông, border-radius 44px, bề mặt #ffffff, shadow stack giống FAQ card. Chứa illustration 3D-style căn giữa với màu sắc bão hòa.

4. Tạo gradient highlight section: full-width background pha trộn từ #ff2e95 qua lavender đến #f6f2ee (radial hoặc large soft linear). Headline ở 30px Inter italic 600, #111111, căn giữa — pha trộn regular và italic weight words để nhấn mạnh.

5. Tạo category nav bar: nền #000000, full width, Inter 500 14px chữ trắng, các item cách nhau 28px theo chiều ngang, padding dọc 12px 0.

## Shadow Language

Hệ thống dùng chính xác một shadow stack, chỉ áp dụng cho card và tile. Đó là two-layer diffused shadow: một shadow lớn mềm 80px-blur ở 22% opacity tạo độ 'nâng' sâu khỏi warm canvas, cộng với shadow 8px-blur chặt ở 8% opacity tạo định nghĩa cạnh tiếp xúc. Button, text, icon, và input không nhận shadow nào. Sự kiềm chế này — shadow như elevation marker, không phải trang trí — giữ cho interface cảm giác như giấy in được nâng lên khỏi bàn thay vì một sản phẩm glassmorphic.

## Similar Brands

- **Linear** — Cùng sự tự tin editorial trong display typography (large heavy weight, tight letter-spacing) và một vivid accent duy nhất trên nền monochrome — dù Linear dùng palette tối, display italic của Playful có cùng thái độ typography poster
- **Notion** — Warm off-white canvas (#f6f2ee gợi nhớ sắc kem nhẹ của Notion) với spacing rộng rãi và vocabulary component tối giản — sự thân thiện của surface treatment là điểm chung
- **Pitch** — Cùng large italic display headlines, cream/warm canvas, và pill-shaped primary CTA, với một chromatic accent duy nhất cho hành động — ngôn ngữ thiết kế sản phẩm editorial của Pitch là người anh em họ thẩm mỹ gần nhất
- **Framer** — Typographic statements đậm trên warm neutral surfaces, với một accent color đậm (xanh dương của Framer, magenta của Playful) — cả hai đều coi hero như một khoảnh khắc editorial thay vì danh sách tính năng
- **Vercel** — Whitespace rộng rãi, soft elevated cards, và kỷ luật của một accent color duy nhất làm tất cả công việc tạo màu — dù Vercel là dark-mode, sự hào phóng về không gian và triết lý single-accent về mặt cấu trúc là tương tự

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-hot-magenta: #ff2e95;
  --color-ink-black: #000000;
  --color-oat-canvas: #f6f2ee;
  --color-soft-ink: #111111;
  --color-slate: #0f172a;
  --color-charcoal: #414040;
  --color-stone: #848383;
  --color-paper-white: #ffffff;
  --color-warm-mist: #e8e5e0;
  --color-sand: #e2dcd6;
  --color-driftwood: #c3c1bf;
  --color-midnight: #202126;

  /* Typography — Font Families */
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.4;
  --tracking-caption: -0.026px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.032px;
  --text-body-lg: 18px;
  --leading-body-lg: 1.5;
  --tracking-body-lg: -0.036px;
  --text-subheading: 26px;
  --leading-subheading: 1.23;
  --tracking-subheading: -0.052px;
  --text-heading-sm: 30px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.06px;
  --text-display: 79px;
  --leading-display: 1;
  --tracking-display: -0.158px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-25: 25px;
  --spacing-26: 26px;
  --spacing-30: 30px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-60: 60px;
  --spacing-180: 180px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 113px;
  --card-padding: 24px;
  --element-gap: 10-16px;

  /* Border Radius */
  --radius-2xl: 16px;
  --radius-3xl: 44px;
  --radius-full: 99px;
  --radius-full-2: 999px;

  /* Named Radii */
  --radius-tags: 999px;
  --radius-cards: 44px;
  --radius-images: 16px;
  --radius-inputs: 99px;
  --radius-buttons: 99px (pill);

  /* Shadows */
  --shadow-xl: rgba(0, 0, 0, 0.22) 0px 32px 80px 0px, rgba(0, 0, 0, 0.08) 0px 2px 8px 0px;

  /* Surfaces */
  --surface-oat-canvas: #f6f2ee;
  --surface-paper-white: #ffffff;
  --surface-soft-ink: #111111;
  --surface-hot-magenta: #ff2e95;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-hot-magenta: #ff2e95;
  --color-ink-black: #000000;
  --color-oat-canvas: #f6f2ee;
  --color-soft-ink: #111111;
  --color-slate: #0f172a;
  --color-charcoal: #414040;
  --color-stone: #848383;
  --color-paper-white: #ffffff;
  --color-warm-mist: #e8e5e0;
  --color-sand: #e2dcd6;
  --color-driftwood: #c3c1bf;
  --color-midnight: #202126;

  /* Typography */
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.4;
  --tracking-caption: -0.026px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.032px;
  --text-body-lg: 18px;
  --leading-body-lg: 1.5;
  --tracking-body-lg: -0.036px;
  --text-subheading: 26px;
  --leading-subheading: 1.23;
  --tracking-subheading: -0.052px;
  --text-heading-sm: 30px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.06px;
  --text-display: 79px;
  --leading-display: 1;
  --tracking-display: -0.158px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-25: 25px;
  --spacing-26: 26px;
  --spacing-30: 30px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-60: 60px;
  --spacing-180: 180px;

  /* Border Radius */
  --radius-2xl: 16px;
  --radius-3xl: 44px;
  --radius-full: 99px;
  --radius-full-2: 999px;

  /* Shadows */
  --shadow-xl: rgba(0, 0, 0, 0.22) 0px 32px 80px 0px, rgba(0, 0, 0, 0.08) 0px 2px 8px 0px;
}
```