CodeSandbox — design system & UI screens

Dev Tools · 1 screen · 9 sections · https://codesandbox.io/

Dark hero with lime display type for instant code execution in AI agents, over an enterprise logo wall.

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/codesandbox.

Decoded design system

CodeSandbox's decoded design system: background #0E0E0E, text #ECECEE, accent #EAFF96, link #DCFF50, primary #EAFF96; type scale h1 120px / h2 24px / body 18px; 8px spacing base; 4px base radius. The single interactive/action color is #EAFF96 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#0E0E0E`
surface	`#1B1B1B`
border	`#2F2F2F`
text	`#ECECEE`
text_muted	`#979798`
primary	`#EAFF96`
accent	`#EAFF96`
link	`#DCFF50`
button_bg	`#EAFF96`
button_text	`#343434`

Using these colors

Action color #EAFF96 — the single interactive color; only on things you click or must notice, never large fills.
primary, accent, button_bg are all #EAFF96 — one role, not several (the action color).
accent #EAFF96 — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
link #DCFF50 — inline text links and link-styled controls.

Typography

Heading: Inter
Body: Inter
h1: 120px
h2: 24px
body: 18px

Spacing

base unit: 8px
scale: 4px, 7px, 8px, 10px, 12px, 13px, 16px, 24px, 32px, 48px

Radii

base: 4px
button: 6px

Shadows (elevation)

card: rgba(0, 0, 2, 0.3) 0px 10px 30px 0px

Motion

Micro-interactions run at 150ms (dominant) with ease.

durations: 150ms · 1000ms · 2000ms
easings: ease · ease-in-out
animated properties: opacity, color, background-color, border-color

Native design tokens

Token	Value
`--cc-link-color`	`#30363c`
`--cc-bg`	`#fff`
`--cc-primary-color`	`#2c2f31`
`--cc-secondary-color`	`#5e6266`
`--cc-btn-primary-bg`	`#30363c`
`--cc-btn-primary-color`	`#fff`
`--cc-btn-primary-border-color`	`#30363c`
`--cc-btn-primary-hover-bg`	`#000`
`--cc-btn-primary-hover-color`	`#fff`
`--cc-btn-primary-hover-border-color`	`#000`

…and 110 more measured on the page.

Button states (measured)

primary hover: background #F5FFCB
primary focus: outline 2px solid rgb(176, 160, 255)

Layout (measured)

container max-width: 1200px
nav: 48px relative
common grid: 4 columns

Motion choreography (measured)

Load order: div.cm--box → div.cm--box → div.cm--box → div.rfm-marquee×12 → span.c-PJLV×24 → span.c-PJLV×24

Overlay recipe (measured)

dialog panel: #333333 · radius 5px

Responsive (measured)

breakpoints: 420px · 640px · 734px · 1068px · 1441px
mobile (390px): hero 48px · nav inline

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

Sandboxes built for scale