CrewAI

Design Specification — CrewAI

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#000000), a vivid accent (#FB2C36). Display headings use a distinct face (var(--font-heading-italic),serif) over the body stack (Geist Mono). Detected font weights: 100, 300, 400. Detected style signatures: technical / mono accents.

Logo asset(s): https://crewai.com/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Frmv9a2eqdsyw%2F43FWSfRH2vqRsJLZ3pu4Zd%2F8ca1ea655f42d45b541628cb8ea9c7cd%2FDocuSign-Logo-1.png&w=3840&q=75

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Gradients

• linear-gradient(#000 50%,#0000)

> 1 additional gradient definitions were framework utility templates (unresolvable var(--tw-gradient-stops)) and were omitted.

Typography

Primary typeface: Geist Mono — stack: Geist Mono

Display / heading typeface: var(--font-heading-italic),serif (used for large headings; body uses the primary stack)

Font stacks (most used first)

• Geist Mono
• var(--font-mono)
• var(--font-heading)
• var(--font-sans)
• var(--font-heading-italic)
• GT Standard
• Geist Mono Fallback
• var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji")
• var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace)
• var(--font-heading-italic),serif

Derived type scale

Font sizes (by frequency)

Weights in use: 100, 300, 400

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• 0 4px 12px #0003

Layout

Container max-width: 768px

Grid columns (largest detected grid): 4

Breakpoints

• 40rem
• 48rem
• 64rem
• 80rem
• 96rem

Animation & Motion

Easing curves

• cubic-bezier(0,0,.2,1)
• cubic-bezier(.4,0,.2,1)
• cubic-bezier(.4,0,.2,1)
• cubic-bezier(.86,0,.07,1)
• var(--tw-ease,var(--default-transition-timing-function))
• var(--ease-in-out)
• var(--ease-m-ease)
• var(--ease-out)

Keyframes

@keyframes marquee { 0%{transform:translate(0)}to{transform:translate(-25%)} }

Animations

• var(--animate-marquee)

Components

Extracted from the page's own interactive elements (classes → resolved CSS values).

button-primary — sample text: “Resources”

button-secondary — sample text: “Sign Up”

navigation-link

CTA labels found on page

• Sign In
• Sign Up
• Try Now
• Learn More
• Learn more

Source Design Tokens (CSS custom properties)

:root {
  --font-mono: "Geist Mono","Geist Mono Fallback";
  --font-sans: "GT Standard",ui-sans-serif,system-ui,sans-serif;
  --color-red-400: #ff6568;
  --color-red-500: #fb2c36;
  --color-red-600: #e40014;
  --color-neutral-50: #f4f5f6;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-600: #525252;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-black: #000;
  --color-white: #fff;
  --spacing: .25rem;
  --container-xs: 20rem;
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-4xl: 56rem;
  --container-5xl: 64rem;
  --text-xs: 11px;
  --text-xs--line-height: 1;
  --text-sm: 15px;
  --text-sm--line-height: 1.2;
  --text-base: 16px;
  --text-base--line-height: 1.375;
  --text-lg: 18px;
  --text-lg--line-height: 1.3;
  --text-xl: 20px;
  --text-xl--line-height: 1.27;
  --text-2xl: 24px;
  --text-2xl--line-height: 1.2;
  --text-3xl: 32px;
  --text-3xl--line-height: 1.125;
  --text-4xl: 40px;
  --text-4xl--line-height: 1;
  --text-5xl: 46px;
  --text-5xl--line-height: 1;
  --text-6xl: 48px;
  --text-6xl--line-height: 1;
  --text-7xl: 60px;
  --text-7xl--line-height: 1;
  --text-9xl: 100px;
  --text-9xl--line-height: 1;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --tracking-wide: .025em;
  --tracking-wider: .05em;
  --leading-snug: 1.375;
  --leading-relaxed: 1.625;
  --radius-sm: .25rem;
  --radius-md: .375rem;
  --radius-lg: .5rem;
  --radius-xl: .75rem;
  --radius-2xl: 1rem;
}

Do's and Don'ts

Do

• Do reserve the accent #FB2C36 for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do set large headings in var(--font-heading-italic),serif with tight tracking (-.04em), and body copy in the primary stack.
• Do stick to the detected font weight(s): 100, 300, 400.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-background: #FFFFFF;
  --color-primary: #FF6568;
  --color-accent: #FB2C36;
  --color-surface: #F4F5F6;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #E5E5E5;
  --color-border: #D4D4D4;
  --color-on-primary: #000000;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F5F5F5;
  --color-surface-container: #F4F5F6;
  --color-surface-container-high: #F2F2F2;
  --color-surface-container-highest: #E7E7E7;
  --font-sans: Geist Mono;
  --font-size-body-md: 16px;
  --font-size-label-sm: 12.8px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 32px;
  --shadow-md: 0 4px 12px #0003;
  --font-display: var(--font-heading-italic),serif;
  --tracking-display: -.04em;
  --container-max: 768px;
}