Manus

Overview

Manus is a precision-engineered action platform that transforms complex workflows into intuitive, executable tasks. The design system embodies 'Functional Minimalism'—a philosophy that strips away decorative elements to expose the essential interaction patterns, allowing users to focus entirely on task completion and automation outcomes. The visual language prioritizes clarity through generous whitespace (surface: #ffffff, surface-dim: #f8f8f7), a vibrant primary blue accent (#0081f2) reserved exclusively for actionable elements, and a carefully calibrated neutral palette (text-primary: #34322d, text-secondary: #5e5e5b) that ensures readability across all contexts. The brand personality is direct, authoritative, and outcome-focused—never decorative, always purposeful. Voice example: 'Execute this workflow now' rather than 'Let's get started on your journey.'

Colors

The color system operates on a dual-layer principle: a neutral foundation (surface stack from #ffffff to #e0e0df) that provides visual stability and reduces cognitive load, and a single, high-saturation accent (primary: #0081f2) that signals all interactive affordances. Primary (#0081f2) is applied exclusively to primary CTAs, progress indicators, focus states, and brand-critical interactions—never to passive elements. Secondary (#34322d) serves as the dominant text color and structural anchor, while tertiary (#f25a5a) is reserved for error states and destructive actions. The surface stack is deployed hierarchically: surface-container-lowest (#fafafa) for input backgrounds, surface-container (#f0f0ef) for code/canvas areas, and surface-container-highest (#e0e0df) for hover states on intera

Typography

The type system uses a single, system-native font stack (-apple-system, BlinkMacSystemFont, 'Segoe UI Variable Display', Helvetica, Arial, sans-serif) optimized for screen rendering and accessibility. Display (60px, 700 weight, -0.04em letter-spacing) anchors hero sections and major page titles; headline-lg (40px, 600 weight) structures primary content sections; headline-md (28px, 600 weight) organizes subsections; title-lg (20px, 600 weight) labels card headers and modal titles. Body-lg (18px, 400 weight, 28px line-height) is used for long-form content and explanatory text; body-md (16px, 400 weight, 24px line-height) serves as the default paragraph and list-item size. Label-md (14px, 600 weight, 0.01em letter-spacing) is applied to button text, form labels, and UI chrome; label-sm (12px,

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, centered on the viewport with symmetric margins. Horizontal rhythm is established through the spacing scale: xs (4px) for micro-adjustments, sm (12px) for component internal padding, md (24px) for section gutters and card padding, lg (40px) for major section separation, and xl (64px) for hero/footer spacing. Vertical rhythm follows the same scale, with md (24px) as the default line-spacing between major content blocks. The gutter value (24px) is applied consistently to left/right margins on mobile and tablet viewports, scaling to 40px on desktop. All cards, modals, and containers use rounded.lg (1rem / 16px) for consistency, except input fields which use rounded.DEFAULT (0.5rem / 8px) for a more compact appea

Elevation & Depth

Depth is conveyed through a three-tier shadow system applied via box-shadow, never through color darkening or opacity shifts. Level 1 (sm: 0 1px 2px rgba(0, 0, 0, 0.06)) is applied to subtle UI elements like input fields and small cards to indicate they are interactive but not primary. Level 2 (md: 0 3px 8px rgba(0, 0, 0, 0.15)) is used on hover states of buttons and cards, and on modals that require user attention; this shadow creates a clear visual lift. Level 3 (lg: 0 8px 24px rgba(0, 0, 0, 0.12)) is reserved for full-screen modals, dropdowns, and floating panels that demand focus. Progress

Shapes

The shape philosophy is 'Architectural Precision'—rounded corners are applied strategically to signal interaction type and visual hierarchy, never arbitrarily. Buttons use rounded.lg (1rem / 16px) to create a distinct, clickable silhouette that contrasts with the sharp edges of text and icons. Cards and modals use rounded.lg (1rem / 16px) for consistency with buttons, creating a cohesive interactive vocabulary. Input fields use rounded.DEFAULT (0.5rem / 8px) for a more compact, form-like appearance that signals data entry rather than action. Badges and pills use rounded.full (9999px) to indica

Components

Action Elements Buttons are the primary interaction pattern and use a strict three-tier hierarchy. Primary buttons (button-primary) apply background: {colors.primary} (#0081f2), text: {colors.on-primary} (#ffffff), height: 48px, padding: 0 24px, rounded: {rounded.lg} (1rem), and typography: {typography.label-md} (14px, 600 weight). On hover, the background shifts to #0055b3 with an additional box-shadow: 0 3px 8px rgba(0, 129, 242, 0.2) to indicate interactivity. Disabled state reduces opacity to 0.6 and removes the shadow. Secondary buttons (button-secondary) use a transparent background with a 1px border (border-color: {colors.outline-variant}, #b9b9b7), text-color: {colors.primary} (#0081f2), and the same height/padding/rounded as primary. On hover, the background becomes {colors.su

Do's and Don'ts

**Do**

• Do use primary (#0081f2) exclusively for actionable elements—buttons, links, focus states, and progress indicators—never for passive backgrounds or decorative elements.
• Do apply the full shadow stack (sm/md/lg) to create clear visual hierarchy; never use multiple shadows on a single element or shadow values outside the defined elevation scale.
• Do maintain consistent button heights (48px primary, 40px tertiary) and padding (0 24px) across all interactive surfaces to create a predictable, scannable interface.
• Do use the spacing scale (md: 24px for gutters, lg: 40px for section breaks) rigorously to establish visual rhythm and reduce cognitive load.
• Do apply rounded.lg (1rem) to all primary interactive elements (buttons, cards, modals) and rounded.DEFAULT (0.5rem) to inputs to create a clear visual distinction between action and data entry.
• Do use the system font stack (-apple-system, BlinkMacSystemFont, 'Segoe UI Variable Display') for all text to ensure optimal rendering and accessibility across platforms.

**Don't**

• Don't use secondary colors (#34322d) or tertiary colors (#f25a5a) for primary CTAs; reserve primary (#0081f2) exclusively for the most important user actions.
• Don't apply shadows to flat surfaces or text elements; shadows are reserved for elevated containers (cards, modals, dropdowns) to indicate depth and interactivity.
• Don't mix border-radius values arbitrarily; use rounded.lg (1rem) for buttons/cards, rounded.DEFAULT (0.5rem) for inputs, and rounded.full (9999px) for badges/pills only.
• Don't hardcode spacing values in components; always reference the spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) to maintain visual consistency.
• Don't apply opacity or color darkening to create hover states; use the defined shadow scale and background color shifts from the surface stack instead.
• Don't use custom fonts or font weights outside the defined system (400 regular, 600 semibold); this ensures consistent rendering and reduces bundle size.