OpenClaw

Overview

OpenClaw is a developer-first, open-source AI assistant designed for technical users who demand control and transparency. It runs entirely on your machine and integrates seamlessly with chat apps (WhatsApp, Telegram, Discord) to automate inbox management, email composition, calendar coordination, and flight check-ins—all without vendor lock-in or cloud dependency. The design aesthetic is 'Technical Minimalism': a dark-first interface (oklch 13.5% 0 0 background) with a warm coral accent (#f5654a) that signals agency and action, paired with a teal secondary (#4fc8ae) for supportive UI elements. The visual language prioritizes clarity over decoration, using monospace typography for system labels and Switzer (a geometric, humanist sans-serif) for body content, creating a bridge between machine precision and human readability.

The brand voice is direct, confident, and unapologetically technical. Sentences are short and active: 'Run it for yourself. Share it with your team. Your data stays yours.' The tone avoids marketing hyperbole; instead, it emphasizes ownership, autonomy, and the absence of friction. Vocabulary leans into developer culture ('open source', 'runs on your machine', 'stewardship', 'independent') and avoids corporate abstractions. Example sentence in brand voice: 'No subscription. No hosted tier. No token. Stewarded by an independent 501(c)(3).'

Colors

The color system is built on a dark-first foundation with a warm, energetic accent palette. **Primary (#f5654a, coral-dark-bright)** is the signature action color—used exclusively on primary CTAs ('Get started'), focus states, and brand-critical interactive elements. It's warm enough to feel approachable on a near-black background (oklch 13.5% 0 0) but saturated enough to command attention without shouting. **Secondary (#4fc8ae, sea-dark-bright)** provides a complementary accent for secondary actions, highlights, and supportive UI; it's cooler and more recessive than primary, used sparingly on badges, secondary buttons, and accent borders. **Surface stack** progresses from the page background (surface: #101012, oklch 13.5% 0 0) through surface-container (#19191c, oklch 17.8% 0 0) to surfac

Typography

The type system pairs Switzer (geometric, humanist sans-serif from Fontshare, weights 400–700) for all body and display text with a monospace stack (ui-monospace, SF Mono, Fira Code, JetBrains Mono, Menlo) for system labels, section headers, and code-adjacent UI. **Display (60.8px, weight 800, line-height 65px, letter-spacing -0.02em)** is reserved for hero headlines like 'The AI that really does things'—the weight and negative letter-spacing create a dense, confident presence. **Headline-lg (40px, weight 750, line-height 44px)** and **headline-md (28px, weight 700, line-height 32px)** handle section titles and subsections, using text-wrap: balance to prevent orphans. **Body-lg (18px, weight 400, line-height 28px)** and **body-md (16px, weight 400, line-height 24px)** provide comfortable r

Layout

The page layout uses a fluid, centered container with a max-width of 1060px, aligned to a 12-column grid with 32px gutters on desktop and 24px on tablet. The spacing scale is semantic: **xs (4px)** for micro-spacing within components (icon-to-text gaps), **sm (12px)** for internal padding in buttons and inputs, **md (24px)** for card padding and section margins, **lg (40px)** for major section separation, and **xl (64px)** for hero-to-content breathing room. The hero section uses flexbox (flex-direction: column, align-items: center, gap: 12px) to stack the logo, headline, lede, and CTA vertically with consistent spacing. Section headers employ justify-content: space-between to align the eyebrow/title block on the left with 'View all' links on the right, maintaining visual balance. White-sp

Elevation & Depth

Depth is conveyed through a restrained shadow system and surface-color progression rather than aggressive drop shadows. **Level 1 (Base)**: The page background (surface: #101012) is the foundation; no shadow. **Level 2 (Cards & Surfaces)**: Cards and lifted surfaces use surface-container (#19191c) with a subtle shadow (box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12)) and a 1px border at outline-variant (#505058, 30% opacity) to define edges without visual weight. On hover, the surface shifts to surface-container-high (#202024) and the shadow expands to 0 8px 24px rgba(0, 0, 0, 0.28), creating a gent

Shapes

The shape philosophy is **'Soft-Technical'**: rounded corners are present but restrained, signaling approachability without sacrificing the precision expected by technical users. **Buttons and inputs** use rounded.lg (1rem / 16px) for a friendly, modern feel while maintaining clear affordance. **Cards and containers** use rounded.md (0.75rem / 12px) to balance softness with structure. **Badges and pills** use rounded.full (9999px) for maximum softness, appropriate for status indicators and tags. **Section dividers and subtle UI elements** use rounded.sm (0.25rem / 4px) or no rounding (0px) to

Components

Action Elements **Button-primary** (#f5654a background, #101012 text, 44px height, 12px 24px padding, 1rem border-radius, label-md typography, 0.2s ease transition) is the primary call-to-action. On hover, the background shifts to #e05540 (primary-container) and the text becomes white, creating a subtle but clear state change. **Button-secondary** (transparent background, outline-variant border, 44px height, 12px 24px padding, 1rem border-radius, label-md typography) is used for secondary actions like 'Read the docs' or 'Who is behind OpenClaw'; on hover, the background fills with surface-container-high (#202024) and the border becomes outline (#9a9aa2), maintaining visual consistency. **Button-ghost** (transparent background, primary text, no border, 44px height, 12px 24px padding, 1r