Doop

Overview

Doop is a multiplayer design canvas built for human-AI collaboration, where agents and designers work side-by-side on infinite canvases. The brand embodies "Collaborative Minimalism"—a design philosophy that strips away unnecessary ornamentation to reveal the essential interaction between human intent and machine capability. The aesthetic is deliberately restrained: a clean white canvas (rgb(255, 255, 255)), deep ink blacks (rgb(17, 17, 16)), and a single vivid electric blue accent (rgb(39, 67, 238)) that draws the eye to interactive moments. The UI evokes clarity, precision, and the quiet confidence of a tool that knows exactly what it does.

The voice is direct, technical without being cold, and assumes the user is intelligent. Doop speaks in the language of design systems and APIs—terms like "MCP," "OAuth," and "agents" appear naturally in copy. The tone avoids marketing breathlessness; instead, it states facts with understated confidence. Example sentence in brand voice: "Your agent keeps running wherever it already runs, on whatever model you already pay for. Doop is the canvas it connects to — not another AI subscription."

Colors

The color system is built on a principle of radical restraint: a neutral foundation with a single, unmissable accent. **Primary (rgb(39, 67, 238) / #2743ee)** is the electric blue used exclusively for interactive elements—call-to-action buttons, active states, focus rings, and the live indicator on the canvas. It appears sparingly, which makes it magnetic when it does. **Secondary (rgb(232, 67, 46) / #e8432e)** is a warm red-orange reserved for error states, warnings, and the Opus agent badge. **Tertiary (rgb(14, 159, 110) / #0e9f6e)** is a muted green used for success states and the Sonnet agent. The surface stack is deliberately minimal: **Surface (rgb(255, 255, 255))** is the default paper white; **Surface-container (rgb(247, 246, 242) / #f7f6f2)** is a barely-perceptible warm off-white

Typography

The type system pairs two distinct voices: **Instrument Serif** (400 weight, no italics except when explicitly marked) for display and headline scales, and **Instrument Sans** (400/500/600 weights) for body and UI text. **IBM Plex Mono** (400/500 weights) is reserved for labels, buttons, and code-like UI elements—reinforcing the technical, system-oriented nature of the product. Display (92px, line-height 94px, letter-spacing -0.015em) is used only for the hero headline and sets an elegant, serif-driven tone. Headline-lg (58px, line-height 61px, -0.012em) is used for section titles. Body-lg (16.5px, line-height 27px) is the primary reading text, set at a generous 1.66 line-height for breathing room. Labels (12.5px in Plex Mono, letter-spacing 0.06em, uppercase) are applied to all buttons an

Layout

The layout uses a fluid 12-column grid with a max-width of 1392px, centered with auto margins. The gutter is responsive: clamp(20px, 4.4vw, 56px), which scales from 20px on mobile to 56px on desktop. Sections use vertical padding of clamp(64px, 9vw, 112px) to create rhythm that breathes with the viewport. The hero section uses a two-column layout (grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr)) with a 4vw gap, allowing the left copy to dominate while the right side hosts the app window mockup. White space is generous: the hero-sub paragraph has a max-width of 46ch, and section leads are capped at 56ch, ensuring text remains scannable. Container max-widths (1392px, 1080px, 1040px) are used strategically to constrain content and prevent line-length bloat. Spacing tokens are applied

Elevation & Depth

Depth is conveyed through subtle shadows and layering, never through color darkening. The elevation system uses three levels: **Level 1 (Standard Cards)** applies box-shadow: 0 3px 8px rgba(17, 17, 16, 0.15) with a 1px solid border in outline-variant (rgb(217, 214, 207)). This is used for cards, input fields, and standard containers. **Level 2 (Dropdowns & Modals)** uses box-shadow: 0 18px 44px -18px rgba(17, 17, 16, 0.3), creating a more pronounced lift. **Level 3 (Hero & Showcase)** uses the full var(--shot) shadow: 0 30px 70px -44px rgba(17, 17, 16, 0.3), reserved for the hero app window an

Shapes

The shape philosophy is **Architectural Precision**—corners are sharp and intentional, never rounded for softness alone. **Buttons** use 3px border-radius (rounded.sm), creating a subtle, technical feel that aligns with the monospace label typography. **Cards and containers** use 10px–12px (rounded.lg / rounded.xl), providing just enough softness to distinguish them from the canvas without feeling organic. **Input fields** use 4px (rounded.DEFAULT), maintaining the technical aesthetic. **Badges and chips** use 999px (rounded.full) for pill-shaped elements, creating a visual break from the rect

Components

Action Elements Buttons are the primary interactive element and use **IBM Plex Mono** at 12.5px with 0.06em letter-spacing and uppercase text-transform. **Button-primary** (background: rgb(39, 67, 238), color: white, padding: 13px 26px, border-radius: 3px) is used for primary CTAs like "Get started" and "Download for macOS." On hover, the background darkens to rgb(26, 43, 184) with no shadow change. On active, apply transform: translateY(1px) for tactile feedback. **Button-secondary** (background: transparent, border: 1px solid rgb(17, 17, 16), color: rgb(17, 17, 16), padding: 13px 26px, border-radius: 3px) is used for secondary actions like "Open in browser" or "Docs." On hover, background becomes rgb(247, 246, 242). **Button-sm** reduces padding to 10px 20px and font-size to 11.5px f

Do's and Don'ts

**Do**

• Do use the primary blue (rgb(39, 67, 238)) exclusively for interactive moments—buttons, focus states, active indicators—to maintain its magnetic pull.
• Do set body text at 16.5px with 1.66 line-height minimum to ensure readability and breathing room in dense layouts.
• Do apply shadows consistently: 0 3px 8px for standard cards, 0 18px 44px -18px for modals, never inventing new shadow values.
• Do use IBM Plex Mono for all UI labels, buttons, and monospace contexts to reinforce the technical, system-oriented brand voice.
• Do constrain text to 46–56ch max-width for body copy to prevent line-length bloat and maintain scannability.
• Do use 3px border-radius on buttons and 10px on cards to maintain the sharp, architectural aesthetic without feeling cold.

**Don't**

• Don't use secondary colors (red, green) for general UI—reserve them strictly for error, warning, and success states.
• Don't apply rounded corners larger than 12px to any component; the brand aesthetic is precision-driven, not organic.
• Don't mix serif and sans-serif fonts within a single text block; use Instrument Serif for display/headlines only, Instrument Sans for body.
• Don't create new shadow values; use only the three defined elevation levels (0 3px 8px, 0 18px 44px -18px, 0 30px 70px -44px).
• Don't set body text smaller than 16px or with line-height less than 1.5; the brand prioritizes legibility over density.
• Don't use the primary blue for backgrounds or large surface areas; it must remain an accent that draws attention to interactive elements.