Play

# Play — Style Reference
> High-contrast typographic canvas

**Theme:** light

Play.studio employs a stark, high-contrast aesthetic with a minimalist canvas and precisely placed typographic elements. The design emphasizes sharp edges, though rounded corners appear selectively on content blocks, creating a subtle tension. A singular, vivid violet accent color provides strategic visual punctuation against a largely monochrome text and background palette, highlighting interactivity and specific content categories. The overall presentation is sparse, prioritizing clear typography and a clean data presentation to convey information directly.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas White | `#ffffff` | `--color-canvas-white` | Page backgrounds, hero backgrounds, primary surface for content |
| Ink Black | `#000000` | `--color-ink-black` | Primary text, headers, default icon fills, default borders |
| Storm Gray | `#808080` | `--color-storm-gray` | Muted text for secondary information, card borders |
| Vivid Violet | `#4600ff` | `--color-vivid-violet` | Accent for interactive links, outlined button borders, key headings, active categories – a powerful contrast against the monochrome |

## Tokens — Typography

### Times — Decorative and occasional body text, used sparingly for specific small information due to its limited size range in this system. · `--font-times`
- **Substitute:** Times New Roman
- **Weights:** 400, 700
- **Sizes:** 10px
- **Line height:** 1.00
- **Role:** Decorative and occasional body text, used sparingly for specific small information due to its limited size range in this system.

### HelveticaNow — The primary typeface for all headings, body copy, and interactive elements. Its variable weights emphasize a modern, clear voice. The lighter weights (200, 300) for large headings create an airy, architectural feel, distinct from traditional bold branding. · `--font-helveticanow`
- **Substitute:** Helvetica Neue
- **Weights:** 200, 300
- **Sizes:** 18px, 24px, 36px, 160px
- **Line height:** 0.80, 1.20, 1.40
- **Letter spacing:** -0.0700em at 160px, -0.0200em at 36px
- **Role:** The primary typeface for all headings, body copy, and interactive elements. Its variable weights emphasize a modern, clear voice. The lighter weights (200, 300) for large headings create an airy, architectural feel, distinct from traditional bold branding.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| body | 18px | 1.4 | — | `--text-body` |
| subheading | 24px | 1.2 | — | `--text-subheading` |
| heading | 36px | 1.2 | -0.72px | `--text-heading` |
| display | 160px | 0.8 | -11.2px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 12 | 12px | `--spacing-12` |
| 20 | 20px | `--spacing-20` |
| 40 | 40px | `--spacing-40` |
| 100 | 100px | `--spacing-100` |
| 164 | 164px | `--spacing-164` |

### Border Radius

| Element | Value |
|---------|-------|
| cards | 20px |
| default | 0px |
| contentBlocks | 20px |

### Layout

- **Section gap:** 118px
- **Card padding:** 40px
- **Element gap:** 20px

## Components

### Ghost Text Button
**Role:** Interactive elements for navigation and content filtering.

Transparent background with Ink Black text (#000000). No border, no radius, but uses 40px right padding for visual separation.

### Text Link - Vivid Violet
**Role:** Primary Call to Action for internal navigation or category selection.

Transparent background, Vivid Violet text (#4600ff), with a Vivid Violet (#4600ff) border-bottom interaction, maintaining a crisp, flat aesthetic. No radius. 40px right padding.

### Content Card - Sharp
**Role:** Container for informational blocks without visual hierarchy.

Transparent background, sharp 0px radius, no shadow, no padding.

### Content Card - Rounded
**Role:** Container for visual content like news items or project previews.

Transparent background, 20px border-radius, no shadow, no padding. These cards frequently host imagery or media.

## Do's and Don'ts

### Do
- Prioritize Ink Black (#000000) for all primary text and Canvas White (#ffffff) for backgrounds to maintain high contrast.
- Use HelveticaNow weight 300 for large headings to achieve an authoritative yet understated presence.
- Employ Vivid Violet (#4600ff) exclusively for interactive elements like links and buttons, or for significant categorical labels.
- Apply 20px border-radius to visual content cards while keeping most structural elements sharp (0px radius).
- Maintain generous section gaps of 118px to ensure ample white space and clear content separation.
- Utilize 40px right padding on text buttons and links to create a consistent interactive zone baseline.
- Incorporate Storm Gray (#808080) for secondary text or subtle borders when full contrast is not required.

### Don't
- Do not introduce additional saturated colors; Vivid Violet (#4600ff) is the sole chromatic accent.
- Avoid heavy shadows or gradients; rely on contrast and white space for visual hierarchy.
- Do not use Times for prominent display text; its role is limited to small, specific informational elements.
- Do not deviate from the established type scale and letter spacing for HelveticaNow; precise typography is key.
- Do not add unnecessary borders or backgrounds to elements that are not explicitly defined as cards or interactive components.
- Avoid centered text blocks for body content; prefer left-aligned text for readability.
- Do not use small font sizes (e.g., 10px) for primary calls to action or critical information.

## Imagery

This system primarily uses product-focused photography and abstract graphics contained within distinct content cards. Photography is often full-bleed within the card, cropped tightly and used to showcase the product or subject without lifestyle context. Illustrations appear to be flat, possibly abstract or geometric, serving a decorative atmosphere rather than technical explanation. Icons are minimal, outlined, and monochromatic (Ink Black or Vivid Violet). Imagery density is light, used to break up text-dominant sections, existing as isolated visual statements rather than overlapping or dynamic compositions.

## Layout

The page maintains a centered, max-width contained layout, with no specific max-width detected but a strong sense of a confined content area. The hero section is characterized by a prominent centered headline over a white background, followed by sections with consistent vertical spacing of 118px. Content often alternates between text and visual blocks, incorporating a grid of 3-column rounded cards for displaying project previews or news items. The navigation is a minimalist top bar with text links, devoid of heavy interactive elements, reflecting the sparse UI.

## Agent Prompt Guide

Quick Color Reference:
text: #000000
background: #ffffff
border: #000000
accent: #4600ff
primary action: #4600ff (outlined action border)

Example Component Prompts:
1. Create an Outlined Primary Action: Transparent background, #4600ff border and text, 9999px radius, compact pill padding. Use it for the main CTA instead of a filled button.
2. Create a content card for a project preview: Rounded Content Card (20px radius, transparent background). Inside, place "New Work LangChain" (HelveticaNow, 18px, weight 400, #000000) below a square image.
3. Create a navigation link: Ghost Text Button with text "Work" (HelveticaNow, 18px, weight 400, #000000, 40px right padding). Ensure it has no border or background.
4. Create a featured category link: Text Link - Vivid Violet with text "AI and technology" (HelveticaNow, 18px, weight 400, #4600ff, 40px right padding). Its hover state should show a Vivid Violet (#4600ff) bottom border.

## Similar Brands

- **Stripe** — Monochromatic base palette with a single vibrant accent color for interaction and highlighting.
- **Linear** — Emphasis on precise typography, minimal UI, and a high-contrast text-heavy presentation.
- **Figma** — Clean white canvas, emphasis on clarity, and modern, accessible sans-serif typography.
- **Pitch** — Bold headlines using light weights for large sizes, paired with a simple, direct layout.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-canvas-white: #ffffff;
  --color-ink-black: #000000;
  --color-storm-gray: #808080;
  --color-vivid-violet: #4600ff;

  /* Typography — Font Families */
  --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-helveticanow: 'HelveticaNow', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-body: 18px;
  --leading-body: 1.4;
  --text-subheading: 24px;
  --leading-subheading: 1.2;
  --text-heading: 36px;
  --leading-heading: 1.2;
  --tracking-heading: -0.72px;
  --text-display: 160px;
  --leading-display: 0.8;
  --tracking-display: -11.2px;

  /* Typography — Weights */
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-12: 12px;
  --spacing-20: 20px;
  --spacing-40: 40px;
  --spacing-100: 100px;
  --spacing-164: 164px;

  /* Layout */
  --section-gap: 118px;
  --card-padding: 40px;
  --element-gap: 20px;

  /* Border Radius */
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;

  /* Named Radii */
  --radius-cards: 20px;
  --radius-default: 0px;
  --radius-contentblocks: 20px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-canvas-white: #ffffff;
  --color-ink-black: #000000;
  --color-storm-gray: #808080;
  --color-vivid-violet: #4600ff;

  /* Typography */
  --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-helveticanow: 'HelveticaNow', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-body: 18px;
  --leading-body: 1.4;
  --text-subheading: 24px;
  --leading-subheading: 1.2;
  --text-heading: 36px;
  --leading-heading: 1.2;
  --tracking-heading: -0.72px;
  --text-display: 160px;
  --leading-display: 0.8;
  --tracking-display: -11.2px;

  /* Spacing */
  --spacing-12: 12px;
  --spacing-20: 20px;
  --spacing-40: 40px;
  --spacing-100: 100px;
  --spacing-164: 164px;

  /* Border Radius */
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
}
```