Playdate

Palette

Typography

Headings

Roobert

Body

Roobert

Free swap

Roobert (Displaay) is commercial. Use Figtree or Hanken Grotesk at 800 for headings and 400/700 for body. Plus Jakarta Sans is a close second choice.

There is one family throughout. The hero statement is 57px at weight 700 with a 1.1 line height, centered and white on grey, and one word ('handheld') is tinted lighter grey for emphasis. Section headings ('The System.', 'The Design.') are 68px at weight 800 with a 1.0 line height and default tracking. They always end with a period, which makes them read like confident little announcements. The giant stacked 'play / date' wordmark runs about 250px per line at weight 800 with negative leading, filled with a yellow-to-amber gradient. Body copy is about 26px at regular weight with a roughly 1.4 line height, in warm charcoal. Key claims are set in 700 bold inline, and a few phrases are underlined links. Nav labels are about 20px semibold, each paired with a small pictogram. Nothing is uppercase except the sticker graphics.

Measured h1: 0px / 800 / 0em · body 57px

Signature moves

• Make the product's own colour the page's colour: a full-bleed #ffc600 band matches the yellow device so photos melt into the background.
• Stage the hero render on flat cool grey with a radial spotlight, so the saturated hardware pops like a museum object.
• End every section heading with a period and write body copy as Q&A banter ('Is it a gimmick? Nah.'), with one bolded key claim per paragraph.
• Use one tactile, glossy purple pill CTA with layered inset shadows as the only skeuomorphic element on an otherwise flat page.
• Slap on rotated sticker badges and speech-bubble asides so the page feels hand-assembled and jokey.
• Show the content library as a dense grid of strictly 2-tone pixel-art tiles, letting a constraint (1-bit screen) become a visual identity.

Layout

The design runs on a 1100px content width, but text sits in a narrow column of about 560 to 780px, left-aligned and offset to the left of center. Large cut-out images (an exploded device, a hand holding the console, a crank render) overlap into the right side and bleed off the edge. The page is built from three full-bleed colour bands: a grey hero with a radial spotlight behind the render, a long yellow narrative band, and a light-grey #efefef catalog band. Whitespace is generous and vertical. Each feature gets a heading, two short paragraphs and one big image, which gives a slow, scroll-to-reveal rhythm. The game wall is a tight 3-column grid of 2:1 tiles with about 8px gutters. The catalog band ends in horizontally scrolling rows of colourful cover art that bleed off both edges.

Components

Nav

This is a transparent bar over the hero. The lowercase 'playdate' wordmark sits on the left, and the right side holds white semibold links, each prefixed with a tiny custom pictogram (sparkle, grid, hand, question bubble). 'Shop' is the only filled element: a purple pill with a bag icon.

Primary CTA

'Shop Now!!' is a fat purple pill with about a 34px radius and white 800-weight text. A layered glossy shadow makes it feel like a physical candy button: an inset white highlight at the top, an inset dark shade at the bottom, and a soft 25px inner glow, plus a 2.5px/5px drop shadow.

Secondary CTA

'Grab some games!' is a black pill with white bold text and a circular down-arrow icon. It sits on the light catalog band.

Hero

A huge, slightly tilted 3D render of the console, showing a game title on its screen, sits center stage under a soft radial light on flat grey. A rotated black 'Season 3 GET IT NOW' sticker with orange striped numerals is slapped on at the top-left. Below the render come a three-line white statement, the giant gradient wordmark and the purple CTA.

Speech bubble

'Wait! No spoilers, please!' is set in a white rounded rectangle with a sharp tail. It works as an inline aside before the game grid and adds the brand's conversational aside voice.

Game tile grid

Tiles are 2:1 rectangles with about 2.85px radii and a hairline dark edge. They show only 1-bit title art in charcoal #312f28 and LCD grey #b1aea7, and the monochrome reads as a deliberate texture against the yellow.

Catalog carousel

A black book-shaped 'catalog' logo carries yellow sparkles. Below it, staggered rows of full-colour cover cards with small radii scroll horizontally and are cropped at the viewport edges.

Product UI

The interface appears only through the device's screen in photoreal 3D renders and hand-held photography: a 1-bit memory LCD with charcoal pixels on warm grey, dithered illustrations and pixel fonts. Game title cards reuse that exact two-tone palette at a 2:1 aspect ratio. The hardware itself is drawn as a flat yellow body with rounded corners, chrome screws, round A/B buttons and a metal crank. Any app UI should borrow this: monochrome #312f28 on #b1aea7, chunky pixel type, thin rules, no gradients inside the screen, and colour reserved for the chrome around it.