Architecture · v0.1

Building the AI-Native Desktop

What would a desktop operating environment look like if it were designed from scratch for the age of AI agents? Cradle is our answer — and the design choices it makes are as deliberate as the technical ones.

The problem with current AI interfaces

Most AI tools today are web apps wearing a chat UI. They inherit the constraints of the web: stateless sessions, no persistent context, no spatial organization. The user is expected to manage their own mental model of what the AI knows and what it has done.

Cradle starts from the opposite direction. The desktop environment is the primary artifact. Sessions, agents, workspaces, and documents are persistent, spatial, and owned by the user — not ephemeral API calls to a remote service.

Two-tone chrome architecture

The first design decision that shapes everything else: Cradle's chrome (sidebar, header, footer) is always visually dimmer than its content areas. Chrome renders at --color-neutral-2 (#f5f5f5 in light mode, #111111 in dark mode). Content surfaces render at --color-neutral-1 (#ffffff / #141414).

This isn't arbitrary. Chrome is infrastructure — it should recede. Content is what the user came for — it should advance. The 10-tier neutral scale (1=lightest to 10=darkest) is the mechanical implementation of this principle, and it inverts cleanly in dark mode.

Spring physics everywhere

Every interactive motion in Cradle uses spring physics rather than CSS transitions. The default spring configuration is stiffness 600, damping 40 — snappy but not jittery. Message entrances use 500/35 for a slightly warmer feel that suits conversational content.

CSS transitions (ease-in-out, linear) reveal the seams of a UI — they feel like animations. Spring physics approximates physical motion — the user's brain reads it as "real." This is especially important in an AI environment where content appearance is unpredictable and fast.

// Spring configuration — all interactive motion
const spring = { type: 'spring', stiffness: 600, damping: 40 }

// Message entrance — slightly softer
const messageSpring = {
  type: 'spring',
  stiffness: 500,
  damping: 35,
  initial: { opacity: 0, y: 8 },
  animate: { opacity: 1, y: 0 },
}

Semantic accent colors

Cradle deals with several categories of AI content: workspace sessions, built-in agents, global context, document scopes. Each category has a dedicated accent color. Users learn to associate #8b5cf6 (purple) with sessions, #f43f5e (rose) with agents, #10b981 (emerald) with workspace scope.

This is the opposite of decorative color usage. The accent palette is a closed semantic system — colors are not chosen for aesthetics but for category disambiguation at a glance.

Surface texture, not elevation

Cradle does not use elevation shadows (drop shadows that make components look like they're floating). The "floating card" pattern is a web UI convention that feels wrong in a dense desktop environment.

Instead, Cradle uses surface texture — subtle inset shadows that make surfaces feel physically present without suggesting levitation. The difference is a matter of a few CSS values, but it changes the entire feel of the interface from "web-like" to "native-like."