` 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]*