E2B — Sign-In Form

---
version: alpha
name: E2B — Sign-In Form
colors:
  primary: '#000000'
  canvas: '#FFFFFF'
  ink: '#000000'
  surface: '#F4F4F4'
typography:
  heading:
    fontFamily: '"IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe
      UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color
      Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'
    fontSize: 16px
    fontWeight: 700
    lineHeight: 20px
  body:
    fontFamily: '"IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe
      UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color
      Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
---

## Overview
A compact centered E2B card offers GitHub/Google providers, an email field and account recovery. Inspected at 1440px desktop and 390px mobile widths on September 30, 2026.

## Colors
Palette tokens describe the observed visual roles. The auth page uses a light neutral shell independently of the promotional homepage. Transparent and gradient text layers must be considered with their painted background, not interpreted as solid-color text.

## Typography
The sampled heading uses "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" at 16px, weight 700, with 20px leading. Supporting sample: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", 14px / 20px. These are computed styles at capture width, not fixed requirements for every breakpoint. Use licensed font assets or deliberate substitutes.

## Layout
Keep the authentication panel narrow with full-width fields, visible labels and a single dominant continuation control. Provider choices sit apart from the email path; preserve legal and account-switching links. Mobile maintains usable side gutters. The desktop background has pale textured edge artwork around a centered card; mobile drops the decorative margins. Exact responsive breakpoints were not measured.

## Elevation & Depth
Preserve separation through the reference’s surface contrast, border rules and whitespace. Avoid adding heavy shadows to a flat interface. Shadow strength is visual guidance, not a measured token.

## Shapes
Keep the visible distinction between content panels, fields and actions. Match the photographed corner treatment rather than applying one global radius; measured element radii are retained in the evidence.

## Components
Captured logged out with empty fields. No credentials entered, form submitted or account created. Validation, recovery, delivery and successful authentication remain untested.

## Do's and Don'ts
Do adapt hierarchy, spacing and responsive ordering with your own brand and truthful copy. Do not reuse customer endorsements or performance numbers as your own. Do not infer hover, keyboard, validation, dark-mode or accessibility compliance from static images.