An unofficial, original CodeSandbox-inspired Sandbox Console system grounded in 18 retained, evidence-backed interface patterns.
Foundations
A public overview of the typography, palette, icon language, spacing, shape, and motion used throughout this AI Kit.
Style identity
A secure sandbox/runtime surface for provisioning, running, pausing, and inspecting a reproducible code environment.
Near-black runtime console with a bright lime status signal, dense code rhythm, themeTypography
TWK Everett
Observed display and interface type on the marketing surface
"TWK Everett", ui-sans-serif, system-ui, sans-serifFallback: 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, monospaceFallback: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace
Palette
canvas
#f5f8ecPage canvas in light mode
surface
#ffffffRaised content surface in light mode
surface-dark
#1b1d1fRaised content surface in dark mode
text
#171925Primary readable text
muted
#687085Supporting copy and metadata
border
#d9e2c6Quiet dividers and control outlines
accent
#9aca28Primary action or active state
accent-secondary
#39b7deSecondary signal or gradient stop
dark-canvas
#111213Page canvas in dark mode
dark-text
#f5f7fbPrimary readable text in dark mode
Type scale
| 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
Iconography
Use explicit labels for files, runtime, isolation, resume, and stop; icons supplement the status and never carry status by color alone.
System metrics
Radius
Spacing
Motion
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
#f5f8ecQuiet page background
light-surface
#ffffffCards and form surfaces
dark-canvas
#111213Dark page background
dark-surface
#1b1d1fDark cards and console surfaces
Guidelines
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.
Concept
Use the file tree to move between the full reference preview, implementation guidance, portable tokens, and framework-ready styles. Each surface stays focused, so you can understand the system before copying code.
Assigned collection
17 published components in collection order
Components
Production-ready specimens from this AI Kit's approved collection.
More like this
An unofficial, original Postman-inspired interface study with 14 focused specimens supported by the live product and content experience.
An unofficial, original v0-inspired Prompt Workshop system grounded in 17 retained, evidence-backed interface patterns.
13 focused, original elements for Borderless Ledger; categories are retained only when supported by the live reference. Published flags remain disabled.
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.
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.
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.