Design system Paid source17 components

CodeSandbox-inspired Sandbox Console

An unofficial, original CodeSandbox-inspired Sandbox Console system grounded in 17 retained, evidence-backed interface patterns.

Includes DESIGN.md, tokens.json, full CSS, Tailwind v4 token mapping and matching UI specimens. Preview for free; protected guidance and style downloads require Starter or Super. Framework installation and theme support are verified only where listed.

Theme support:: Unverified
Installation:: No verified installation path listed

Delivered component specimen

Sandbox Console Buttons

HTML/CSS · JavaScript

FFrontend Forever

Design foundations

Inspect the kit's typography, palette, icons, spacing and motion.

Style identity

CodeSandbox-inspired Sandbox Console

A secure sandbox/runtime surface for provisioning, running, pausing, and inspecting a reproducible code environment.

Reference style: Near-black runtime console with a bright lime status signal, dense code rhythm,

Visit website

Typography

Font families

TWK Everett

Observed display and interface type on the marketing surface

"TWK Everett", ui-sans-serif, system-ui, sans-serif

Font website

Weights: 400,500,700
Sizes: 12px,14px,16px,24px,48px,72px
Line height: 1.05–1.5
Tracking: tight display tracking; normal body tracking

Fallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif

Native mono

Code, runtime logs, file paths, and environment metadata

Native, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace

Font website

Weights: 400,600
Sizes: 11px,12px,13px,14px
Line height: 1.45–1.7
Tracking: normal

Fallback: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace

Palette

Core colors

canvas

#f5f8ec

Page canvas in light mode

surface

#ffffff

Raised content surface in light mode

surface-dark

#1b1d1f

Raised content surface in dark mode

text

#171925

Primary readable text

muted

#687085

Supporting copy and metadata

border

#d9e2c6

Quiet dividers and control outlines

accent

#9aca28

Primary action or active state

accent-secondary

#39b7de

Secondary signal or gradient stop

dark-canvas

#111213

Page canvas in dark mode

dark-text

#f5f7fb

Primary readable text in dark mode

Type scale

Responsive hierarchy

Role	Size	Weight	Line height	Tracking
display-xl	clamp(44px, 7vw, 94px)	700	0.98–1.08	-0.06em
display-lg	clamp(32px, 5vw, 64px)	700	1.0–1.12	-0.05em
heading	24–32px	600	1.2–1.35	-0.035em
body	14–16px	400	1.45–1.6	normal
label	11–13px	600	1.3–1.45	0.01em
technical	10–12px	500	1.45–1.7	normal

Spacing & shape

Layout rhythm

Density: dense
Base unit: 4px
Max width: 1240px
Section gap: 64–104px
Card padding: 16–24px
Element gap: 6–14px

Iconography

Outlined variable icon font with compact runtime glyphs

Optical outlined glyphs; use 1.5–2px visual weight stroke · 16px / 20px / 24px

Use explicit labels for files, runtime, isolation, resume, and stop; icons supplement the status and never carry status by color alone.

Material Symbols Outlined npm package

System metrics

Radius

control 6pxpanel 10pxwindow 14pxpill 999px

Spacing

Unit 4pxValue 4pxPage 28pxValue 28pxSection 72px

Motion

micro 120ms linearstandard 200ms cubic-bezier(.2,.8,.2,1)reduced Stop spinner and status pulse

Elevation

console

0 20px 56px rgba(0,0,0,.3)

Runtime surface

notice

0 8px 24px rgba(0,0,0,.18)

Announcement and status notice

Surfaces & shape

light-canvas

#f5f8ec

Quiet page background

light-surface

#ffffff

Cards and form surfaces

dark-canvas

#111213

Dark page background

dark-surface

#1b1d1f

Dark cards and console surfaces

Guidelines

Do

Use a near-black console surface and reserve lime for runtime/announcement/active status.
Separate code, runtime, and explanatory copy with borders and monospace metadata.
Make boot, active, hibernated, and resumed states explicit and announce them to assistive technology.
Keep tables and file lists horizontally safe with overflow handling.

Don't

×Do not copy the CodeSandbox or Together AI marks, product screenshots, or customer logos.
×Do not use lime for body text or large decorative fills where contrast suffers.
×Do not invent a full IDE or hide critical runtime actions in a command-only surface.
×Do not ship the protected TWK Everett files; preserve the documented source link and fallback stack.

Imagery

Use original abstract geometry, code-like lines, gradients, and browser/runtime framing only when they clarify the workflow. Never copy reference screenshots, logos, customer imagery, template thumbnails, or proprietary illustrations.

Layout

Use a centered max-width shell, clear section rhythm, one dominant task per specimen, and a single-column fallback at 520–760px. Keep tables and runtime rows scroll-safe.

Assigned collection

CodeSandbox-inspired Sandbox Console Interface Elements

17 published components in collection order

Components

Built from the same system

These working component previews are supplied with the kit. Open a component to inspect its code; the reference screenshots show the original website.

Open collection

Sandbox Console Buttons

HTML/CSS · JavaScript

HTML/CSS · JavaScript

Frontend Forever

More AI Kits

Postman-inspired API Orbit

An unofficial, original Postman-inspired interface study with 14 focused specimens supported by the live product and content experience.

v0-inspired Prompt Workshop

An unofficial, original v0-inspired Prompt Workshop system grounded in 16 retained, evidence-backed interface patterns.

Borderless Ledger — Wise-inspired AI Kit

13 focused, original elements for Borderless Ledger.

Runway-inspired Real-World Studio

A high-contrast studio language for a platform that moves between creative production, developer workflows, robotics, research, and enterprise. The system uses a dark stage, warm action color, and compact cross-platform wayfinding without copying Runway's wordmark, content, or media. Responsive previews and 8 evidence-backed interface elements.

Observable-inspired Signal Notebook

An original, unofficial Observable-inspired system for reactive notebooks, executable explanations, and data visualization surfaces. It retains only 11 focused elements supported by Observable's live notebook and chart workflows.

Replit-inspired Build Canvas

A friendly builder language for moving from prompt to app: vivid purple/green accents, a prominent idea field, artifact type selection, parallel execution, built-in infrastructure, team plans, agent chat, and a clear publish handoff. It is an original study without Replit's logo, pixel font, testimonials, screenshots, or protected copy. Responsive previews and 14 evidence-backed interface elements.