CURATED · OPEN · FREE

CodeSandbox

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

devtool

↓ Download design system (5 MB)Open in OpenDesign

Visit: https://codesandbox.io

📦 Browse pack contents →

Identity DNA

developmentsandboxscalecodeinfrastructure

The dark mode terminal of the cloud

Color

#d6fb41Accent

#f0f0f0Ink

#a3a3a3Ink soft

#0e0e0eBG

#161616BG soft

#1d1d1dBG quiet

#858585Muted

rgba(52, 52, 52, 1)Line

High contrast neon accent against deep dark neutral backgrounds

Typography

grotesque-sans · monospace

display56px · 500
title32px · 500
subtitle22px · 400
body16px · 400

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

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

4px base grid

Surfaces

sm · 4px

md · 6px

lg · 10px

pill · 9999px

Solid 1px borders using #252525

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Single column centered layout with alternating dark and neon background sections

Motion & Interaction

150msmicro

300mssmall

500msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth opacity transitions for hover states · Subtle color transitions on interactive elements

Subtle color changes or opacity adjustments · Immediate visual feedback

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

Voice & Don'ts

Tone Technical, professional, and direct
Headlines Bold, concise statements focusing on scale and security
CTAs Action-oriented phrases like 'Start for free' and 'Try CodeSandbox SDK'

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)
Avoid: Marketing jargon
Avoid: Vague promises
Avoid: Overly complex sentences
Avoid: Unnecessary exclamation points
Avoid: Weak or passive language

Inside the pack — real screenshots

CodeSandbox — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko