exe.dev

Overview

exe.dev is a developer infrastructure platform delivering persistent Linux sandboxes via SSH, designed for developers and AI agents who demand technical precision and reliability. The aesthetic embodies 'Technical Minimalism'—a design philosophy that strips away ornament in favor of pure functional clarity, using monospace typography and a high-contrast black-and-white palette to evoke the command line and Unix philosophy. The interface feels austere, direct, and unapologetically technical: every pixel serves a purpose, every interaction is predictable, and the visual language mirrors the terseness of shell commands. The emotional response is one of control and competence—users feel they are working with a system built by engineers for engineers, not a consumer product. Voice: precise, direct, and economical with words. The brand speaks in imperative mood and technical vocabulary without jargon inflation. Example: 'SSH into your sandbox. Deploy in seconds. Scale on demand.'

Colors

The color system is anchored in a stark primary of #111111 (near-black), used exclusively for interactive elements—buttons, links, and focus states—creating an unmistakable call-to-action against the light background. This primary is not decorative; it is the system's only accent, deployed with restraint to guide user attention. The surface stack uses the Slate palette (#f8fafc through #0f172a) to provide subtle depth without visual noise: surface-container-low (#f1f5f9) for secondary backgrounds, surface-container (#e2e8f0) for tertiary layers, and surface-container-highest (#94a3b8) for disabled or recessive states. Secondary (#475569) and tertiary (#64748b) are mid-tone grays used for body text and supporting information, maintaining legibility across the hierarchy. The on-surface color

Typography

The type system is built entirely on JetBrains Mono, a technical monospace font that reinforces the developer-first positioning and creates visual continuity with code editors and terminals. Display (60px, 700 weight, -0.02em tracking) is used sparingly for hero headlines and commands, while headline-lg (40px, 700 weight) anchors section titles with authority. Body-md (16px, 400 weight) is the workhorse for body copy and UI labels, set at a generous 24px line-height (1.5x) to maintain readability in a monospace context, where character width is fixed and line length can feel cramped. Label-md (14px, 600 weight) is applied to buttons and form labels, with 0.01em positive tracking to add visual separation in dense UI. All headings use 700 weight to create clear hierarchy without relying on s

Layout

The page grid is a 12-column fluid layout with a max-width of 1200px, centered on the viewport. Sections use lg spacing (40px) for vertical separation, creating a rhythm that feels deliberate and spacious without excess. The gutter is 24px, applied consistently to all container padding and inter-element spacing. Hero sections occupy full width with centered content, using md spacing (24px) for internal padding. Cards and content blocks use md padding (24px) internally, with sm spacing (12px) between nested elements. The design favors whitespace over density: a single call-to-action button sits alone in the hero, surrounded by breathing room, rather than competing with secondary CTAs. Container max-width is 1200px to prevent line lengths from exceeding ~80 characters at body-md size, a cons

Elevation & Depth

Depth is conveyed through subtle shadows and border treatments rather than dramatic layering. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.05)) for hover states on cards and inputs, md (0 4px 12px rgba(0, 0, 0, 0.08)) for floating elements like modals and dropdowns, and lg (0 12px 32px -8px rgba(0, 0, 0, 0.18), 0 4px 8px -4px rgba(0, 0, 0, 0.08)) for the most prominent overlays. Cards and inputs use a 1px solid border at {colors.surface-container-high} (#cbd5e1) to define edges without relying on shadow alone. On hover, cards transition from no shadow to sm shadow (0 1

Shapes

The shape philosophy is 'Architectural Sharpness'—corners are minimal and geometric, reflecting the precision of technical systems. Buttons use sm radius (0.25rem / 4px) for a crisp, utilitarian appearance that echoes command-line interfaces. Cards and containers use md radius (0.75rem / 6px) to soften edges slightly without introducing organic curves. Input fields use DEFAULT radius (0.5rem / 8px) for a balanced, neutral look. Modals and overlays use lg radius (1rem / 16px) to signal elevation and importance. The full radius (9999px) is reserved for badges and pill-shaped elements. This gradu

Components

Action Elements Buttons are the primary interactive element and use the full primary color (#111111) with white text. The button-primary component has padding of 5.2px 13px (matching the live computed style), a height of 32px, and sm radius (4px). On hover, the background transitions to primary-container (#1e293b) with a 200ms ease transition. On active/press, the background darkens to #0a0a0a. Button-secondary uses a transparent background with a 1px border at outline color (#94a3b8) and primary text color; on hover, it gains a surface-container-low background (#f1f5f9). Links use primary color (#111111) with no underline by default; on hover, they transition to primary-container (#1e293b) and gain an underline, with a 150ms ease transition.

Containers & Surfaces Cards use a whit

Do's and Don'ts

**Do**

• Do use primary (#111111) exclusively for interactive elements—buttons, links, and focus indicators—to create a clear visual hierarchy and guide user attention.
• Do maintain generous whitespace (lg spacing, 40px) between major sections to create a sense of control and reduce cognitive load.
• Do apply monospace typography consistently across all UI text to reinforce the technical positioning and create visual continuity with code.
• Do use the surface stack (surface-container-low through surface-container-highest) to create depth through luminance alone, avoiding unnecessary color.
• Do apply subtle shadows (sm: 0 1px 2px rgba(0, 0, 0, 0.05)) on hover to signal interactivity without introducing visual clutter.

**Don't**

• Don't use color as decoration or to create visual interest; every color choice must serve a functional purpose (primary for CTAs, secondary for supporting text, error for warnings).
• Don't introduce rounded corners larger than lg (16px) except for badges and pill-shaped elements; sharp geometry reinforces technical precision.
• Don't mix typefaces; JetBrains Mono is the only font family used across the entire system, including headings, body, and labels.
• Don't use drop shadows larger than lg (0 12px 32px) or blur effects; the design relies on borders and subtle elevation to define spatial relationships.
• Don't add animations or transitions longer than 200ms; the interface should feel responsive and immediate, mirroring the speed of command-line tools.