# E2B · Design system migration spec

> Source: https://e2b.dev  ·  Curated by OpenDesign  ·  en

> The site is worth including for its excellent execution of a developer-centric 'blueprint' aesthetic, using typography and borders to create a clean, professional, and highly legible interface.

## 1. Identity DNA

E2B presents itself as a clean, monospaced blueprint for enterprise AI infrastructure. The design language is one of technical precision—every element is a deliberate construction, not a decorative afterthought. This is a system that values the clarity of a well-documented API over the flourish of a marketing landing page.

**One-liner:** Enterprise-grade open-source AI sandboxes for automations and agents.
**Keywords:** AI · Sandbox · Automations · Agents · Open-source
**Analogy:** A clean, monospaced blueprint for enterprise AI infrastructure.

## 2. Color

The color system is a study in restraint, defined by a stark, high-contrast monochrome palette of pure black and white. A single, vibrant orange acts as the system's sole chromatic accent, used sparingly to denote primary actions and critical emphasis.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FAFAFA` | main background |
| `--bg-quiet` | `#EBEBEB` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#333333` | secondary text |
| `--muted` | `#666666` | placeholder |
| `--accent` | `#FF8800` | single accent |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** A stark, high-contrast monochrome palette anchored by a single bright orange accent.

The principle is unambiguous: color is a functional signal, not a decorative tool.

## 3. Typography

The typographic hierarchy is built on a clear voice split. Navigation, labels, and code snippets speak in a structured **monospaced** font, set in uppercase, while massive display headlines use a tight, geometric sans-serif for maximum impact and body text relies on a standard sans for readability.

- **Display:** geometric-sans
- **Body:** grotesque-sans
- **Mono:** monospaced

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.0 | 700 | -0.8px | Hero headline |
| body | 16px | 1.5 | 400 | 0 | Body copy and descriptions |
| mono | 14px | 1.4 | 400 | 0 | Navigation links, labels, and code snippets |

**Type rules:**
- Navigation and labels are set in monospace, uppercase.
- Headlines use tight tracking and high weight.
- Body text uses a standard sans-serif for maximum legibility.

## 4. Spacing

Layout rhythm is governed by a strict 4px base grid, ensuring consistent increments across all components.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base with generous 24px gutters.

## 5. Surfaces

Surfaces are flat and diagrammatic, defined not by shadow but by thin, 1px solid black borders. This creates a consistent wireframe aesthetic that reinforces the system's technical, blueprint-like character.

- **Radius:** sm 6px · md 0px · lg 0px · pill 999px
- **Borders:** Thin 1px solid black borders, emphasizing a wireframe and diagrammatic aesthetic.

## 6. Layout

The structural skeleton begins with a centered single-column layout for the hero, establishing a clear focal point. It then transitions to multi-column feature sections, using generous whitespace and borders to organize complex information without visual clutter.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered single-column layout for the hero, transitioning to multi-column feature sections.

## 7. Motion & Interaction

Motion is treated as a functional feedback mechanism, not a narrative tool. Interactions are kept to subtle transforms on hover with fast, 0.15s durations, ensuring the interface remains responsive and maintains its technical, immediate feel.

- **Durations:** micro 150ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Subtle transform on hover for interactive elements.

- **Hover:** Subtle background or opacity shift.
- **Click:** Immediate response, no heavy animation.
- **Transition:** All elements transition with 0.15s duration for a snappy feel.
- **Keyboard:** Standard focus outlines provided by the browser.

## 8. Voice & Don'ts

The editorial voice is technical, confident, and direct—mirroring the tone of a well-written README. CTAs are framed as imperative, monospaced commands, and headlines are concise and uppercase, avoiding any semblance of marketing fluff.

- **Tone:** Technical, confident, and developer-focused.
- **Headline style:** Uppercase, bold, and concise.
- **CTA style:** Direct, imperative monospaced commands (e.g., START FOR FREE, VIEW DOCS).
- **Avoid:** Avoid overly marketing-heavy or fluff copy. / Avoid complex gradients or drop shadows. / Avoid cursive or overly decorative typefaces. / Avoid cluttered or multi-colored backgrounds. / Avoid large, multi-paragraph blocks of text in the hero. / Avoid playful or cartoonish iconography.

### Don'ts
- ❌ Don't use drop shadows — screenshot shows flat, 1px borders for all surfaces.
- ❌ Don't use vibrant multi-color gradients — screenshot shows a strict monochrome palette with a single orange accent.
- ❌ Don't use decorative serif or script fonts — screenshot shows strict geometric sans and monospaced categories.
- ❌ Don't use rounded corners on primary elements — screenshot shows sharp, 0px radius borders.
- ❌ Don't use lowercase for navigation — screenshot shows strict uppercase monospaced lettering for all nav items.
- ❌ Don't use center-aligned body text — screenshot shows strict left or center alignment only for headlines and CTAs.

The system deliberately avoids complexity: no drop shadows, no gradients, no decorative type, and no cluttered, multi-colored backgrounds.

## System Prompt (paste into AI tool)

```
This site is a technical developer tool focused on AI sandboxes, positioned with a 'blueprint' or 'wireframe' aesthetic. It uses a strict black-and-white palette with a single high-chroma orange accent (#FF8800). Typography relies on a combination of geometric sans-serif for massive display headlines and monospaced fonts for navigation, labels, and smaller UI elements. The layout is clean and spacious, defined by thin 1px black borders that give the components a technical, terminal-like feel. Critical constraints: Never use drop shadows or gradients; always use monospaced fonts for navigation and CTAs; keep the palette strictly monochrome with orange as the only exception.
```