---
name: CodeSandbox
description: "The site's use of a single, extremely high-chroma accent color against a dark canvas creates a modern, high-performance feel typical of premium developer tools."
version: alpha

colors:
  background: "#0e0e0e"
  primary: "#f0f0f0"
  secondary: "#a3a3a3"
  tertiary: "#d6fb41"
  neutral: "#858585"
  bg-soft: "#161616"
  bg-quiet: "#1d1d1d"
  muted-soft: "#666666"
  line: "rgba(52, 52, 52, 1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-2.8px"
  title:
    fontFamily: grotesque-sans
    fontSize: 32px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-0.7px"
  subtitle:
    fontFamily: grotesque-sans
    fontSize: 22.4px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "-0.56px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-0.2px"

rounded:
  sm: 4px
  md: 6px
  lg: 10px
  pill: 9999px

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

---

## Overview

A developer-focused platform for programmatically spinning up isolated sandboxes.

*The dark mode terminal of the cloud*

## Colors

High contrast neon accent against deep dark neutral backgrounds

- **Background (`#0e0e0e`)** — uses `bg` token
- **Primary text (`#f0f0f0`)** — uses `ink` token
- **Secondary text (`#a3a3a3`)** — uses `ink-soft` token
- **Accent (`#d6fb41`)** — uses `accent` token
- **Muted (`#858585`)** — uses `muted` token
- **Borders (`rgba(52, 52, 52, 1)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** grotesque-sans
- **Mono:** monospace

- Use tight negative letter spacing for large display headlines
- Maintain high contrast between text and background

## Layout

Single column centered layout with alternating dark and neon background sections

*Rhythm:* 4px base grid

## Elevation & Depth

- Borders: Solid 1px borders using #252525

## Shapes

- `sm`: 4px
- `md`: 6px
- `lg`: 10px
- `pill`: 9999px

## Components

- **button:** Primary buttons use the accent color background (#d6fb41) with dark text (#0e0e0e) and pill shapes; Secondary buttons are outlined
- **card:** Feature cards on neon backgrounds with black text, no visible borders or shadows
- **chip:** Small accent-colored badges for labels like 'New'
- **input:** Standard text inputs with dark backgrounds and subtle borders
- **hero:** Massive typography headline on a dark background with supporting subtext and primary CTA buttons

## Do's and Don'ts

**Don't:**
- Don't use muted, low-contrast accent colors — screenshot shows a highly saturated neon yellow-green (#d6fb41) as the primary accent
- Don't use serif fonts for headings — screenshot shows a clean, modern grotesque-sans font family
- Don't use excessive shadows or gradients — screenshot shows flat design with minimal elevation
- Don't use bright white backgrounds for the main interface — screenshot shows a predominantly dark background (#0e0e0e)
- Don't use wide letter spacing for headlines — screenshot shows tight, negative letter spacing (-2.8px) for display text
- Don't use multiple accent colors — screenshot shows a strict two-tone palette of dark neutrals and a single neon accent
- Don't use rounded corners on all elements — screenshot shows a mix of sharp edges and subtle rounding (up to 10px)

---

## System Prompt (paste into AI agent)

```
This is a developer-focused tool website for a cloud-based code execution platform. The design uses a dark mode aesthetic with a near-black background (#0e0e0e) and a single, high-chroma neon yellow-green accent (#d6fb41). Typography is a clean grotesque-sans font category with tight negative letter spacing for massive display headlines. Critical donts: avoid low-contrast accent colors, don't use serif fonts, avoid excessive shadows or gradients, don't use bright white backgrounds, avoid wide letter spacing for headlines, and don't introduce multiple accent colors. The layout is a centered single-column structure with alternating background sections to create visual hierarchy.
```