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

# Playdate · Design System

> A vivid stage for a pocket-sized game console

**Theme:** light · **Industry:** consumer-electronics · **Source:** https://play.date/ · **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._

Playdate’s homepage pairs a gray product stage and striking yellow hardware with a sequence of colorful, clearly differentiated sections. Oversized Roobert headlines, compact supporting copy, and close product imagery make the page feel playful while keeping its product story easy to scan.

## North star

Let the handheld and the page’s bold color bands do the talking, with clear Roobert hierarchy and compact supporting content.

## Overview

The page uses color as its primary organizing device: a muted slate-gray hero sets off the yellow handheld, followed by a large yellow feature band, a pale catalog section, more yellow maker content, a teal education block, a violet purchase section, and a charcoal specs footer. Roobert carries nearly all of the interface, from heavy display headlines to approachable body copy; the bold weights make short headings readable against saturated fields. The centered hero gives the product room to lead, while later content uses a constrained reading column, occasional three-column game imagery, and alternating text-and-image compositions. Product photos, exploded hardware views, game screenshots, and interface captures supply texture without changing the underlying graphic system. Spacing feels comfortable and section-led rather than dense. Rounded pill buttons and small, crisp cards soften the strong blocks of color; borders and shadows are used sparingly, mostly for card definition and tactile product controls.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Charcoal | `#312f27` | `--color-warm-charcoal` | neutral | Muted copy, dark headings, and thin outlines around game cards. |
| Playdate Yellow | `#ffc500` | `--color-playdate-yellow` | brand | Signature device color and dominant feature-section background. |
| Slate Stage | `#788086` | `--color-slate-stage` | surface | Hero canvas behind the yellow console and white navigation. |
| Soft Marigold | `#ffe280` | `--color-soft-marigold` | accent | Lighter yellow accent visible in gradients and product-related details. |
| Paper White | `#ffffff` | `--color-paper-white` | neutral | Hero navigation and selected copy or buttons on dark, saturated backgrounds. |
| Electric Violet | `#7700ff` | `--color-electric-violet` | brand | Shop CTA and the large purchase-and-cover section background. |
| Warm Card | `#e9e4d9` | `--color-warm-card` | surface | Game metadata cards, paired with dark text and a fine border. |
| True Black | `#000000` | `--color-true-black` | neutral | High-contrast text, device screen details, and artwork within game imagery. |
| Catalog Mist | `#efefef` | `--color-catalog-mist` | surface | Light catalog band separating game discovery from yellow maker content. |
| Violet Glow | `#9400ff` | `--color-violet-glow` | accent | Upper stop in the measured violet CTA gradient; a button effect, not a page band. |
| Deep Violet | `#5c00ff` | `--color-deep-violet` | accent | Lower stop in the measured violet CTA gradient; confined to button treatment. |
| Education Teal | `#21c6a9` | `--color-education-teal` | semantic | Distinct education section background, framing black and dark-teal branding. |
| Audio Orange | `#ff3e00` | `--color-audio-orange` | semantic | Measured background of a small audio-control button, not a defining brand section color. |
| Spec Charcoal | `#212223` | `--color-spec-charcoal` | surface | Dark specs footer behind white technical copy and yellow icon accents. |

### Semantic aliases

`--color-canvas` → `#ffc500` (Playdate Yellow) · `--color-surface` → `#788086` (Slate Stage) · `--color-surface-2` → `#e9e4d9` (Warm Card) · `--color-surface-3` → `#efefef` (Catalog Mist) · `--color-surface-4` → `#212223` (Spec Charcoal) · `--color-text` → `#000000` (True Black) · `--color-text-muted` → `#312f27` (Warm Charcoal) · `--color-text-subtle` → `#ffffff` (Paper White) · `--color-border` → `#312f27` (Warm Charcoal) · `--color-accent` → `#ffc500` (Playdate Yellow) · `--color-accent-2` → `#ffe280` (Soft Marigold) · `--color-accent-3` → `#7700ff` (Electric Violet) · `--color-on-accent` → `#ffffff` (Paper White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffc500` | 13.24:1 | AAA |
| `#000000` | `#788086` | 5.23:1 | AA |
| `#000000` | `#e9e4d9` | 16.56:1 | AAA |
| `#000000` | `#efefef` | 18.26:1 | AAA |
| `#312f27` | `#ffc500` | 8.45:1 | AAA |
| `#312f27` | `#788086` | 3.34:1 | AA-large |
| `#312f27` | `#e9e4d9` | 10.57:1 | AAA |
| `#312f27` | `#efefef` | 11.66:1 | AAA |
| `#ffffff` | `#ffc500` | 1.59:1 | fail |
| `#ffffff` | `#788086` | 4.01:1 | AA-large |

### Gradients

- `url("https://play.date/static/images/nowebgl-demo2.ffd651921de6.png"), radial-gradient(rgba(255, 255, 255, 0.5) 0px, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%)`
- `linear-gradient(rgb(148, 0, 255), rgb(92, 0, 255))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Roobert | `--font-body` | webfont | 400, 700, 800 | Primary interface type for headlines, body copy, navigation, links, and buttons. | Inter |

- **Roobert:** Use bold and extra-bold for compact, prominent headings; regular for readable short paragraphs. Keep tracking neutral.

### Type scale — Perfect Fourth (ratio ≈ 1.299, base 18.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 68.5px | 800 | 1 | 0 | — | Roobert | Oversized Playdate wordmark-style hero display. |
| h1 | 57px | 700 | 1.1 | 0 | — | Roobert | Main hero statement and primary page headline. |
| h2 | 51.5px | 800 | normal | 0 | — | Roobert | Major section headings, including features and catalog. |
| h3 | 34px | 700 | normal | 0 | — | Roobert | Feature subsection titles and secondary content headings. |
| h4 | 33.5px | 700 | normal | 0 | — | Roobert | Smaller subsection or product-content headings. |
| body | 18.5px | 400 | normal | 0 | — | Roobert | Feature explanations, product details, and supporting paragraphs. |
| caption | 13.5px | 400 | normal | 0 | — | Arial | Small utility labels and media captions. |
| button | 28.5px | 400 | normal | 0 | — | Roobert | Large shop CTA and prominent action labels. |
| nav | 22px | 700 | normal | -0.007em | — | Roobert | Top-level header navigation links. |
| link | 34px | 700 | normal | 0 | — | Roobert | Prominent inline links and game-discovery calls to action. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 3, 5, 9, 10, 11, 12, 13, 15, 19, 20, 24, 29, 30, 40, 50, 60 px.
- Section rhythm 57px · element gap 3px · card padding 15px · max content width 800px.

The first viewport centers the handheld within a full-width slate stage, with a compact header aligned across the top. Below, full-width color bands create a clear vertical rhythm. Main copy is held to a measured 800px page maximum, while the feature section uses a three-column structure and game art can spread more broadly. Most text is left-aligned; the hero and selected promotional moments are centered. Comfortable section gaps give each color block a distinct pause, while cards and explanatory content remain relatively compact.

## Shape & elevation

- Radius: button `9999px` · input `9999px` · card `2px` · nav `9999px` · xs `2px` · sm `3px` · pill `9999px`
- Shadow `inset` (button): `rgba(255, 255, 255, 0.6) 0px 2.5365px 2.5365px 0px inset, rgba(0, 0, 0, 0.5) 0px -2.5365px 4.0584px 0px inset, rgba(255, 255, 255, 0.3) 0px -0.5073px 25.365px 0px inset, rgba(0, 0, 0, 0.4) 0px 2.5365p`
- Motion: standard transition `0.25s ease-in-out` on interactive elements.

Most sections are flat, uninterrupted color fields rather than layered panels. Game cards use a thin dark outline and restrained corner rounding. The shop CTA has a tactile inset shadow, while product photos create their own depth; avoid adding broad ambient shadows or unnecessary borders.

## Imagery

The console is the central visual anchor, shown in crisp product photography against a plain slate hero. The page mixes close product views, exploded hardware imagery, in-hand photography, game-screen captures, and developer interface screenshots. Game artwork appears as a grid of small, varied black-and-white thumbnails. Imagery stays tightly cropped and product-focused; illustrations and screens add personality within the system rather than defining its palette.

## Components

### Header navigation

White Playdate wordmark and compact white icon-and-label links sit over the slate hero; the Shop action is a violet pill.

### Hero product stage

Large yellow console imagery sits centered on the slate canvas, followed by bold white product copy and the oversized yellow brand wordmark.

### Shop CTA

A prominent white-label violet pill with a measured violet gradient and inset tactile shadow.

### Feature and game cards

Yellow feature content mixes copy with product visuals; the game listings use warm pale cards, dark text, fine outlines, and compact artwork.

### Catalog band

Pale gray section centers a black Catalog mark, short explanatory copy, a dark pill link, and a horizontal strip of game imagery.

### Purchase band

Violet background groups the price, console and cover imagery, white supporting copy, and contrasting yellow purchase buttons.

### Specs footer

Charcoal technical section organizes hardware labels and values into columns, with white text, yellow icons, and product diagrams.

### Measured component styles

- **Primary button** (“Shop Now!!”): background #7700ff · text #ffffff · radius 152.19px · padding 5.1px 25.4px 15.2px 25.4px · 700 50.73px Roobert · shadow rgba(255, 255, 255, 0.6) 0px 2.5365px 2.5365px 0px inset, rgba(0, 0, 0, 0.5) 0px
- **Secondary button** (“Play game audio”): background #ff3e00 · radius 0px · padding 1px 6px · 400 13.3333px Arial
- **Link** (“Teenage Engineering”): transparent background · text #312f27 · radius 0px · padding 0px · 400 28.5px Roobert
- **Input**: transparent background · border 1px solid · radius 37.3065px · padding 2.3px 4.7px 2.3px 11.7px · 400 18.6532px Arial
- **Card** (“Casual Birder Diego Garcia, Music by Max”): background #e9e4d9 · text #312f27 · border 1px solid #312f27 · radius 1.8525px · padding 13px 18.5px 9.3px 18.5px · 400 18.525px Roobert
- **Navigation item** (“Shop”): transparent background · text #ffffff · radius 0px · padding 0px · 700 21.945px Roobert

## Do

- Use the slate hero to make the yellow console the first focal point.
- Give each major content block one strong measured background color.
- Use Roobert-like bold typography for short section headings.
- Keep supporting copy compact and readable beside relevant imagery.
- Use pill-shaped treatments for prominent actions and navigation.
- Let game and product imagery provide detail within the simple color system.

## Don't

- Do not add unmeasured brand colors or invent hex values.
- Do not put every section on a white card.
- Do not let decoration overwhelm the console photography.
- Do not use dense, uniform grids for all content.
- Do not add heavy drop shadows to otherwise flat sections.
- Do not turn product artwork colors into the site-wide palette.

## Agent prompt

Build a new Playdate-style page with color-led storytelling and a clear hardware focal point. Start with a Slate Stage (#788086) hero, white navigation, and prominent yellow product imagery; use Playdate Yellow (#ffc500) for the main product and feature bands. Separate content with Catalog Mist (#efefef), Education Teal (#21c6a9), Electric Violet (#7700ff), and Spec Charcoal (#212223), using these only where the page needs a deliberate section change. Use Roobert or a close sans-serif substitute such as Inter, with heavy, compact headings and regular short-form copy. Favor centered product photography, alternating text and imagery, and concise card grids. Keep buttons pill-shaped, reserve strong shadows for tactile controls, and use Warm Charcoal (#312f27) for restrained outlines and muted text. Do not introduce colors outside the measured palette.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width slate stage with top navigation and centered product presentation. | Primary shop action, Product-first introduction | White navigation, Yellow console imagery, Violet pill CTA |
| 2 | feature-grid | Large yellow band with feature copy, product imagery, and a three-column game area. | Progressive product explanation, Game discovery | Bold dark headings, Product photography, Outlined game cards |
| 3 | gallery | Single-column pale section with centered branding and a wide game-image strip. | Browse game catalog, Explore more games | Black Catalog mark, Dark pill link, Horizontal artwork strip |
| 4 | feature-split | Yellow band with two vertically sequenced content stories and interface imagery. | Developer site entry, Mirror app discovery | Dark section headings, Inline links, Software screenshots |
| 5 | feature-split | Single-column teal section with centered brand treatment and concise supporting content. | Education information, Learn more action | Black-and-teal wordmark, Dark copy, Pill action |
| 6 | pricing | Violet purchase band with product details and cover content stacked into a single column. | Price visibility, Separate hardware and accessory actions | White headings and copy, Yellow purchase buttons, Product imagery |
| 7 | stats | Dark charcoal footer with specification groups arranged across three columns. | Quick spec scanning, Product and support links | White technical text, Yellow icons, Device diagrams |

## Source CSS custom properties (selected)

```css
--brand-yellow: color(display-p3 1 0.784 0.2);
--page-bg: color(display-p3 0.478 0.502 0.522);
--page-bg-inverted: color(display-p3 0 0 0);
--card-bg: color(display-p3 1 1 1);
--form-bg: color(display-p3 1 1 1);
--text: color(display-p3 1 1 1);
--text-inverted: color(display-p3 1 1 1);
--accent: color(display-p3 1 0.784 0.2);
--card-border: color(display-p3 1 1 1);
--input-bg: color(display-p3 0.478 0.502 0.522);
--input-text: color(display-p3 1 1 1);
--button-bg: color(display-p3 1 1 1);
--button-text: color(display-p3 1 1 1);
--cc-font-family: "Roobert", Helvetica, sans-serif;
```

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