# CodeSandbox · Design system migration spec

> Source: https://codesandbox.io  ·  Curated by OpenDesign  ·  en

> 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.

## 1. Identity DNA

CodeSandbox presents itself as the dark mode terminal of the cloud—a tool whose visual language is born from the very environment it inhabits. The system's identity is engineered for scale, with every component built to support the infrastructure of programmatically isolated sandboxes.

**One-liner:** A developer-focused platform for programmatically spinning up isolated sandboxes.
**Keywords:** development · sandbox · scale · code · infrastructure
**Analogy:** The dark mode terminal of the cloud

## 2. Color

The palette is a study in high contrast, defined by a near-black neutral field and a single, vibrant neon yellow-green accent. This strict two-tone approach ensures that every interactive element is immediately legible against the deep background.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#0e0e0e` | main background |
| `--bg-soft` | `#161616` | card background |
| `--bg-quiet` | `#1d1d1d` | quiet area |
| `--ink` | `#f0f0f0` | body text |
| `--ink-soft` | `#a3a3a3` | secondary text |
| `--muted` | `#858585` | placeholder |
| `--muted-soft` | `#666666` | weak hint |
| `--accent` | `#d6fb41` | single accent |
| `--line` | `rgba(52, 52, 52, 1)` | divider |

**Color principle:** High contrast neon accent against deep dark neutral backgrounds

The principle is absolute: a single, high-chroma accent commands attention, while the dark field provides the necessary contrast for sustained focus.

## 3. Typography

Typography is handled by a clean, modern grotesque-sans font category, chosen for its directness and technical clarity. Display headlines are set with tight, negative letter spacing to create a dense, impactful visual weight.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 500 | -2.8px | Main hero headlines |
| title | 32px | 1.0 | 500 | -0.7px | Section headings |
| subtitle | 22.4px | 1.4 | 400 | -0.56px | Secondary headlines |
| body | 16px | 1.0 | 400 | -0.2px | Standard text and navigation |

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

## 4. Spacing

A strict 4px base grid establishes a predictable and harmonious rhythm throughout the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 4px base grid

## 5. Surfaces

Surfaces are rendered as flat planes of color, with depth suggested through background alternation rather than shadow or elevation. A single, solid 1px border in a dark tone provides the only structural division.

- **Radius:** sm 4px · md 6px · lg 10px · pill 9999px
- **Borders:** Solid 1px borders using #252525

## 6. Layout

The layout is a centered, single-column container that imposes a clear vertical order. Alternating dark and neon background sections create a distinct rhythm and separate content hierarchies without additional visual clutter.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Single column centered layout with alternating dark and neon background sections

## 7. Motion & Interaction

Motion is minimal and utilitarian, confined to smooth opacity and color transitions that signal interactive state changes. All transitions are executed over a consistent 0.2s to 0.3s duration to maintain a sense of immediate, controlled feedback.

- **Durations:** micro 150ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth opacity transitions for hover states
  - Subtle color transitions on interactive elements

- **Hover:** Subtle color changes or opacity adjustments
- **Click:** Immediate visual feedback
- **Transition:** All transitions handled smoothly over 0.2s to 0.3s
- **Keyboard:** Standard focus states with clear outlines

## 8. Voice & Don'ts

The editorial voice is technical, professional, and direct, favoring bold, concise statements over flowery description. It avoids marketing jargon and passive language, speaking with the clarity of a well-documented API.

- **Tone:** Technical, professional, and direct
- **Headline style:** Bold, concise statements focusing on scale and security
- **CTA style:** Action-oriented phrases like 'Start for free' and 'Try CodeSandbox SDK'
- **Avoid:** Marketing jargon / Vague promises / Overly complex sentences / Unnecessary exclamation points / Weak or passive language

### Don'ts
- ❌ 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)

The system deliberately excludes decorative flourishes, multiple accent colors, and bright white backgrounds to preserve its focused, high-performance developer aesthetic.

## System Prompt (paste into AI tool)

```
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.
```
