E2B — design system & UI screens

Dev Tools · 1 screen · 11 sections · https://e2b.dev/

This is a landing page for an AI-powered agent builder platform that helps teams automate customer service, support, and business workflows. The page uses a long-form vertical scroll layout with alternating sections of full-width text, feature cards in grid layouts, code examples, customer testimonials, and calls-to-action stacked throughout. Each section clearly labels its purpose (e.g., "AI Sandboxes for Computer Use Agents," "Built for AI Agents," "In Your Code") with supporting visuals like mockups, screenshots, and abstract graphics.

Open in Mozaika →

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

Decoded design system

E2B's decoded design system: background #FAFAFA, text #000000, accent #3898EC, link #3898EC, primary #0000EE; type scale h1 64px / h2 60px / body 14px; 4px spacing base; 0px base radius. The single interactive/action color is #000000 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#FAFAFA`
surface	`#EBEBEB`
border	`#D4D4D4`
text	`#000000`
text_muted	`#5F5F5F`
primary	`#0000EE`
accent	`#3898EC`
link	`#3898EC`
secondary	`#FF8800`
button_bg	`#000000`
button_text	`#FFFFFF`

Using these colors

Action color #000000 — the single interactive color; only on things you click or must notice, never large fills.
accent, link are all #3898EC — one role, not several (the action color).
accent #3898EC — accent for emphasis — keep it rare on the page.
primary #0000EE — a brand color — but the call-to-action uses #000000, not this.
secondary #FF8800 — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

Typography

Heading: IBM Plex Sans
Body: IBM Plex Sans
Mono: IBM Plex Mono
h1: 64px
h2: 60px
body: 14px

Spacing

base unit: 4px
scale: 2px, 3px, 4px, 6px, 8px, 12px, 16px, 20px, 24px, 40px

Radii

base: 0px
button: 0px

Motion

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

durations: 150ms
easings: ease · cubic-bezier(0.8, 0, 0.2, 1)
animated properties: transform

Native design tokens

Token	Value
`--color--bg-primary`	`#fafafa`
`--color--content-primary`	`#000`
`--color--stroke-primary`	`#d6d6d6`
`--color--content-tertiary`	`#666`
`--color--brand`	`#f80`
`--color--content-secondary`	`#333`
`--color--stroke-primary-hover`	`#b8b8b8`
`--color--content-quad`	`#999`
`--color--content-positive`	`#49a147`
`--color--content-negative`	`#eb361c`

…and 46 more measured on the page.

Button states (measured)

primary hover: border 1px solid rgb(31, 31, 31) · background #1F1F1F
primary focus: outline 1px auto rgb(16, 16, 16)

Layout (measured)

container max-width: 1200px
nav: 52px relative
common grid: 2 columns

Motion choreography (measured)

Load order: div.h1-flips

Themes

dark counterpart: background #000000, text #333333.

Responsive (measured)

breakpoints: 479px · 767px · 991px · 1920px
mobile (390px): hero 28px · nav hamburger

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

Screens

Product Landing Page