DESIGN.md inspired by CodeSandbox

---
name: CodeSandbox
tagline: Pale-lime electricity on a #0e0e0e void — TWK Everett at 120px, Inter underneath, one lime CTA doing all the work.
updated_at: 2026-05-28T23:12:15.515Z
published_at: 2026-05-28T23:12:15.515Z
author: webdesignhot
source_url: https://codesandbox.io
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [dev-tools, ai, saas]
tags: [dark, sans, developer, sandbox, bright, structured]
preview_swatch: ['#0e0e0e', '#eaff96', '#f0f0f0']
related: [replit, vercel, github]
description: 'CodeSandbox runs its marketing on a near-black `#0e0e0e` canvas where a single pale, almost-toxic lime `#eaff96` carries every primary action. The display face is TWK Everett — a grotesque drawn for editorial weight — set enormous (120px at weight 500) against Inter for body and UI. The result reads as cloud-development-environment confidence: void-dark, type-forward, and electric. Where Replit goes saturated cyan on navy ink, CodeSandbox goes pale lime on true near-black; where Vercel runs pure-white CTAs, CodeSandbox lets the lime do the shouting and keeps dark `#343434` text inside the button so the colour stays the loudest thing on the page.'


# Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger).
# Maps role names to this entry's actual token names so role-aware
# downstream tools resolve `theme.background` → entry's `bg`, etc.
# Auto-generated by scripts/add-aliases.mjs — do not edit manually;
# regenerate after changing color token names.
aliases:
  background: bg
  foreground: text
  primary: brand
  primary-foreground: on-brand
  muted: text-muted
  border: border
  ring: border-brand
colors:
  bg: '#0e0e0e'
  bg-deep: '#080808'
  bg-elevated: '#1d1d1d'
  surface: '#1d1d1d'
  surface-high: '#262626'
  surface-low: '#141414'
  text: '#f0f0f0'
  text-strong: '#ffffff'
  text-muted: '#a0a0a0'
  text-soft: '#8a8a8a'
  text-faint: '#5c5c5c'
  brand: '#eaff96'
  brand-hover: '#f1ffb0'
  brand-deep: '#d6f06a'
  brand-soft: 'rgba(234,255,150,0.14)'
  brand-tint: 'rgba(234,255,150,0.07)'
  on-brand: '#343434'
  lime-text: '#e3ff73'
  lime-text-hover: '#edff9a'
  link: '#e3ff73'
  link-hover: '#edff9a'
  border: 'rgba(240,240,240,0.10)'
  border-strong: 'rgba(240,240,240,0.18)'
  border-soft: 'rgba(240,240,240,0.06)'
  border-brand: 'rgba(234,255,150,0.45)'
  success: '#7ee787'
  success-bg: 'rgba(126,231,135,0.14)'
  warning: '#f0b429'
  warning-bg: 'rgba(240,180,41,0.14)'
  danger: '#ff6b6b'
  danger-bg: 'rgba(255,107,107,0.14)'
  info: '#e3ff73'
  shadow-deep: 'rgba(0,0,0,0.6)'
  shadow-soft: 'rgba(0,0,0,0.4)'
  shadow-glow: 'rgba(234,255,150,0.22)'

typography:
  display:
    family: '"TWK Everett", "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif'
    weights: [400, 500, 600]
  body:
    family: '"Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif'
    weights: [400, 500, 600]
  mono:
    family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace'
    weights: [400, 500]
  scale:
    display-hero:    { size: 120, weight: 500, lineHeight: 0.95, tracking: '-0.03em',  family: display }
    display-lg:      { size: 80,  weight: 500, lineHeight: 1.0,  tracking: '-0.025em', family: display }
    h1:              { size: 56,  weight: 500, lineHeight: 1.05, tracking: '-0.02em',  family: display }
    h2:              { size: 40,  weight: 500, lineHeight: 1.1,  tracking: '-0.018em', family: display }
    h3:              { size: 28,  weight: 500, lineHeight: 1.2,  tracking: '-0.01em',  family: display }
    h4:              { size: 22,  weight: 600, lineHeight: 1.3,  tracking: '-0.005em', family: body }
    h5:              { size: 18,  weight: 600, lineHeight: 1.35, tracking: '0',        family: body }
    body-lg:         { size: 18,  weight: 400, lineHeight: 1.6,  tracking: '0',        family: body }
    body:            { size: 16,  weight: 400, lineHeight: 1.6,  tracking: '0',        family: body }
    body-sm:         { size: 14,  weight: 400, lineHeight: 1.5,  tracking: '0',        family: body }
    button:          { size: 15,  weight: 500, lineHeight: 1.2,  tracking: '0',        family: body }
    nav:             { size: 14,  weight: 500, lineHeight: 1.2,  tracking: '0',        family: body }
    label:           { size: 13,  weight: 500, lineHeight: 1.4,  tracking: '0.01em',   family: body }
    caption:         { size: 12,  weight: 500, lineHeight: 1.4,  tracking: '0.02em',   family: body }
    eyebrow:         { size: 12,  weight: 500, lineHeight: 1.3,  tracking: '0.08em',   family: body }
    code:            { size: 14,  weight: 400, lineHeight: 1.55, tracking: '0',        family: mono }
    code-sm:         { size: 12,  weight: 400, lineHeight: 1.5,  tracking: '0',        family: mono }

radius:
  micro: 2
  sm: 4
  md: 8
  lg: 12
  xl: 16
  pill: 9999

spacing:
  base: 4
  scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128]

layout:
  page-width: 1280
  prose-width: 720
  header-height: 64
  gutter: 24
  section-y: 96

components:
  button-primary:
    background: brand
    text: on-brand
    radius: 4
    padding: '10px 16px'
    font: 'Inter 15px / weight 500'
    hover: 'background → #f1ffb0'
    use: 'Pale-lime CTA — dark `#343434` text on lime, never white. `Try for free`, `Sign up`.'
  button-secondary:
    background: surface
    text: lime-text
    radius: 4
    padding: '10px 16px'
    border: '1px solid rgba(240,240,240,0.10)'
    hover: 'background → #262626'
    use: 'Dark `#1d1d1d` chip with lime `#e3ff73` text — `Learn more`, paired beside the lime CTA.'
  button-ghost:
    background: transparent
    text: lime-text
    border: 'none'
    padding: '10px 12px'
    hover: 'colour → #edff9a'
    use: 'Tertiary inline action, often with a trailing arrow.'
  card:
    background: surface
    border: '1px solid rgba(240,240,240,0.10)'
    radius: 12
    padding: '24px'
    shadow: 'none'
    use: 'Feature card on the void canvas — flat-on-flat depth via surface ladder.'
  input:
    background: surface-low
    border: '1px solid rgba(240,240,240,0.18)'
    text: text
    radius: 4
    padding: '8px 12px'
    focus: 'border → rgba(234,255,150,0.45), 2px lime ring'
    use: 'Form fields — dark fill, hairline border, lime focus.'
  badge:
    background: 'rgba(234,255,150,0.14)'
    text: lime-text
    border: 'none'
    radius: 9999
    padding: '4px 10px'
    font: 'Inter 12px / 500'
    use: 'NEW / BETA / AI status labels — lime-tint chip.'
  nav:
    background: bg
    border-bottom: 'none — flat void top to bottom'
    blur: 'none'
    use: 'Quiet `#0e0e0e` sticky bar, white wordmark left, lime CTA right-pinned.'

motion:
  ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
  ease-snappy: 'cubic-bezier(0.16, 1, 0.3, 1)'
  duration-fast: 150
  duration-standard: 240
  duration-slow: 320
  hover-lift: 'translate-Y(-2px) on cards; lime glow ring on primary CTA'
  reduced-motion: 'respects prefers-reduced-motion: reduce — opacity-only, no translate, no glow pulse'

breakpoints:
  mobile: 640
  tablet: 1024
  desktop: 1280
  wide: 1536

shadows:
  none: 'none'
  ambient: '0 1px 2px rgba(0,0,0,0.4)'
  soft: '0 4px 12px rgba(0,0,0,0.4)'
  standard: '0 8px 24px rgba(0,0,0,0.5)'
  elevated: '0 16px 40px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4)'
  glow-lime: '0 0 24px rgba(234,255,150,0.22)'
  ring: '0 0 0 2px #eaff96'

accessibility:
  contrast-text-on-bg: 16.9                 # #f0f0f0 on #0e0e0e — AAA
  contrast-brand-on-bg: 17.7                # #eaff96 on #0e0e0e — AAA
  contrast-text-on-brand: 11.4              # #343434 on #eaff96 — AAA
  contrast-lime-on-surface: 15.1            # #e3ff73 on #1d1d1d — AAA
  focus-ring: '2px solid #eaff96, 2px offset'
  reduced-motion-honored: true
  keyboard-nav: 'tab follows DOM; lime focus ring on every interactive element'

lineage:
  summary: |
    CodeSandbox's marketing aesthetic is what a cloud development environment
    looks like when it commits fully to the void. The canvas is a true
    near-black #0e0e0e — darker and warmer-neutral than Replit's #0e1525
    navy-ink, nearly as absolute as Vercel's pure black but pulled a hair
    off zero. Against it, a single pale, almost-toxic lime #eaff96 carries
    every primary action; a slightly more saturated lime #e3ff73 handles
    secondary text and links. The display face is TWK Everett — a grotesque
    from Weltkern with editorial weight — set enormous (120px at weight 500)
    so the headline becomes the page's primary illustration. Body and UI run
    on Inter, the workhorse neutral sans. The defining move is restraint of
    colour and excess of type: the lime is the only chromatic event on an
    otherwise monochrome void, and the type scale is allowed to grow to a
    size most marketing sites would never risk. The lime-on-dark pairing is
    the brand fingerprint as much as cyan-on-navy is Replit's.
  influences:
    - name: TWK Everett (Weltkern)
      role: The display grotesque that supplies CodeSandbox's editorial-weight headline identity, set at 120px
      url: https://weltkern.com/typefaces/everett
    - name: Inter (Rasmus Andersson)
      role: The neutral UI sans used for all body, navigation, and interface text beneath the TWK Everett display
      url: https://rsms.me/inter
    - name: Vercel
      role: Near-black marketing discipline — void canvas, single accent doing all the action work, type-forward layout
      url: https://vercel.com
    - name: Replit
      role: The cloud-IDE-as-marketing template — saturated single accent on dark ink; CodeSandbox swaps cyan-on-navy for lime-on-void
      url: https://replit.com
    - name: Linear
      role: Flat-on-flat depth via a surface ladder and hairline borders rather than drop shadow
      url: https://linear.app

dark-mode: native   # CodeSandbox's marketing IS the dark mode — the void canvas runs header to footer
---

## 1. Visual Theme & Atmosphere

CodeSandbox's marketing site commits to the void. The canvas is a true near-black `#0e0e0e` — not the navy-tinted ink Replit uses, not a charcoal gradient, but a flat, warm-neutral near-black pulled a hair off pure zero. Against that darkness, a single pale, almost-toxic lime `#eaff96` carries every primary action. There is no secondary brand colour competing for attention; the lime is the only chromatic event on the page, and its scarcity is exactly what makes it read as electric.

The atmosphere is type-forward and confident to the point of swagger. The display face is **TWK Everett** — a grotesque drawn by Weltkern with real editorial weight — and CodeSandbox sets it *enormous*: the hero headline runs at 120px in weight 500. At that size the headline stops being a label and becomes the page's primary illustration. Body and interface text drop to **Inter**, the neutral workhorse sans, so the eye reads a clear two-tier system: huge Everett display, quiet Inter underneath. The contrast in scale does the dramatic work that a second colour might do elsewhere.

Where Replit goes saturated cyan on navy ink, CodeSandbox goes pale lime on true near-black — a cooler, more clinical electricity. Where Vercel runs pure-white CTAs on pure black, CodeSandbox lets the lime do the shouting and keeps a dark `#343434` text *inside* the button, so the lime fill stays the loudest thing on the page and the text never competes. The lime-on-dark pairing is the brand fingerprint as much as the typography is.

Depth is achieved almost entirely through a surface ladder and hairline borders rather than shadow. The `#080808` → `#0e0e0e` → `#141414` → `#1d1d1d` → `#262626` ladder lets cards and panels lift via background change plus a low-opacity white hairline (`rgba(240,240,240,0.10)`). True drop shadows appear only beneath floating product screenshots, where a soft cool black lifts the "app" off the void. Cards themselves are flat-on-flat. The single chromatic depth cue is a lime glow ring on the primary CTA hover.

The overall read is *cloud development environment confidence*: void-dark, type-forward, electric on a tight leash. It signals "this is serious tooling for people who already build" without ever feeling cold or corporate, because the oversized Everett headlines carry a human, almost editorial voice through the darkness.

**Key Characteristics:**
- True near-black `#0e0e0e` void canvas — warmer-neutral, not navy, not charcoal, not pure zero
- A single pale-lime `#eaff96` brand carrying every primary action — no competing accent
- Dark `#343434` text inside the lime CTA — never white, so the lime fill stays loudest
- TWK Everett display set *enormous* (120px / 500) as the page's primary illustration
- Inter for all body, navigation, and UI — clean two-tier type system
- Secondary lime `#e3ff73` for links and secondary-button text on dark chips
- Surface-ladder depth (`#080808` → `#1d1d1d` → `#262626`) plus white hairlines — flat-on-flat
- Tight 4px radius on buttons and inputs — IDE-rectangular, not pillowy
- Lime glow ring as the only chromatic depth cue, reserved for the primary CTA hover
- Monochrome restraint everywhere except the one lime move

## 2. Color Palette & Roles

### Canvas

- **Bg / Void** (`#0e0e0e`) [→ body bg]: the true near-black canvas, header to footer.
- **Bg Deep** (`#080808`): deepest nested layer for inset panels and code wells.
- **Bg Elevated / Surface** (`#1d1d1d`): card, panel, and secondary-button fill — the workhorse elevated surface.
- **Surface High** (`#262626`): hover and elevated-panel state.
- **Surface Low** (`#141414`): subtle stripe and nested-element fill.

### Text

- **Text Strong** (`#ffffff`): rare maximum-contrast emphasis inside display.
- **Text** (`#f0f0f0`) [→ body color]: primary body and heading colour, near-white.
- **Text Muted** (`#a0a0a0`): secondary copy, metadata, sub-labels.
- **Text Soft** (`#8a8a8a`): captions, placeholder, low-priority helper text.
- **Text Faint** (`#5c5c5c`): disabled labels and the faintest UI text.

### Brand

- **Brand / Lime** (`#eaff96`) [→ primary CTA bg]: the signature pale lime — every primary action. Always paired with dark `#343434` text on it.
- **On-Brand** (`#343434`) [→ CTA text]: dark text that sits inside the lime button — never white.
- **Brand Hover** (`#f1ffb0`): lighter lime on CTA hover.
- **Brand Deep** (`#d6f06a`): pressed / active lime state.
- **Brand Soft** (`rgba(234,255,150,0.14)`): lime-tinted background for badges and highlighted regions.
- **Brand Tint** (`rgba(234,255,150,0.07)`): faintest lime wash for hover backgrounds.

### Interactive

- **Lime Text / Link** (`#e3ff73`) [→ secondary CTA text]: the slightly more saturated lime used for links and secondary-button text on dark chips.
- **Lime Text Hover** (`#edff9a`): link and ghost-button hover colour.
- **Border Brand** (`rgba(234,255,150,0.45)`): lime-tinted border for focused or selected interactive elements.

### Borders

- **Border** (`rgba(240,240,240,0.10)`): 10% white hairline — the default rule and card edge.
- **Border Strong** (`rgba(240,240,240,0.18)`): 18% white for elevated panels, inputs, and outlined chips.
- **Border Soft** (`rgba(240,240,240,0.06)`): subtle inset divider.

### Shadow

- **Shadow Deep** (`rgba(0,0,0,0.6)`): primary depth beneath floating product screenshots.
- **Shadow Soft** (`rgba(0,0,0,0.4)`): subtle lift beneath elevated cards.
- **Shadow Glow Lime** (`rgba(234,255,150,0.22)`): the on-hover glow ring around the primary CTA — the only chromatic shadow.

### Semantic

- **Success** text `#7ee787`, background `rgba(126,231,135,0.14)` — build passed, deployed.
- **Warning** text `#f0b429`, background `rgba(240,180,41,0.14)` — degraded or pending state.
- **Danger** text `#ff6b6b`, background `rgba(255,107,107,0.14)` — build failed, destructive action.
- **Info** uses the secondary lime: text `#e3ff73`, background `rgba(234,255,150,0.14)`.

## 3. Typography Rules

### Font Family

- **Display**: TWK Everett — a grotesque from Weltkern with editorial weight, used for all headlines and the oversized hero.
- **Display fallback chain**: `"TWK Everett", "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif`.
- **Body / UI**: Inter — the neutral workhorse sans, used for all body, navigation, buttons, and interface text.
- **Body fallback chain**: `"Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif`.
- **Mono**: system mono stack — `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace` — for code samples and terminal output.
- **OpenType features** — Inter's default kerning and contextual alternates; no custom `ss` discipline. TWK Everett is used at its natural metrics with tight negative tracking applied at display sizes.

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | TWK Everett | 120 | 500 | 0.95 | -0.03em | The defining headline — primary illustration |
| Display Large | TWK Everett | 80 | 500 | 1.0 | -0.025em | Secondary hero, large section opener |
| H1 | TWK Everett | 56 | 500 | 1.05 | -0.02em | Standard page headline |
| H2 | TWK Everett | 40 | 500 | 1.1 | -0.018em | Section heading |
| H3 | TWK Everett | 28 | 500 | 1.2 | -0.01em | Sub-section heading |
| H4 | Inter | 22 | 600 | 1.3 | -0.005em | Card title |
| H5 | Inter | 18 | 600 | 1.35 | 0 | Inline emphasis heading |
| Body Large | Inter | 18 | 400 | 1.6 | 0 | Lead paragraph |
| Body | Inter | 16 | 400 | 1.6 | 0 | Standard reading text |
| Body Small | Inter | 14 | 400 | 1.5 | 0 | Captions, footer |
| Button | Inter | 15 | 500 | 1.2 | 0 | Button label |
| Nav | Inter | 14 | 500 | 1.2 | 0 | Top-nav links |
| Label | Inter | 13 | 500 | 1.4 | 0.01em | Field labels, metadata |
| Caption | Inter | 12 | 500 | 1.4 | 0.02em | Helper text, image captions |
| Eyebrow | Inter | 12 | 500 | 1.3 | 0.08em | Section eyebrows, all-caps tags |
| Code | mono | 14 | 400 | 1.55 | 0 | Code blocks, terminal |
| Code Small | mono | 12 | 400 | 1.5 | 0 | Inline code in body |

### Principles

- **Two-tier system** — TWK Everett display, Inter body. The split is absolute: headlines are Everett, everything else is Inter. There is no in-between.
- **Display is the illustration** — the hero headline at 120px is the page's strongest visual asset. Size, not colour, carries the drama.
- **Weight 500 is the display weight** — CodeSandbox sets Everett at medium, not bold. Confident but not heavy; the grotesque's editorial cut does the work.
- **Tracking tightens with size** — `-0.03em` at 120px, `-0.025em` at 80px, `-0.02em` at 56px, normalising to `0` below 22px. Display feels confident, body feels neutral.
- **Inter never goes display-huge** — when a heading needs Inter (card titles, H4/H5), it stays at sane UI sizes in weight 600. Everett owns everything above 28px.
- **Eyebrows in Inter at 0.08em** — small all-caps section tags use Inter with wide tracking, not a mono face.
- **Body line-height runs generous** — 1.6 on body and body-large keeps long-form readable against the dark void where tight leading would feel cramped.
- **Mono stays system-default** — CodeSandbox does not ship a branded mono; code uses the platform stack so it reads as "real editor" without a brand cost.

## 4. Component Stylings

### Buttons

**Primary Lime**
- Background: `#eaff96`
- Text: `#343434` — never white. The dark text on lime keeps the lime fill the loudest thing on the page.
- Padding: `10px 16px`
- Radius: `4px`
- Font: Inter 15px weight 500
- Hover: background → `#f1ffb0`; optional lime glow ring `0 0 24px rgba(234,255,150,0.22)`
- Use: primary CTA — `Try for free`, `Sign up`, `Get started`

**Secondary Dark Chip**
- Background: `#1d1d1d`
- Text: `#e3ff73` — the secondary lime
- Border: `1px solid rgba(240,240,240,0.10)`
- Padding: `10px 16px`
- Radius: `4px`
- Font: Inter 15px weight 500
- Hover: background → `#262626`
- Use: secondary action paired beside the lime CTA — `Learn more`, `View docs`

**Ghost / Inline**
- Background: transparent
- Text: `#e3ff73`
- No border
- Padding: `10px 12px`
- Hover: colour → `#edff9a`
- Use: tertiary action, often with a trailing arrow `→`

**Disabled**
- Background: `rgba(240,240,240,0.06)`
- Text: `#5c5c5c`
- Border: `1px solid rgba(240,240,240,0.10)`
- No hover

### Cards & Containers

**Feature Card**
- Background: `#1d1d1d`
- Border: `1px solid rgba(240,240,240,0.10)`
- Radius: `12px`
- Padding: `24px`
- Shadow: none (flat-on-flat)
- Hover: surface → `#262626`, border → `rgba(240,240,240,0.18)`, optional `translate-Y(-2px)`

**Product Screenshot Frame**
- Background: `#080808`
- Border: `1px solid rgba(240,240,240,0.18)`
- Radius: `12px`
- Inside: the CodeSandbox editor / preview UI captured as imagery
- Shadow: `0 16px 40px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4)` to lift the "app" off the void
- Use: hero and feature illustration — the floating product window

**Code Well**
- Background: `#080808`
- Border: `1px solid rgba(240,240,240,0.10)`
- Radius: `8px`
- Inside: system mono 14px / 400, syntax-highlighted; muted line numbers in `#5c5c5c`

### Badges, Tags, Pills

**Status Badge**
- Background: `rgba(234,255,150,0.14)`
- Text: `#e3ff73`
- Border: none
- Radius: `9999px`
- Padding: `4px 10px`
- Font: Inter 12px / 500
- Use: `NEW`, `BETA`, `AI` status labels — lime-tint chip

**Neutral Tag**
- Background: `rgba(240,240,240,0.06)`
- Text: `#a0a0a0`
- Border: `1px solid rgba(240,240,240,0.10)`
- Radius: `4px`
- Padding: `2px 8px`
- Font: Inter 12px / 500 / `0.02em`

### Inputs & Forms

- Background: `#141414`
- Border: `1px solid rgba(240,240,240,0.18)`
- Radius: `4px`
- Padding: `8px 12px`
- Font: Inter 16px / 400 / `#f0f0f0`
- Placeholder: `#8a8a8a`
- Focus: border → `rgba(234,255,150,0.45)`, ring `2px rgba(234,255,150,0.3)`
- Label: Inter 13px / 500 / `#a0a0a0`
- Helper: Inter 12px / 500 / `#8a8a8a`
- Error: border → `#ff6b6b`, helper → `#ff6b6b`

### Navigation

- Background: `#0e0e0e` — flat void, no separate nav-bar fill
- No background blur — flat void top to bottom
- Logo: white wordmark on the left
- Links: Inter 14px / 500 / `#f0f0f0`, hover → `#e3ff73`
- CTA: lime primary button right-pinned (`Try for free`), often with a dark `Learn more` chip beside it
- Mobile: hamburger toggle, full-screen drawer on click

### Decorative Elements

- **Lime glow** — `0 0 24px rgba(234,255,150,0.22)` ring around the primary CTA on hover
- **Surface ladder bands** — alternating `#0e0e0e` and `#080808` strips for section rhythm
- **Floating product window** — the CodeSandbox editor captured as imagery is the strongest visual asset

## 5. Layout Principles

### Spacing System

- Base unit: `4px`
- Scale: `0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128`
- Density observation: airy at the hero, structured below. The oversized Everett display demands generous vertical breathing room around it; feature grids below tighten to a comfortable, structured rhythm. The `4px` base allows fine control where UI needs it.

### Grid & Container

- Max content width: `1280px` with `24px` gutters
- Hero bands run the headline near full-width to let the 120px Everett breathe, with the floating product window beside or below
- Feature grids are typically three-column with `#1d1d1d` cards
- Code wells and product screenshots may break out to wider widths
- Vertical rhythm runs `96–128px` between sections

### Whitespace Philosophy

- **Air around the headline** — the oversized display needs room; the hero is intentionally generous so the type reads as illustration.
- **Structured below the fold** — feature grids and stat rows tighten to a denser, ordered rhythm once past the hero.
- **The void as whitespace** — the near-black canvas itself functions as negative space; little decoration competes with the type and the single lime accent.

### Section Cadence

- Hero (giant Everett headline + lime CTA + floating product window on `#0e0e0e`) → feature grid (3-column cards on `#0e0e0e`) → product-deep band (often `#080808` for contrast) → logo / testimonial wall → pricing → final CTA → footer
- No light-section breaks — the void stays dark throughout marketing
- Surface-ladder swaps (`#0e0e0e` ↔ `#080808`) provide rhythm without breaking the dark discipline

## 6. Shapes & Radius Scale

| Tier | Value | Use |
|------|-------|-----|
| Micro | 2px | Fine inline corners, dots |
| Standard | 4px | Buttons, inputs, neutral tags — the workhorse |
| Comfortable | 8px | Code wells, small panels |
| Relaxed | 12px | Cards, product screenshot frames |
| Large | 16px | Hero cards, modal frames |
| Pill | 9999px | Status badges, avatars only |

The radii ladder is `2/4/8/12/16`. Buttons and inputs land at a tight `4px` — deliberately rectangular, IDE-coded rather than SaaS-pillowy. Cards and product frames sit at `12px` to read as soft windows. There are no fully-rounded CTAs; pills (`9999`) appear on status badges and avatars only. The shape vocabulary stays close to the editor — sharp, structured, technical.

## 7. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| 0 — Flat | No shadow, surface ladder | Page canvas, body cards |
| 1 — Hairline | `1px solid rgba(240,240,240,0.10)` | Default card and panel separation |
| 2 — Surface Lift | Surface bg → next ladder rung + `1px solid rgba(240,240,240,0.18)` | Hover and elevated panels |
| 3 — Soft Shadow | `0 4px 12px rgba(0,0,0,0.4)` plus hairline | Elevated cards lifted off canvas |
| 4 — Elevated | `0 16px 40px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4)` | Floating product windows, modals |
| 5 — Lime Glow | `0 0 24px rgba(234,255,150,0.22)` | Primary CTA hover state |
| 6 — Ring | `2px solid #eaff96` at `2px` offset | Keyboard focus |

**Shadow Philosophy** — depth comes from the surface ladder (`#080808` → `#0e0e0e` → `#141414` → `#1d1d1d` → `#262626`) and low-opacity white hairlines, not from drop shadow. Shadows are minimal and reserved: a soft cool black lifts floating product windows off the void; cards themselves stay flat-on-flat. The lime glow ring is the single chromatic depth cue and appears only on the primary CTA hover — its scarcity is what makes it land.

## 8. Interaction & Motion

### Easing Curves

- **Standard** `cubic-bezier(0.4, 0, 0.2, 1)` — default for hover and state changes
- **Emphasized** `cubic-bezier(0.2, 0, 0, 1)` — hero entrance, glow-ring expansion
- **Snappy** `cubic-bezier(0.16, 1, 0.3, 1)` — quick, slight overshoot for UI-like state changes

### Duration Buckets

- Fast: `150ms` — colour swaps, ring fades, link hover
- Standard: `240ms` — button hover, card lift, dropdown open
- Slow: `320ms` — hero reveals, floating-window entrance

### Per-Component Micro-States

- **Button hover (primary)** — background `#eaff96` → `#f1ffb0` over 150ms; lime glow ring expands to `0 0 24px rgba(234,255,150,0.22)` over 240ms.
- **Button hover (secondary chip)** — background `#1d1d1d` → `#262626` over 150ms; text stays lime `#e3ff73`.
- **Card hover** — background → next surface-ladder rung, border → `rgba(240,240,240,0.18)`, optional `translate-Y(-2px)` over 240ms standard ease.
- **Link hover** — colour `#e3ff73` → `#edff9a` over 150ms; no underline (links shift colour only on the dark canvas).
- **Input focus** — border → `rgba(234,255,150,0.45)` plus 2px lime ring over 150ms.
- **Floating-window entrance** — opacity 0→1 plus `translate-Y(16px)` over 320ms emphasized, triggered by Intersection Observer.

### Page Transitions

- No client-side transitions on marketing — standard browser navigation. Hero modules and floating product windows animate in over 320ms once in viewport.

### Reduced Motion Strategy

- `@media (prefers-reduced-motion: reduce)` — opacity-only fades at 150ms linear. Translate, glow pulse, and parallax are removed entirely. Static product screenshots replace any animated demo.

## 9. Accessibility & A11y

### Contrast Pairs

- `#f0f0f0` body on `#0e0e0e` bg — **16.9:1** (AAA)
- `#eaff96` brand on `#0e0e0e` bg — **17.7:1** (AAA)
- `#343434` text on `#eaff96` brand — **11.4:1** (AAA)
- `#e3ff73` lime text on `#1d1d1d` surface — **15.1:1** (AAA)
- `#a0a0a0` muted on `#0e0e0e` bg — **7.4:1** (AAA at body sizes)
- `#8a8a8a` soft on `#0e0e0e` bg — **5.6:1** (AA)
- `#f0f0f0` text on `#1d1d1d` surface — **14.8:1** (AAA)
- `#eaff96` brand on `#1d1d1d` surface — **15.4:1** (AAA)

### Focus Indicators

- Default focus ring: `2px solid #eaff96` at `2px` offset
- On the lime CTA: ring becomes `2px solid #ffffff` for contrast against the lime fill
- Form inputs use a 2px lime ring with a lime-tinted border

### ARIA Patterns

- **Dialog** — `role="dialog"` `aria-modal="true"` with focus trap and `aria-labelledby` pointing to the title
- **Disclosure** — `aria-expanded` on accordion and FAQ toggles
- **Tablist** — `role="tablist"` for any feature-tab switcher
- **Combobox** — `role="combobox"` with `aria-expanded` / `aria-controls` for search and command-palette references
- **Code** — code wells marked up as `<pre><code>` with `role="region"` and `aria-label="Code example"`

### Keyboard Navigation

- Tab order follows DOM source order
- Skip-to-content link in header (visible on focus only)
- All interactive elements reachable via Tab
- `Esc` closes dropdowns, modals, and overlays
- Arrow keys navigate tablists and menus
- `Cmd+K` / `Ctrl+K` opens search / command palette where present

### Screen Reader Hints

- Decorative lime dots and glow rings `aria-hidden="true"`
- Floating product windows labelled with `aria-label="CodeSandbox editor showing [feature]"` plus visible caption
- `NEW` / `BETA` / `AI` badges read aloud as "New feature", "Beta feature", "AI feature"
- Live regions `aria-live="polite"` on any animated demo when present

### Reduced Motion

- Honoured — glow pulse and floating-window entrance stripped to static. The lime ring still appears on hover but does not animate in.

## 10. Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <640px | Single column, hero Everett 120→48px, product window full-width |
| Tablet | 640–1024px | 2-column grids, hero Everett 120→72px, window full-width |
| Desktop | 1024–1280px | 3-column feature grids, hero Everett near full size |
| Wide | ≥1280px | Centred 1280px container, hero Everett at full 120px |

### Touch Targets

- Buttons at `10px 16px` plus 15px label give a comfortable `44px+` tap height
- Nav links use `44×44px` minimum tap area on mobile
- Status badges grow from `4px 10px` to `6px 12px` on touch devices

### Collapsing Strategy

- Display Hero: `120px` → `72px` (tablet) → `48px` (mobile) — the headline shrinks hard but stays the dominant element
- Body: `16px` holds; body-large `18px` → `16px` on mobile
- Floating product window: beside-headline → stacked below → full-width
- Feature cards: 3-column → 2-column → single column stacked
- Section spacing: `96–128px` → `64px` on mobile
- Nav: horizontal links + CTA → hamburger drawer

### Image Behavior

- Floating product windows maintain `12px` radius and chrome at all sizes
- Lime glow effects simplify on mobile (single layer instead of layered glow)
- Logo grids reduce to 2 columns on mobile

### Container Queries

- Feature cards use container queries to switch from horizontal media-plus-text to a stacked layout when their container drops below `420px`.

## 11. Content & Voice

### Tone

Builder-direct and confident, carried as much by the oversized type as by the words. CodeSandbox assumes the reader codes — it never explains what a development environment is. Headlines are short and declarative ("Instant cloud development environments") so they survive being set at 120px. Body copy is technical but plain, naming real tools and workflows rather than abstractions.

### Microcopy Patterns

- **Button verbs** — `Try for free`, `Learn more`, `Sign up`, `Get started`, `Open in editor`. Never `Click here`, never `Get started today!`.
- **Error message recipe** — direct, technical: `Build failed: missing dependency. Run npm install.`
- **Success confirmations** — terse: `Deployed.`, `Saved.`, `Forked.`
- **Status labels** — short caps: `NEW`, `BETA`, `AI`, `LIVE`.

### Empty States

- Direct and instructive: `No sandboxes yet. Start from a template.`
- Always paired with a primary CTA `Create sandbox` and a secondary `Browse templates`.
- No mascots, no apologetic copy.

### CTA Verb Conventions

- Primary: `Try for free`, `Sign up`, `Get started`, `Create sandbox`
- Secondary: `Learn more`, `View docs`, `See pricing`
- Tertiary: `Read more →`, `Open editor →`

## 12. Dark Mode & Theming

**CodeSandbox's marketing IS the dark mode.** There is no light-mode marketing surface — the canvas is `#0e0e0e` from header to footer. The product editor offers themes, but the marketing site stays on the void.

If a downstream implementation needs a light variant, the recommended swap is:
- `bg` `#0e0e0e` → `#ffffff`
- `bg-deep` `#080808` → `#f7f7f7`
- `surface` `#1d1d1d` → `#f1f1f1`
- `text` `#f0f0f0` → `#0e0e0e`
- `text-muted` `#a0a0a0` → `#5c5c5c`
- `border` `rgba(240,240,240,0.10)` → `rgba(14,14,14,0.10)`
- `brand` `#eaff96` stays — the lime is brand-locked, and the dark-text-on-lime rule still applies (the lime does NOT invert)
- secondary `lime-text` `#e3ff73` needs care on light backgrounds: pale lime on white fails contrast, so links should darken to `#3d4d00`-class olive in a light theme

The colour-locked brand lime means the primary CTA looks identical in light and dark — a deliberate continuity signal. Only the secondary lime text needs a light-mode substitute.

## 13. Lineage & Influences

CodeSandbox's marketing aesthetic is what a cloud development environment looks like when it commits fully to the void. The canvas is a true near-black `#0e0e0e` — darker and warmer-neutral than Replit's `#0e1525` navy-ink, nearly as absolute as Vercel's pure black but pulled a hair off zero so it reads as intentional rather than default. Against it, a single pale, almost-toxic lime `#eaff96` carries every primary action, with a slightly more saturated lime `#e3ff73` handling links and secondary-button text.

The type system is the other half of the identity: TWK Everett — a grotesque from Weltkern with editorial weight — set *enormous* (120px at weight 500) so the headline becomes the page's primary illustration, with Inter beneath it for all body and interface text. The defining move is restraint of colour against excess of type: the lime is the only chromatic event on an otherwise monochrome void, and the display scale is allowed to grow to a size most marketing sites would never risk.

The lineage runs through Vercel's near-black marketing discipline (void canvas, single accent, type-forward layout), Replit's cloud-IDE-as-marketing template (which CodeSandbox echoes but recolours from cyan-on-navy to lime-on-void), and Linear's flat-on-flat surface-ladder depth. The typographic confidence — huge editorial display over a neutral UI sans — owes more to fashion and editorial design than to typical developer-tool marketing.

The brand explicitly rejects: a second brand colour competing with the lime, white text inside the lime CTA (the dark-on-lime rule is doctrinal), gradient backgrounds, illustrated mascots, soft pastel palettes, pill-shaped CTAs, and pure-black `#000000` canvases (the `#0e0e0e` is intentionally a hair off zero).

**Named influences:**
- TWK Everett (Weltkern) — the editorial-weight display grotesque set at 120px
- Inter (Rasmus Andersson) — the neutral UI sans for all body and interface
- Vercel — near-black marketing discipline, single accent doing all the action work
- Replit — the cloud-IDE-as-marketing template, recoloured lime-on-void
- Linear — flat-on-flat depth via surface ladder and hairline borders

## 14. Do's and Don'ts

### Do

- Put dark `#343434` text inside the lime CTA — never white. It keeps the lime fill the loudest thing on the page.
- Set TWK Everett *enormous* (up to 120px / 500) — the oversized display is the brand's primary illustration.
- Keep the void at a true near-black `#0e0e0e` — warmer-neutral, not navy, not charcoal.
- Let the lime `#eaff96` be the only chromatic accent — its scarcity is what makes it electric.
- Use Inter for everything that isn't a headline — body, nav, buttons, labels, eyebrows.
- Use the secondary lime `#e3ff73` for links and secondary-button text on dark chips.
- Keep button and input radius at 4px — IDE-rectangular, structured, technical.
- Use the surface ladder (`#080808` / `#0e0e0e` / `#141414` / `#1d1d1d` / `#262626`) for depth instead of shadow.
- Apply the lime glow ring only to the primary CTA hover — never to other elements.
- Give the hero headline generous breathing room so the 120px type reads as illustration.
- Tighten tracking on display (`-0.03em` at 120px) and normalise it below 22px.
- Float product screenshots on a soft cool-black shadow to lift the "app" off the void.

### Don't

- Don't put white text on the lime CTA — the dark-text-on-lime contrast is doctrinal.
- Don't introduce a second brand colour to compete with the lime — it owns the whole action layer.
- Don't drift to pure black `#000000` — CodeSandbox's `#0e0e0e` is intentionally a hair off zero.
- Don't pill-shape CTAs — the shape vocabulary is rectangular (4px) like an editor.
- Don't lift cards with drop shadows; depth is the surface ladder plus a hairline.
- Don't apply gradients to backgrounds — flat void is the canvas.
- Don't set the display in bold — Everett at weight 500 is the confident-not-heavy signature.
- Don't use TWK Everett for body or UI — it is display-only; Inter owns the small sizes.
- Don't soften display tracking — `-0.03em` at hero size is part of the editorial feel.
- Don't spread the lime glow onto every hover — its scarcity is the whole point.
- Don't shrink the hero headline too timidly on desktop — the size is the statement.
- Don't replace the system mono with a branded display mono — code stays neutral.

## 15. Agent Prompt Guide

### Quick Color Reference

- Canvas: Void `#0e0e0e` (deeper `#080808`)
- Surface: `#1d1d1d` (card / secondary button), `#262626` (hover), `#141414` (input fill)
- Text: `#ffffff` strong, `#f0f0f0` body, `#a0a0a0` muted, `#8a8a8a` soft
- Brand: Lime `#eaff96` (with `#343434` text on it)
- Brand Hover: `#f1ffb0`
- Secondary Lime (links / chip text): `#e3ff73`
- Border: `rgba(240,240,240,0.10)` (10% white), `rgba(240,240,240,0.18)` (18% white)
- Success: `#7ee787` · Danger: `#ff6b6b`
- Glow: `rgba(234,255,150,0.22)` (CTA hover only)

### Example Component Prompts

- "Create a hero section on `#0e0e0e` background. Headline in TWK Everett at 120px weight 500, line-height 0.95, letter-spacing -0.03em, colour `#f0f0f0`. Subtitle in Inter 18px weight 400, line-height 1.6, colour `#a0a0a0`. Primary lime CTA: `#eaff96` background, `#343434` text (NEVER white), 4px radius, 10px 16px padding, Inter 15px weight 500. Secondary dark chip beside it: `#1d1d1d` background, `#e3ff73` text, 1px solid `rgba(240,240,240,0.10)`, 4px radius."
- "Design a feature card: `#1d1d1d` background, 1px solid `rgba(240,240,240,0.10)` border, 12px radius, 24px padding, no shadow. Title in Inter 22px weight 600, colour `#f0f0f0`. Body in Inter 16px weight 400, colour `#a0a0a0`. Eyebrow above title in Inter 12px / 500 / 0.08em uppercase, colour `#e3ff73`. Hover: background → `#262626`, border → `rgba(240,240,240,0.18)`, translate-Y(-2px)."
- "Build a status badge: `rgba(234,255,150,0.14)` background, `#e3ff73` text, 9999px radius, 4px 10px padding, Inter 12px weight 500. Use for NEW / BETA / AI labels."
- "Create navigation: `#0e0e0e` background, no blur, no separate fill. White wordmark left, links in Inter 14px / 500 / `#f0f0f0` (hover → `#e3ff73`). Right-pinned lime CTA `Try for free`: `#eaff96` bg, `#343434` text, 4px radius, plus a `#1d1d1d` `Learn more` chip with `#e3ff73` text beside it."
- "Design a floating product window: `#080808` background, 12px radius, 1px solid `rgba(240,240,240,0.18)` border, shadow `0 16px 40px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4)` to lift it off the void. Inside: the editor UI as imagery. Entrance: opacity 0→1 plus translate-Y(16px) over 320ms emphasized easing."
- "Build a form input: `#141414` background, 1px solid `rgba(240,240,240,0.18)`, 4px radius, 8px 12px padding, Inter 16px / 400 / `#f0f0f0`, placeholder `#8a8a8a`. Focus: border → `rgba(234,255,150,0.45)` plus 2px lime ring."

### Iteration Guide

1. If the page reads "consumer SaaS" rather than "developer tool," drop the pillowy radii to 4px on buttons/inputs and make the headline bigger, not smaller.
2. If the lime looks muddy, check the canvas — it must be a true near-black `#0e0e0e`, not navy and not charcoal. The pale lime needs the warm-neutral void to read electric.
3. The dark-text-on-lime rule is doctrinal; if the CTA looks washed-out, you've put white text on lime. Flip it to `#343434`.
4. If the hero feels timid, the headline is too small — TWK Everett wants to run at 120px / 500. Size is the statement.
5. Keep the colour count down: lime is the only accent. If a second colour appears in the action layer, remove it.
6. Headlines are TWK Everett; everything else is Inter. If a heading looks generic, it's probably set in Inter when it should be Everett.
7. Resist shadows for card depth — use the surface ladder (`#080808` → `#1d1d1d` → `#262626`) plus a `rgba(240,240,240,0.10)` hairline.
8. The lime glow ring is scarce — apply only to the primary CTA hover. Spreading it dilutes the cue.

---

*Theme-toggle audit: score=0, signals=[none]*