---
name: Playground
description: "This site is a great example of a minimal, focused SaaS design where the interface recedes to let the user's content (in this case, AI-generated images) take center stage."
version: alpha

colors:
  background: "#F1F0EF"
  primary: "#1D1C1B"
  secondary: "#494541"
  tertiary: "#007AFF"
  neutral: "#8A837B"
  bg-soft: "#E8E6E3"
  line: "rgba(228,228,231,1.0)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 36px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-0.72px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "-0.32px"
  caption:
    fontFamily: humanist-sans
    fontSize: 13px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "-0.32px"

rounded:
  sm: 8px
  md: 12px
  lg: 16px
  pill: 9999px

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

---

## Overview

A minimal, clean interface for an AI image generation tool with a focus on ease of use.

*An empty canvas with a clear starting point*

## Colors

A neutral, light-gray canvas that lets the content or generated images take center stage, with a single vibrant blue accent for primary actions.

- **Background (`#F1F0EF`)** — uses `bg` token
- **Primary text (`#1D1C1B`)** — uses `ink` token
- **Secondary text (`#494541`)** — uses `ink-soft` token
- **Accent (`#007AFF`)** — uses `accent` token
- **Muted (`#8A837B`)** — uses `muted` token
- **Borders (`rgba(228,228,231,1.0)`)** — uses `line` token

## Typography

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

- Use tight negative letter-spacing for all text sizes to maintain a modern, compact feel.
- Prioritize medium weight (500) for prominent text and regular (400) for body copy.

## Layout

A centered logo with horizontal navigation on the right, featuring text links and a prominent rounded CTA button.

*Rhythm:* A 4px base grid with a generous 24px gutter between major components.

## Elevation & Depth

- rgba(0,0,0,0.05) 0px 2px 16px 0px
- rgba(0,0,0,0.08) 0px 1px 4px 0px
- rgba(0,0,0,0.12) 0px 4px 24px 0px
- rgba(0,0,0,0.14) 0px 12px 36px 0px
- rgba(0,0,0,0.2) 0px 3px 12px 0px
- Borders: 1px solid rgba(228,228,231,1.0)

## Shapes

- `sm`: 8px
- `md`: 12px
- `lg`: 16px
- `pill`: 9999px

## Components

- **button:** Rounded pill-shaped buttons with high-contrast background colors (vibrant blue for primary, light gray/white for secondary) and white text.
- **card:** Cards with large border radii (16px, 24px) and subtle box shadows on a slightly lighter background.
- **hero:** A full-viewport area with a subtle radial gradient background, designed to showcase large imagery.

## Do's and Don'ts

**Don't:**
- Don't use dark backgrounds — screenshot shows a predominantly light gray and white palette.
- Don't use decorative or serif fonts — screenshot shows clean, geometric sans-serif typography.
- Don't use sharp corners — screenshot shows generous rounding on all elements (8px to 9999px).
- Don't use multiple bright accent colors — screenshot shows a single dominant vibrant blue accent.
- Don't use drop shadows that are too harsh — screenshot shows soft, subtle shadows with low opacity.
- Don't use excessive spacing or padding — screenshot shows a compact, tightly spaced layout.

---

## System Prompt (paste into AI agent)

```
This is a minimal, clean AI image generation tool interface. The design DNA is characterized by a light gray (#F1F0EF) canvas, a single vibrant blue accent (#007AFF), and clean, geometric sans-serif typography. The layout is highly structured with a centered logo and horizontal navigation. Critical donts: don't use dark mode or dark backgrounds; don't use decorative serif fonts; don't use sharp, unrounded corners; don't use multiple competing accent colors; don't use harsh, high-contrast shadows; and don't use overly loose spacing. The voice is direct and functional, focusing on the tool's utility without distraction.
```