# AI Agent Cloud — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://e2b.dev/
Captured: 2026-11-06
CSS measured: 2026-11-06T09:22:04.750Z at 1440×1000 — https://e2b.dev/
Values come from computed CSS; role labels are AI judgments. Live CSS may differ from an older screenshot.
Status: AI analysed; curator review pending
Rubric: 3.2
Observer: google/gemini-3.1-pro-preview
Judge: claude-sonnet-5

## Design direction

The E2B website employs a highly technical, developer-centric aesthetic heavily reliant on a dark theme, monospaced typography, and structural grid lines. The visual language evokes a command-line interface or an IDE, utilizing a stark black background with thin, subtle borders to separate content blocks. Red acts as a strong, singular accent color for primary actions, active states, and diagrammatic highlights. 3D isometric graphics and technical diagrams reinforce the infrastructure-level product offering. The design is rigorous, prioritizing information density and technical accuracy while introducing playful interactions like a footer mini-game.

## Classification

- Industry: ai
- Site type: Landing
- Business model: Software
- Styles: brutalist, typographic, minimal, developer-focused, dark-mode-native
- Platform: Custom code
- Technology: Next.js, Three.js

## Typography

- Display: PP Supply Sans — weight 600; size 104px; line-height 88px; tracking -1px; uppercase (95% role confidence, computed values)
- Heading: Inter — weight 580; size 24px; line-height 32px; tracking -0.5px; Regular (90% role confidence, computed values)
- Body: Inter — weight 400; size 16px; line-height 24px; tracking -0.2px; Regular (95% role confidence, computed values)
- Mono: Commit Mono — weight 400; size 14px; line-height 16px; tracking normal; uppercase (95% role confidence, computed values)

## Functional palette

- Canvas — canvas #000000: color-1: computed lab(0 0 0); AI role: Pure black (#000000) used as the fundamental background for the entire page. (95% role confidence, computed values)
- Text — text #F4F4F4: color-2: computed lab(96.1952 0 0); AI role: Off-white (#F4F4F4) is the primary color for highly readable text against the black canvas. (95% role confidence, computed values)
- Border — border #2C2C2C: color-3: computed lab(17.9996 0 0); AI role: Dark grey (#2C2C2C) used extensively for structural grid lines, card borders, and dividers. (95% role confidence, computed values)
- Primary Action — primary action #E32A01: color-11: computed rgb(227, 42, 1); AI role: Vibrant red (#E32A01) used exclusively for primary CTAs like 'START BUILDING'. (95% role confidence, computed values)
- Muted Text — muted text #A6A6A6: color-5: computed lab(68.1232 -0.0000298023 0); AI role: Medium grey (#A6A6A6) used for secondary descriptive text and less prominent labels. (90% role confidence, computed values)
- Surface — surface #1F1F1F: color-4: computed lab(11.7588 0 -0.00000298023); AI role: Dark grey (#1F1F1F) used to create slightly elevated surfaces or card backgrounds. (85% role confidence, computed values)
- Accent — accent #FF3001: color-14: computed rgb(255, 48, 1); AI role: Bright red variants (#FF3001) used in SVG highlights, active states, and diagram markers. (80% role confidence, computed values)

## Exact computed CSS inventory

The browser extracted these declarations from rendered DOM at capture time. They are facts, not visual guesses. Image and video pixels are outside this inventory.

### Font configurations

```json
[
  {
    "id": "font-1",
    "family": "Commit Mono",
    "fontStack": "\"Commit Mono\", ui-monospace, monospace",
    "weight": "400",
    "size": "14px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 53,
    "contexts": [
      {
        "tag": "span",
        "text": "Sign up",
        "top": 24,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Sign in",
        "top": 24,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Book a Demo",
        "top": 24,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", sans-serif",
    "weight": "580",
    "size": "24px",
    "lineHeight": "32px",
    "letterSpacing": "-0.5px",
    "traits": "Regular",
    "count": 34,
    "contexts": [
      {
        "tag": "h4",
        "text": "Turn prompts into running apps",
        "top": 5760,
        "property": "font"
      },
      {
        "tag": "h4",
        "text": "Agents that work while the laptop is closed",
        "top": 5760,
        "property": "font"
      },
      {
        "tag": "h4",
        "text": "Analysis your compliance team can approve",
        "top": 5760,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", sans-serif",
    "weight": "520",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 14,
    "contexts": [
      {
        "tag": "h3",
        "text": "Execution",
        "top": 7581,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Network",
        "top": 7581,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Storage",
        "top": 7962,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "PP Supply Sans",
    "fontStack": "\"PP Supply Sans\", \"PP Supply Sans Fallback\", sans-serif",
    "weight": "600",
    "size": "180px",
    "lineHeight": "160px",
    "letterSpacing": "-3.6px",
    "traits": "uppercase",
    "count": 13,
    "contexts": [
      {
        "tag": "span",
        "text": "Agents in production run here.",
        "top": 10233,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Agents in production run here.",
        "top": 10233,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Agents in production run here.",
        "top": 10233,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 91,
    "contexts": [
      {
        "tag": "p",
        "text": "A prompt spins up coding sub-agents, builds the app, then serves it live from E2B.",
        "top": 5792,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "One sandbox keeps using browser, CLI, and storage, scaling compute on its own.",
        "top": 5824,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Ingest many sources, run the analysis, return a full report.",
        "top": 5824,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", sans-serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "28px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 75,
    "contexts": [
      {
        "tag": "span",
        "text": "E2B",
        "top": 362,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "runs",
        "top": 362,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "the isolated",
        "top": 362,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Commit Mono",
    "fontStack": "\"Commit Mono\", ui-monospace, monospace",
    "weight": "400",
    "size": "16px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 36,
    "contexts": [
      {
        "tag": "a",
        "text": "Enterprise",
        "top": -2,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Resources",
        "top": -2,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Company",
        "top": -2,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "20px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 30,
    "contexts": [
      {
        "tag": "span",
        "text": "14.7K",
        "top": 23,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Commands, code, a PTY, a full desktop.",
        "top": 7605,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Ingress and egress, under your policy.",
        "top": 7605,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "PP Supply Sans",
    "fontStack": "\"PP Supply Sans\", \"PP Supply Sans Fallback\", sans-serif",
    "weight": "600",
    "size": "72px",
    "lineHeight": "64px",
    "letterSpacing": "-0.7px",
    "traits": "uppercase",
    "count": 8,
    "contexts": [
      {
        "tag": "span",
        "text": "Every",
        "top": 202,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "agent",
        "top": 202,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "gets",
        "top": 266,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "PP Supply Sans",
    "fontStack": "\"PP Supply Sans\", \"PP Supply Sans Fallback\", sans-serif",
    "weight": "600",
    "size": "104px",
    "lineHeight": "88px",
    "letterSpacing": "-1px",
    "traits": "uppercase",
    "count": 5,
    "contexts": [
      {
        "tag": "p",
        "text": "Agents in production run here.",
        "top": 10313,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "2B+",
        "top": 10778,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "15M+",
        "top": 10778,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 33,
    "contexts": [
      {
        "tag": "a",
        "text": "Skip to main content",
        "top": -1,
        "property": "font"
      },
      {
        "tag": "li",
        "text": "Your agents: Any agent, any harness. OpenAI Agents SDK · Claude Code · Codex · your own harnessAny a",
        "top": 2004,
        "property": "font"
      },
      {
        "tag": "li",
        "text": "Any agent: coding · data · computer use · evals · RL",
        "top": 2364,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "PP Supply Sans",
    "fontStack": "\"PP Supply Sans\", \"PP Supply Sans Fallback\", sans-serif",
    "weight": "300",
    "size": "56px",
    "lineHeight": "52px",
    "letterSpacing": "-0.6px",
    "traits": "uppercase",
    "count": 26,
    "contexts": [
      {
        "tag": "span",
        "text": "Your",
        "top": 1141,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "agent",
        "top": 1141,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "is",
        "top": 1141,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "PP Supply Sans",
    "fontStack": "\"PP Supply Sans\", \"PP Supply Sans Fallback\", sans-serif",
    "weight": "600",
    "size": "56px",
    "lineHeight": "52px",
    "letterSpacing": "-0.6px",
    "traits": "uppercase",
    "count": 24,
    "contexts": [
      {
        "tag": "span",
        "text": "E2B",
        "top": 1199,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "is",
        "top": 1199,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "where",
        "top": 1199,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "Commit Mono",
    "fontStack": "\"Commit Mono\", ui-monospace, monospace",
    "weight": "400",
    "size": "11px",
    "lineHeight": "16.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 20,
    "contexts": [
      {
        "tag": "text",
        "text": "desktop.screenshot()",
        "top": 6035,
        "property": "font"
      },
      {
        "tag": "text",
        "text": "desktop.left_click(436, 124)",
        "top": 6054,
        "property": "font"
      },
      {
        "tag": "text",
        "text": "desktop.write(\"Q3 report\")",
        "top": 6073,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "Commit Mono",
    "fontStack": "\"Commit Mono\", ui-monospace, monospace",
    "weight": "400",
    "size": "12px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 15,
    "contexts": [
      {
        "tag": "span",
        "text": "vpc-0a91",
        "top": 153,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "@ us-east-1 · self-hosted",
        "top": 153,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "us-east-1",
        "top": 147,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "Commit Mono",
    "fontStack": "\"Commit Mono\", ui-monospace, monospace",
    "weight": "400",
    "size": "15px",
    "lineHeight": "22.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 11,
    "contexts": [
      {
        "tag": "text",
        "text": ":3000",
        "top": 7278,
        "property": "font"
      },
      {
        "tag": "text",
        "text": "https://3000-{sandbox_id}.e2b.app",
        "top": 7278,
        "property": "font"
      },
      {
        "tag": "text",
        "text": ":8080",
        "top": 7342,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "Commit Mono",
    "fontStack": "\"Commit Mono\", ui-monospace, monospace",
    "weight": "400",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 11,
    "contexts": [
      {
        "tag": "text",
        "text": "MODEL",
        "top": 6712,
        "property": "font"
      },
      {
        "tag": "text",
        "text": "MODEL",
        "top": 6712,
        "property": "font"
      },
      {
        "tag": "text",
        "text": "MODEL",
        "top": 6712,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "Commit Mono",
    "fontStack": "\"Commit Mono\", ui-monospace, monospace",
    "weight": "400",
    "size": "12px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 9,
    "contexts": [
      {
        "tag": "span",
        "text": "booted from snapshot",
        "top": 513,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "uptime 04:37:26",
        "top": 513,
        "property": "font"
      },
      {
        "tag": "b",
        "text": "04:37:26",
        "top": 513,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "Commit Mono",
    "fontStack": "\"Commit Mono\", ui-monospace, monospace",
    "weight": "400",
    "size": "11px",
    "lineHeight": "16.5px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 8,
    "contexts": [
      {
        "tag": "text",
        "text": "MODEL CALLS · OUT",
        "top": 1433,
        "property": "font"
      },
      {
        "tag": "tspan",
        "text": "· OUT",
        "top": 1433,
        "property": "font"
      },
      {
        "tag": "text",
        "text": "MCP TOOLS · OUT",
        "top": 1433,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "Commit Mono",
    "fontStack": "\"Commit Mono\", ui-monospace, monospace",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "text",
        "text": "PTY · /home/user",
        "top": 7289,
        "property": "font"
      },
      {
        "tag": "text",
        "text": "Your application",
        "top": 9027,
        "property": "font"
      },
      {
        "tag": "text",
        "text": "Your customers",
        "top": 9408,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": "Commit Mono",
    "fontStack": "\"Commit Mono\", ui-monospace, monospace",
    "weight": "400",
    "size": "12px",
    "lineHeight": "12px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "Labs under NDA",
        "top": 6515,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Labs under NDA",
        "top": 6511,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Labs under NDA",
        "top": 6515,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-22",
    "family": "Commit Mono",
    "fontStack": "\"Commit Mono\", ui-monospace, monospace",
    "weight": "400",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "text",
        "text": "POST /v1/charges",
        "top": 7730,
        "property": "font"
      },
      {
        "tag": "text",
        "text": "Authorization: $STRIPE_KEY",
        "top": 7756,
        "property": "font"
      },
      {
        "tag": "text",
        "text": "POST /v1/charges",
        "top": 7878,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-23",
    "family": "Commit Mono",
    "fontStack": "\"Commit Mono\", ui-monospace, monospace",
    "weight": "400",
    "size": "13px",
    "lineHeight": "19.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "✕",
        "top": 330,
        "property": "font"
      },
      {
        "tag": "text",
        "text": "allow",
        "top": 7437,
        "property": "font"
      },
      {
        "tag": "text",
        "text": "api.openai.com",
        "top": 7437,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-24",
    "family": "Commit Mono",
    "fontStack": "\"Commit Mono\", ui-monospace, monospace",
    "weight": "400",
    "size": "10px",
    "lineHeight": "12px",
    "letterSpacing": "0.2px",
    "traits": "uppercase",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "private subnet · 10.0.2.0/24",
        "top": 225,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "ingress · 443",
        "top": 318,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "egress blocked",
        "top": 352,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-25",
    "family": "Commit Mono",
    "fontStack": "\"Commit Mono\", ui-monospace, monospace",
    "weight": "400",
    "size": "10px",
    "lineHeight": "15px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 4,
    "contexts": [
      {
        "tag": "text",
        "text": "Lifecycle",
        "top": 1669,
        "property": "font"
      },
      {
        "tag": "text",
        "text": "Network",
        "top": 1717,
        "property": "font"
      },
      {
        "tag": "text",
        "text": "Storage",
        "top": 1765,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-26",
    "family": "Commit Mono",
    "fontStack": "\"Commit Mono\", ui-monospace, monospace",
    "weight": "400",
    "size": "12px",
    "lineHeight": "13.2px",
    "letterSpacing": "0.1px",
    "traits": "uppercase",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "your vpc · us-east-1",
        "top": 193,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "gate · mTLS",
        "top": 356,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "sealed · microVM",
        "top": 342,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-27",
    "family": "Commit Mono",
    "fontStack": "\"Commit Mono\", ui-monospace, monospace",
    "weight": "400",
    "size": "10px",
    "lineHeight": "15px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "text",
        "text": "XFCE · 1024×768",
        "top": 5964,
        "property": "font"
      },
      {
        "tag": "text",
        "text": "XFCE · 1024×768",
        "top": 5964,
        "property": "font"
      },
      {
        "tag": "text",
        "text": "XFCE · 1024×768",
        "top": 5964,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-28",
    "family": "Commit Mono",
    "fontStack": "\"Commit Mono\", ui-monospace, monospace",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "text",
        "text": "E2B Cloud",
        "top": 9098,
        "property": "font"
      },
      {
        "tag": "text",
        "text": "Your cloud",
        "top": 9257,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-29",
    "family": "Commit Mono",
    "fontStack": "\"Commit Mono\", ui-monospace, monospace",
    "weight": "400",
    "size": "14px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "pip install e2b",
        "top": 16202,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "npm i e2b",
        "top": 16202,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-30",
    "family": "Commit Mono",
    "fontStack": "\"Commit Mono\", ui-monospace, monospace",
    "weight": "400",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "text",
        "text": "E2B Cloud",
        "top": 1626,
        "property": "font"
      },
      {
        "tag": "text",
        "text": "Your cloud",
        "top": 1748,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-31",
    "family": "PP Supply Sans",
    "fontStack": "\"PP Supply Sans\", \"PP Supply Sans Fallback\", sans-serif",
    "weight": "300",
    "size": "56px",
    "lineHeight": "47.6px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Help Vasek defeat",
        "top": 17262,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-32",
    "family": "PP Supply Sans",
    "fontStack": "\"PP Supply Sans\", \"PP Supply Sans Fallback\", sans-serif",
    "weight": "580",
    "size": "56px",
    "lineHeight": "47.6px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "the VM apocalypse",
        "top": 17310,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-33",
    "family": "Commit Mono",
    "fontStack": "\"Commit Mono\", ui-monospace, monospace",
    "weight": "400",
    "size": "24px",
    "lineHeight": "36px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "text",
        "text": "SDK",
        "top": 9089,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-34",
    "family": "Commit Mono",
    "fontStack": "\"Commit Mono\", ui-monospace, monospace",
    "weight": "400",
    "size": "20px",
    "lineHeight": "30px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "text",
        "text": "python analyze.py sales.csv",
        "top": 7390,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-35",
    "family": "Commit Mono",
    "fontStack": "\"Commit Mono\", ui-monospace, monospace",
    "weight": "400",
    "size": "12px",
    "lineHeight": "19.2px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Built for networks nothing may leave.",
        "top": 9430,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-36",
    "family": "PP Supply Sans",
    "fontStack": "\"PP Supply Sans\", \"PP Supply Sans Fallback\", sans-serif",
    "weight": "580",
    "size": "24px",
    "lineHeight": "20.4px",
    "letterSpacing": "0.5px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "button",
        "text": "Click to start",
        "top": 17394,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "lab(0 0 0)",
    "count": 312,
    "contexts": [
      {
        "tag": "nav",
        "text": "EnterpriseResourcesCompanyPricingDocsGitHub14.7KSign upSign inConsoleBook a Demo",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "Sign in",
        "top": 24,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "",
        "top": 64,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#F4F4F4",
    "alpha": 1,
    "cssValue": "lab(96.1952 0 0)",
    "count": 402,
    "contexts": [
      {
        "tag": "a",
        "text": "Skip to main content",
        "top": -1,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 18,
        "property": "svg-fill"
      },
      {
        "tag": "button",
        "text": "Resources",
        "top": -2,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#2C2C2C",
    "alpha": 1,
    "cssValue": "lab(17.9996 0 0)",
    "count": 389,
    "contexts": [
      {
        "tag": "div",
        "text": "EnterpriseResourcesCompanyPricingDocsGitHub14.7KSign upSign inConsoleBook a Demo",
        "top": 0,
        "property": "border"
      },
      {
        "tag": "figure",
        "text": "vpc-0a91@ us-east-1 · self-hostedus-east-1$ e2b sandbox create✓ ready i4h2k9x · from snapshotagent> ",
        "top": 142,
        "property": "border"
      },
      {
        "tag": "div",
        "text": "",
        "top": 339,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#1F1F1F",
    "alpha": 1,
    "cssValue": "lab(11.7588 0 -0.00000298023)",
    "count": 130,
    "contexts": [
      {
        "tag": "div",
        "text": "vpc-0a91@ us-east-1 · self-hostedus-east-1",
        "top": 143,
        "property": "border"
      },
      {
        "tag": "p",
        "text": "booted from snapshotuptime 04:37:26",
        "top": 500,
        "property": "border"
      },
      {
        "tag": "span",
        "text": "",
        "top": 550,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#A6A6A6",
    "alpha": 1,
    "cssValue": "lab(68.1232 -0.0000298023 0)",
    "count": 231,
    "contexts": [
      {
        "tag": "span",
        "text": "The agent cloud",
        "top": 181,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "100K+ teams on E2B · 94 of the Fortune 100 signed up · top AI labs & startups run here",
        "top": 684,
        "property": "text"
      },
      {
        "tag": "h3",
        "text": "Agent applications",
        "top": 5687,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#585858",
    "alpha": 1,
    "cssValue": "color(srgb 0.345052 0.345125 0.345103)",
    "count": 153,
    "contexts": [
      {
        "tag": "a",
        "text": "Book a Demo",
        "top": 14,
        "property": "border"
      },
      {
        "tag": "span",
        "text": "",
        "top": 156,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "@ us-east-1 · self-hosted",
        "top": 153,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#141414",
    "alpha": 1,
    "cssValue": "lab(6.32376 0 0)",
    "count": 40,
    "contexts": [
      {
        "tag": "span",
        "text": "us-east-1",
        "top": 147,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "private subnet · 10.0.2.0/24",
        "top": 231,
        "property": "border"
      },
      {
        "tag": "polygon",
        "text": "",
        "top": 1785,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#F0EDE8",
    "alpha": 1,
    "cssValue": "rgb(240, 237, 232)",
    "count": 1,
    "contexts": [
      {
        "tag": "section",
        "text": "Help Vasek defeat the VM apocalypseClick to start",
        "top": 16992,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "lab(100 0 0)",
    "count": 17,
    "contexts": [
      {
        "tag": "a",
        "text": "Sign in",
        "top": 14,
        "property": "control-background"
      },
      {
        "tag": "span",
        "text": "Start building",
        "top": 467,
        "property": "text"
      },
      {
        "tag": "rect",
        "text": "",
        "top": 5936,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#E6E6E6",
    "alpha": 1,
    "cssValue": "lab(91.2884 -0.0000298023 0)",
    "count": 125,
    "contexts": [
      {
        "tag": "figure",
        "text": "",
        "top": 5935,
        "property": "border"
      },
      {
        "tag": "rect",
        "text": "",
        "top": 6003,
        "property": "svg-stroke"
      },
      {
        "tag": "rect",
        "text": "",
        "top": 5985,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#E32A01",
    "alpha": 1,
    "cssValue": "rgb(227, 42, 1)",
    "count": 130,
    "contexts": [
      {
        "tag": "a",
        "text": "Start building",
        "top": 453,
        "property": "control-background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 339,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 334,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#8A8A8A",
    "alpha": 1,
    "cssValue": "lab(57.4744 0 0)",
    "count": 287,
    "contexts": [
      {
        "tag": "svg",
        "text": "GitHub",
        "top": 24,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 24,
        "property": "svg-fill"
      },
      {
        "tag": "span",
        "text": "14.7K",
        "top": 23,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#CE2600",
    "alpha": 1,
    "cssValue": "rgb(206, 38, 0)",
    "count": 2,
    "contexts": [
      {
        "tag": "polygon",
        "text": "",
        "top": 1769,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 1525,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#FF3001",
    "alpha": 1,
    "cssValue": "rgb(255, 48, 1)",
    "count": 1,
    "contexts": [
      {
        "tag": "polygon",
        "text": "",
        "top": 1525,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#3D3D3D",
    "alpha": 1,
    "cssValue": "lab(25.76 -0.0000149012 0)",
    "count": 45,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 9091,
        "property": "svg-stroke"
      },
      {
        "tag": "g",
        "text": "",
        "top": 9188,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#FAFAFA",
    "alpha": 1,
    "cssValue": "lab(98.2716 0 0)",
    "count": 9,
    "contexts": [
      {
        "tag": "rect",
        "text": "",
        "top": 6003,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#A03017",
    "alpha": 1,
    "cssValue": "rgb(160, 48, 23)",
    "count": 1,
    "contexts": [
      {
        "tag": "polygon",
        "text": "",
        "top": 1625,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#181818",
    "alpha": 1,
    "cssValue": "oklab(0.209588 -0.00000205685 0.00000488135)",
    "count": 13,
    "contexts": [
      {
        "tag": "polygon",
        "text": "",
        "top": 1565,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#D4D4D4",
    "alpha": 1,
    "cssValue": "oklab(0.869898 -0.00000870228 0.0000203848)",
    "count": 72,
    "contexts": [
      {
        "tag": "text",
        "text": "desktop.left_click(436, 124)",
        "top": 6054,
        "property": "svg-fill"
      },
      {
        "tag": "circle",
        "text": "",
        "top": 5966,
        "property": "svg-fill"
      },
      {
        "tag": "rect",
        "text": "",
        "top": 5991,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#212121",
    "alpha": 1,
    "cssValue": "oklab(0.245677 -0.00000243864 0.00000574565)",
    "count": 6,
    "contexts": [
      {
        "tag": "polygon",
        "text": "",
        "top": 1541,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#171717",
    "alpha": 1,
    "cssValue": "oklab(0.204462 -0.00000201077 0.00000476616)",
    "count": 4,
    "contexts": [
      {
        "tag": "polygon",
        "text": "",
        "top": 1589,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-22",
    "hex": "#151515",
    "alpha": 1,
    "cssValue": "oklab(0.194288 -0.00000192259 0.00000454055)",
    "count": 3,
    "contexts": [
      {
        "tag": "polygon",
        "text": "",
        "top": 1685,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-23",
    "hex": "#E1E1E1",
    "alpha": 1,
    "cssValue": "rgb(225, 225, 225)",
    "count": 3,
    "contexts": [
      {
        "tag": "rect",
        "text": "",
        "top": 6007,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-24",
    "hex": "#161616",
    "alpha": 1,
    "cssValue": "oklab(0.1999 -0.00000196975 0.00000466362)",
    "count": 2,
    "contexts": [
      {
        "tag": "polygon",
        "text": "",
        "top": 1517,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-25",
    "hex": "#191919",
    "alpha": 1,
    "cssValue": "oklab(0.212154 -0.00000210278 0.00000496024)",
    "count": 2,
    "contexts": [
      {
        "tag": "polygon",
        "text": "",
        "top": 1709,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-26",
    "hex": "#1C1C1C",
    "alpha": 1,
    "cssValue": "oklab(0.226102 -0.0000022301 0.00000527549)",
    "count": 2,
    "contexts": [
      {
        "tag": "polygon",
        "text": "",
        "top": 1733,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-27",
    "hex": "#F4F4F4",
    "alpha": 0.8,
    "cssValue": "oklab(0.967198 -0.00000962615 0.0000226498 / 0.8)",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "pip install e2b",
        "top": 16202,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-28",
    "hex": "#202020",
    "alpha": 1,
    "cssValue": "oklab(0.245588 -0.00000243769 0.00000574351)",
    "count": 1,
    "contexts": [
      {
        "tag": "polygon",
        "text": "",
        "top": 1685,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-29",
    "hex": "#1A1A1A",
    "alpha": 1,
    "cssValue": "oklab(0.21564 -0.00000211865 0.00000502422)",
    "count": 1,
    "contexts": [
      {
        "tag": "polygon",
        "text": "",
        "top": 1637,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-30",
    "hex": "#1B1B1B",
    "alpha": 1,
    "cssValue": "oklab(0.221017 -0.00000217593 0.00000515336)",
    "count": 1,
    "contexts": [
      {
        "tag": "polygon",
        "text": "",
        "top": 1781,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-31",
    "hex": "#1E1E1E",
    "alpha": 1,
    "cssValue": "oklab(0.235223 -0.00000232727 0.00000549456)",
    "count": 1,
    "contexts": [
      {
        "tag": "polygon",
        "text": "",
        "top": 1733,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-32",
    "hex": "#8B8B8B",
    "alpha": 0.30196078431372547,
    "cssValue": "color(srgb 0.541067 0.541176 0.541143 / 0.3)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 12806,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-33",
    "hex": "#028853",
    "alpha": 1,
    "cssValue": "lab(49.7241 -42.6771 19.3083)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 16924,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-34",
    "hex": "#050810",
    "alpha": 1,
    "cssValue": "rgb(5, 8, 16)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 12973,
        "property": "svg-fill"
      }
    ]
  }
]
```

### Extraction limits

- Font families are computed CSS declarations, not optical font identification.
- Colors are computed CSS converted by the browser to sRGB; image/video pixels and gradient stops are not sampled.
- Transparent colors are recorded with alpha but excluded from opaque palette role assignments.
- Only currently rendered DOM elements are sampled; closed shadow roots and iframe contents are excluded.

## Type, spacing, and shape language

- Spacing rhythm: Content is structured on a rigid, visible grid. Spacing is intentional and often delineated by 1px solid borders, creating distinct modular cells.
- Corner style: Sharp corners dominate. Border-radius is virtually zero across layout containers, cards, and buttons, enforcing a harsh, mechanical feel.
- Radius: 0px for vast majority of UI elements. Occasional minimal rounding (e.g., 2px) on very small badges or toggle tracks.
- Borders: Thin, 1px solid lines using color-3 (#2C2C2C) are pervasive, forming the structural skeleton of the layout and creating bento-box-like compartments.
- Buttons: Buttons are strictly rectangular. Primary buttons feature solid red fills with no border radius. Secondary buttons are transparent with 1px grey borders.
- Content width: Wide max-width, utilizing a large portion of the 1440px viewport to accommodate complex diagrams and multi-column grid layouts.
- Density: High density, particularly in technical sections displaying code or network stats, utilizing small monospaced fonts (10px-12px) to pack in information.
- Evidence: DOM analysis reveals extensive use of 1px border declarations on divs, raw HTML structure without rounded utility classes, and dense typographical hierarchies spanning 10px Commit Mono to 180px PP Supply Sans.

## Sections

Gallery section count: 16. Each entry corresponds to one gallery capture.

1. **Navbar — AI Agent Cloud Navbar** (Home)
   Compact monospace links and a single filled sign-in button keep navigation scannable while the demo button stands out as the main action.
   Capture: 1440×64px; page bounds 0–64px of 15462px; source section ID: `b0f7b05a-4ade-4dcf-ba14-c1b081b23ec7`; image: https://media.designdetails.io/library/2d1af173ac73aa37a2996ff972ef58172feed33b7e4f53740aaa91d52e2ab986/b0f7b05a-4ade-4dcf-ba14-c1b081b23ec7.webp
   SECTION.md v3.2: `b0f7b05a-4ade-4dcf-ba14-c1b081b23ec7` (deterministic evidence; editorial review pending)
2. **Hero — Split hero with product panel** (Home)
   A large uppercase headline and two contrasting buttons sit beside a sandbox UI preview, so visitors grasp the offer and next step immediately.
   Capture: 1440×595px; page bounds 64–659px of 15462px; source section ID: `87aee33d-f069-4420-aaa4-ea5be53f8551`; image: https://media.designdetails.io/library/c4ac91ec05ad2a8484205dbb99040a768e70f6c75cedf1aab13e1b50881f4da6/87aee33d-f069-4420-aaa4-ea5be53f8551.webp
   SECTION.md v3.2: `87aee33d-f069-4420-aaa4-ea5be53f8551` (deterministic evidence; editorial review pending)
3. **Logo Cloud — Two-row customer logo strip** (Home)
   Monochrome logos on black with a single claim line above build credibility without pulling attention from the page.
   Capture: 1440×258px; page bounds 659–917px of 15462px; source section ID: `82ab4348-c585-40b7-b2a7-31184253b83e`; image: https://media.designdetails.io/library/9fb92351ac0456f67bf05405bd6cfcb6ca6c3b2f6aed2799e49775e33c9282e1/82ab4348-c585-40b7-b2a7-31184253b83e.webp
   SECTION.md v3.2: `82ab4348-c585-40b7-b2a7-31184253b83e` (deterministic evidence; editorial review pending)
4. **Features — Isometric diagram of layered runtime** (Home)
   An exploded isometric illustration with a small side table shows the architecture visually, making an abstract infrastructure idea concrete.
   Capture: 1440×2256px; page bounds 917–3173px of 15462px; source section ID: `54347cf7-aaf2-4197-a721-fa75a1f3834f`; image: https://media.designdetails.io/library/136697e147c4817f85b9233dbd30b5d393e4ad8d6ce810162464406515284b68/54347cf7-aaf2-4197-a721-fa75a1f3834f.webp
   SECTION.md v3.2: `54347cf7-aaf2-4197-a721-fa75a1f3834f` (deterministic evidence; editorial review pending)
5. **Gallery — Scrolling use-case card carousels** (Home)
   Two labelled carousel rows with cards, previews and case study links let visitors browse applications by category without long scrolling.
   Capture: 1440×1569px; page bounds 3173–4742px of 15462px; source section ID: `e277e2f7-ad0c-432a-a18e-43a6d60e9659`; image: https://media.designdetails.io/library/f50c8e0acc0d32f4236cf9f7cbba11b7c5a87c3bdf99a2c8a8a0503f01413ede/e277e2f7-ad0c-432a-a18e-43a6d60e9659.webp
   SECTION.md v3.2: `e277e2f7-ad0c-432a-a18e-43a6d60e9659` (deterministic evidence; editorial review pending)
6. **Features — Bordered grid of capability panels** (Home)
   Each capability gets a bordered cell with a code or graph visual and short caption, so a dense technical list scans quickly.
   Capture: 1440×1688px; page bounds 4742–6430px of 15462px; source section ID: `36c5159d-0906-4b52-863d-88566dad7a5e`; image: https://media.designdetails.io/library/ff18d0bc8918b778fac82a40cfc939f69327607ba0b6266010ee806857145979/36c5159d-0906-4b52-863d-88566dad7a5e.webp
   SECTION.md v3.2: `36c5159d-0906-4b52-863d-88566dad7a5e` (deterministic evidence; editorial review pending)
7. **Features — Deployment options list with diagram** (Home)
   A stacked list with status tags beside an isometric diagram explains hosting choices, with the expanded option showing key details.
   Capture: 1440×897px; page bounds 6430–7327px of 15462px; source section ID: `aa0807d7-6df8-4c7d-8e91-ad990a1090b5`; image: https://media.designdetails.io/library/fb5c3ddd1dcbbcafff75ebaa3cb4047dbefc8498ccb54eeba59db7e5ac5e44e8/aa0807d7-6df8-4c7d-8e91-ad990a1090b5.webp
   SECTION.md v3.2: `aa0807d7-6df8-4c7d-8e91-ad990a1090b5` (deterministic evidence; editorial review pending)
8. **Features — Security claim with pixel art** (Home)
   A bold headline, short proof paragraph and single button sit beside a dotted graphic and tooltip that answers the speed objection.
   Capture: 1440×544px; page bounds 7327–7871px of 15462px; source section ID: `6e30d604-85a6-4c12-ace2-24642f9a8a7c`; image: https://media.designdetails.io/library/244eea584dfb68854ebae406e272ff6c52683724a0666c61db1b924224ab8388/6e30d604-85a6-4c12-ace2-24642f9a8a7c.webp
   SECTION.md v3.2: `6e30d604-85a6-4c12-ace2-24642f9a8a7c` (deterministic evidence; editorial review pending)
9. **Stats — Four large metrics over texture** (Home)
   Oversized numbers with tiny captions in a row give instant scale proof, while the cropped headline above adds visual drama.
   Capture: 1440×929px; page bounds 7871–8800px of 15462px; source section ID: `563d476e-3498-4006-8b21-fcc28d8c240d`; image: https://media.designdetails.io/library/e888ab21fdb950e80138e9f66b7e15a483afc3292ff2e28b635ba12a703aa83b/563d476e-3498-4006-8b21-fcc28d8c240d.webp
   SECTION.md v3.2: `563d476e-3498-4006-8b21-fcc28d8c240d` (deterministic evidence; editorial review pending)
10. **Testimonials — Customer quote card carousel** (Home)
   Cards pair a logo, a specific quote, the speaker's role and a case study button, making each endorsement credible and actionable.
   Capture: 1440×756px; page bounds 8800–9556px of 15462px; source section ID: `6574dd4b-b7ef-4bbd-a177-99dd95b96431`; image: https://media.designdetails.io/library/3e4792f69fca444aafa78e9485c8b1b0690da622460e6dd6cf47ec0164c137d6/6574dd4b-b7ef-4bbd-a177-99dd95b96431.webp
   SECTION.md v3.2: `6574dd4b-b7ef-4bbd-a177-99dd95b96431` (deterministic evidence; editorial review pending)
11. **Features — Integration grid with SDK icons** (Home)
   A tiled grid of named tools with one highlighted live item and an icon row below shows broad compatibility at a glance.
   Capture: 1440×1864px; page bounds 9556–11420px of 15462px; source section ID: `cf28505f-3f35-4cbf-b63e-df44d77cef6d`; image: https://media.designdetails.io/library/16b71fc02c53b57c2cdbd7504105b813d22b3e91b4eeb7358013873892adb0d5/cf28505f-3f35-4cbf-b63e-df44d77cef6d.webp
   SECTION.md v3.2: `cf28505f-3f35-4cbf-b63e-df44d77cef6d` (deterministic evidence; editorial review pending)
12. **Other — Open source section with repo labels** (Home)
   Repo tags with star counts float over a dotted graphic next to two buttons, proving open source credibility and offering clear actions.
   Capture: 1440×772px; page bounds 11420–12192px of 15462px; source section ID: `330bfd8b-4a5e-4db5-8f0c-0da90f84cdca`; image: https://media.designdetails.io/library/0a7d52852cdd28d4d83de7c1f23907f9d327f5dc61139cf1fddc2ddf4f8cd7ff/330bfd8b-4a5e-4db5-8f0c-0da90f84cdca.webp
   SECTION.md v3.2: `330bfd8b-4a5e-4db5-8f0c-0da90f84cdca` (deterministic evidence; editorial review pending)
13. **Pricing — Three-tier pricing cards** (Home)
   Large price figures at the top of equal cards with short feature lists and one button each make plans easy to compare.
   Capture: 1440×1316px; page bounds 12192–13508px of 15462px; source section ID: `93eac9b2-fa0d-4882-8cb3-d983ea8825b1`; image: https://media.designdetails.io/library/17f8fbfc0ac78de5a4f768618e6d0661a8e340c46f1894ccc93b498025833b32/93eac9b2-fa0d-4882-8cb3-d983ea8825b1.webp
   SECTION.md v3.2: `93eac9b2-fa0d-4882-8cb3-d983ea8825b1` (deterministic evidence; editorial review pending)
14. **CTA — Centered closing call to action** (Home)
   A short headline, paired buttons and an install command over a dark pixel swirl let both buyers and developers act immediately.
   Capture: 1440×640px; page bounds 13508–14148px of 15462px; source section ID: `3a8e2d13-ae14-4817-8c50-ac2c11109988`; image: https://media.designdetails.io/library/8ade43efc3b28d09e7f96ab4e4aac2ef4b113d5976cf5d490c2e62e3560776a2/3a8e2d13-ae14-4817-8c50-ac2c11109988.webp
   SECTION.md v3.2: `3a8e2d13-ae14-4817-8c50-ac2c11109988` (deterministic evidence; editorial review pending)
15. **Footer — Footer with link columns and badges** (Home)
   Grouped link columns, social icons, compliance badges and a status indicator keep a dark footer organized and trustworthy.
   Capture: 1440×594px; page bounds 14148–14742px of 15462px; source section ID: `e6adf12e-ecb1-43ef-bd65-172f09672619`; image: https://media.designdetails.io/library/8fba994159dded65f07697bb60caf6ae3633f582c10d7d0e1db2c69c4c42f76e/e6adf12e-ecb1-43ef-bd65-172f09672619.webp
   SECTION.md v3.2: `e6adf12e-ecb1-43ef-bd65-172f09672619` (deterministic evidence; editorial review pending)
16. **Other — Playful click-to-start game banner** (Home)
   A moon-surface scene with a centered prompt and bracketed button adds a memorable interactive moment that gives the brand personality.
   Capture: 1440×720px; page bounds 14742–15462px of 15462px; source section ID: `b46566c2-d6a1-43d5-ad5c-71a3d58c406c`; image: https://media.designdetails.io/library/556d30051ba17701c3fcff8f703bed47e6cbccd409c84944294f4e22b0f2ecb9/b46566c2-d6a1-43d5-ad5c-71a3d58c406c.webp
   SECTION.md v3.2: `b46566c2-d6a1-43d5-ad5c-71a3d58c406c` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/8fcb7331b53f8e064b75684a2c83e876d18af8821c9a4c9ba1a7adf6f7cea432/desktop_full-7d3409e3-2026-11-06T09-22-04-774Z.webp
- Mobile screenshot: https://media.designdetails.io/library/e472c92403a74c395366bbeeda540898a2c068e201cca052108d36479d482909/mobile_full-7d3409e3-2026-11-06T09-22-57-606Z.jpg
- Open Graph image: https://media.designdetails.io/library/1a637c931894470179912cff98af086b63356324e96393f1a8a1de7365cd43a4/og_image-7d3409e3-2026-11-06T09-22-14-714Z.webp
- Full-page video: https://media.designdetails.io/library/cb92470c0f4864d210f1e2de09dccfc27c100095c7deb535fe7e9e53f6c2518e/motion-1793958054566.mp4
- Video poster: https://media.designdetails.io/library/088175abe4f1a8155b84399dec7f15bcb50dfbc119b3600a9c83f8ce162af6f0/motion-poster-1793958054566.webp
- Motion status: Recording attached. Consult the motion score and section motion records; do not infer exact easing from frames alone.

## Implementation contract

- Treat computed CSS values, screenshot dimensions, and section bounds as measured evidence.
- Treat typography roles, palette roles, style labels, quality scores, and prose analysis as model or curator judgments.
- Rebuild the page in the listed section order. Request SECTION.md v3.2 using the listed ID. Promoted IDs include editorial observation and judgment; raw gallery IDs still return deterministic geometry, site design facts, media treatment, and explicit evidence gaps.
- Do not invent exact responsive behavior, motion curves, or hidden interaction states when they were not captured.

## Reusable components

- Navigation Bar
- Hero
- Logo Strip
- Feature Collection
- Comparison Table
- Pricing Table
- Primary Button
- Outline Button
- Footer
- Terminal Window Mockups
- Interactive Technical Diagrams
- Bento Box Grid

## Quality rubric

Overall: 63.85/100 (Good)
Evidence coverage: 100%
Judge tier: Good
Verdict: E2B's site executes a technical, developer-centric visual language with real discipline: a clear three-tier typographic system, a tightly restrained black/white/red palette, and a grid-based layout that organizes dense technical content into legible bordered modules across a long page. Motion is more than decorative — a scroll-driven isometric assembly sequence, focused hover states on a logo grid, and a playful footer mini-game demonstrate variety and intent beyond a single hero flourish. Content integration is a particular strength, with diagrams and terminal mockups that map specifically to real product concepts (VPC isolation, egress policy, pricing tiers) rather than generic illustration. However, the overall idiom — dark canvas, terminal window motifs, exploded isometric diagrams, bento-box cards — has become a dominant convention across AI-infrastructure and developer-tool marketing sites, which limits how much credit originality can claim despite the genuinely novel footer game. The result is a well-crafted, coherent execution within a familiar genre rather than a landmark reinvention of it, placing the overall experience solidly in the 'good' tier.

- Typography (15%): 68 — A deliberate three-tier type system (PP Supply Sans for display, Inter for body/subheads, Commit Mono for technical/UI labels) is applied consistently across scales from 10px to 180px, with uppercase tracking and negative letter-spacing reinforcing the technical tone. Hierarchy is legible and purposeful rather than decorative, and the monospace family is used functionally for code, metadata, and labels rather than just as an aesthetic flourish.
- Color (10%): 64 — A tightly restricted palette (pure black canvas, off-white text, dark grey borders/surfaces, single red accent) is applied with discipline across every section, never diluted by secondary brand colors. This creates strong consistency and a clear accent hierarchy for CTAs and highlights, though the palette itself is a common dark-developer-tool convention rather than a distinctive color system.
- Layout (20%): 67 — The page uses a rigid bordered-grid/bento system that organizes dense technical content (feature cards, comparison tables, pricing tiers, diagrams) into legible modular cells with a consistent 1px border language and sharp corners throughout. The structure scales coherently from hero to footer across a very long page, though the bento-grid/terminal-panel pattern is a widely used convention in current developer-tool marketing sites rather than a novel structural approach.
- Motion (20%): 66 — Multiple authored motion moments exist beyond simple fades: a scroll-driven 3D isometric assembly sequence tied to text reveals, focus-based hover interactions on the logo grid, and a genuinely interactive footer mini-game with cursor change and clickable physics-like objects. These moments are varied in kind (scroll narrative, hover feedback, game interaction) and distributed across the page rather than confined to the hero.
- Originality (25%): 55 — The site layers several recognizable developer-marketing conventions (terminal window mockups, isometric 3D infrastructure diagrams, dark-mode monospace branding) that have become a crowded genre among AI-infrastructure and dev-tool startups. The footer mini-game is a genuinely distinctive, hard-to-substitute idea that adds surprise value, but it sits alongside otherwise familiar patterns rather than a system of multiple unusual ideas working together.
- Content (10%): 69 — Visual elements are tightly coupled to actual product mechanics rather than generic stock imagery: terminal panels show real-looking CLI output, network diagrams reflect actual security/VPC concepts, and comparison/pricing tables map directly to deployment options (E2B Cloud, BYOC, Private cloud). The footer game and stat callouts (2B+ sandboxes, 15M+ downloads) reinforce brand narrative with specificity.

Coverage: 100% of the current weighted rubric. Compare overall scores only at similar evidence coverage.

Formula: weighted mean of scored axes — Typography 15%, Color 10%, Layout 20%, Motion 20%, Originality 25%, Content 10%. Inconclusive and not-assessed axes are excluded and coverage is shown explicitly.

## Verification checklist

- [x] Score evidence
- [x] Design tokens
- [x] Functional palette
- [ ] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

A black background with mono labels, bracketed tags and a glitchy noise texture gives this infrastructure tool a secure, terminal-like mood, while the diagrammed microVM panel and layered server-block illustration make an abstract sandbox concept easy to picture. Bright orange accents and oversized condensed headlines break up the long dark page into clear, scannable chapters.

## Usage guidance

Use this record as design evidence. Combine it with other references and create an original implementation; do not reproduce the source website or its proprietary copy and assets.