CrewAI

Overview

CrewAI is an enterprise-grade multi-agent orchestration platform that transforms how organizations build, deploy, and govern AI systems. The brand embodies "Technical Minimalism"—a design philosophy that strips away unnecessary ornamentation to reveal the power of intelligent automation. The visual language combines a clean, light-dominant palette with strategic use of a vibrant coral-red accent (#ff5a50) that signals action, urgency, and the energy of AI-driven workflows. The aesthetic evokes precision and control: think of a command center where every element serves a purpose, where white space breathes clarity, and where the rare splash of color commands immediate attention. The emotional response is one of confidence and capability—users feel they are wielding sophisticated technology made accessible.

The brand voice is direct, authoritative yet approachable, and deeply technical without being pedantic. CrewAI speaks in the language of enterprise architects and AI engineers: "Build agents while giving platform teams the control to govern them." The vocabulary favors concrete nouns (agents, runtime, orchestration, governance) over abstract adjectives. Tone is matter-of-fact, never breathless or hyperbolic. Example sentence in brand voice: "Your agents run on our runtime. Your teams own the governance layer."

Colors

The color system is anchored in a sophisticated neutral foundation with a single, decisive accent. **Primary (#131313)** is the deep charcoal used for body text, card backgrounds, and primary CTAs—it conveys authority and technical sophistication. **On-Primary (#ffffff)** provides maximum contrast for readability and accessibility. **Secondary (#ff5a50)**, a warm coral-red, is the brand's signature accent reserved exclusively for high-priority CTAs, alerts, and interactive states that demand user attention. This color appears sparingly but decisively: on the "Sign Up" button (padding 10px 20px, border-radius 9999px), in banner alerts, and as hover states. **Tertiary (#18b96e)**, a muted green, supports success states and positive confirmations. The surface stack progresses from pure white

Typography

The type system employs a two-font strategy: **Exposure** (serif, 300 weight) for display and headline scales, and **GT Standard** (sans-serif, 400–600 weight) for body and label scales. This pairing creates visual distinction between aspirational messaging (Exposure's elegant, light-weight letterforms at 60px for display, 48px for headline-lg) and functional content (GT Standard's neutral, highly legible forms at 16px for body-md). The display scale (60px, 300 weight, -0.02em letter-spacing) is reserved for hero headlines and major section titles; its generous line-height (68px) prevents crowding on the light background. Body text uses 16px at 400 weight with 24px line-height for comfortable reading in long-form content. Labels and CTAs employ 14px at 600 weight with 0.01em letter-spacing

Layout

The layout system uses a 12-column grid with a maximum container width of 1460px, providing ample breathing room on ultra-wide displays while maintaining focus on content. The page rhythm is governed by a semantic spacing scale: **unit (8px)** as the base increment, **md (24px)** for standard gutter and component padding, **lg (40px)** for section separation, and **xl (64px)** for major layout breaks. Hero sections use generous vertical padding (128px top, 56px bottom on cards) to establish presence and allow typography to dominate. The white-space philosophy is deliberate: negative space is not wasted space but a design tool that reduces cognitive load and emphasizes key information. Margins between sections follow the lg spacing token (40px), creating a consistent visual rhythm. Containe

Elevation & Depth

Depth is conveyed through a restrained shadow system rather than color or blur. The design employs three elevation levels: **Level 1 (Base)** has no shadow—flat surfaces on the white background. **Level 2 (Standard Card)** uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), a soft, close shadow that lifts elements 4–8px above the base. **Level 3 (Prominent/Modal)** uses box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.15), a larger spread shadow indicating maximum hierarchy. Inset shadows are used sparingly for subtle depth: 0px 2px 0px 0px rgba(255, 255, 255, 0.25) inset on button surfaces to suggest

Shapes

The shape philosophy is **Architectural Precision**—rounded corners are used strategically to soften hard edges while maintaining a technical, constructed appearance. **Buttons and inputs** use border-radius: 9999px (full pill shape) to signal interactivity and approachability; this applies to primary CTAs (Sign Up), secondary buttons, and input fields. **Cards and containers** use border-radius: 32px (xl token) to create a modern, friendly appearance while avoiding the sterility of sharp corners. **Smaller UI elements** (badges, dropdown panels) use border-radius: 10px (md token) or 4px (sm t

Components

Action Elements **Button-Primary** (Sign Up): background-color #131313, color #ffffff, padding 10px 20px, border-radius 9999px, font-size 14px, font-weight 600. On hover, transition to background-color #262626 over 200ms. On active/focus, apply box-shadow: 0 0 0 3px rgba(255, 90, 80, 0.2) to indicate focus without changing the button itself. **Button-Secondary** (Docs, secondary CTAs): background-color rgba(255, 255, 255, 0.5), color #131313, same padding and radius. On hover, increase opacity to 0.7. **Button-Tertiary** (accent actions): background-color #ff5a50, color #ffffff, padding 10px 20px, border-radius 9999px. On hover, darken to #e40014 over 200ms. All buttons use font-family GT Standard, font-weight 600, letter-spacing 0.01em.

Containers & Surfaces **Card** (hero sectio

Do's and Don'ts

**Do**

• Do use the secondary accent (#ff5a50) exclusively for high-priority CTAs and alerts—never for decorative elements or backgrounds.
• Do maintain generous white space (lg spacing, 40px) between major sections to reduce cognitive load and emphasize content hierarchy.
• Do apply the full pill shape (border-radius 9999px) to all primary interactive elements (buttons, inputs) to signal interactivity.
• Do use Exposure serif font only for display and headline scales (48px and above); never use it for body text or labels.
• Do transition all interactive states (hover, focus, active) over 200ms using ease-in-out timing to provide smooth, professional feedback.
• Do use the shadow system (0 3px 8px rgba(0, 0, 0, 0.15)) to convey elevation rather than color shifts or blur effects.

**Don't**

• Don't use the primary color (#131313) as a background for large areas—reserve it for cards, buttons, and text. The page background should remain white (#ffffff).
• Don't apply border-radius: 0 (sharp corners) to any component; the brand requires at least 4px rounding on all UI elements.
• Don't mix Exposure and GT Standard fonts within the same line or paragraph; use Exposure for headlines and GT Standard for body/labels only.
• Don't use the secondary accent (#ff5a50) for more than 5–10% of the page's visual real estate; overuse dilutes its impact and violates the minimalist philosophy.
• Don't apply multiple shadows or blur effects to a single element; use the three-level elevation system (no shadow, 0 3px 8px, 0px 2px 15px) exclusively.
• Don't use color alone to convey information (e.g., a red button without text); always pair color with typography, iconography, or spatial hierarchy.