Design System | Firecrawl

Colour Palette

Heat Scale (Primary)

Heat

#FA5D19

Heat 90%

rgba(250, 93, 25, 0.9)

Heat 20%

rgba(250, 93, 25, 0.2)

Heat 05%

rgba(250, 93, 25, 0.05)

Backgrounds

Light

#F9F9F9

White

#FFFFFF

Dark

#1A1A2E

Code BG

#0D0D0D

Text Colours

Primary

#262626

Dim

#525252

Muted

#737373

On Dark

#FFFFFF

Semantic Colours

Success

#22C55E

Blue

#3B82F6

Purple

#8B5CF6

Error

#EF4444

Borders

Default

#E5E7EB

Light

#F3F4F6

Accent

#FA5D19

Typography

Display & Headings

Light Background

Display

clamp(2.25rem, 4vw, 3.75rem)

Firecrawl Display

clamp(2rem, 3.5vw, 3rem)

Main Page Headline

clamp(1.5rem, 2.5vw, 2.25rem)

Section Headline

clamp(1.25rem, 2vw, 1.5rem)

Subsection or Card Title

20px

Small Heading

Body Text

Light Background

Body Large

18px

Large paragraph text for introductions and lead content.

Body

16px

Standard paragraph and body text throughout the interface.

Body Small

14px

Smaller text for secondary content and descriptions.

Caption

13px

Caption text for metadata and small details.

Font Families

Available Fonts

Inter (Heading & Body)

The quick brown fox jumps over the lazy dog. Inter is a geometric sans-serif for headings and body text.

JetBrains Mono (Code)

const crawl = await firecrawl.scrape(url);

/* Typography Variables */
--font-heading: 'Inter', sans-serif;
--font-body: 'Inter', sans-serif;
--font-mono: 'JetBrains Mono', monospace;

--type-h1: clamp(2rem, 3.5vw, 3rem);
--type-body: 16px;
--type-label: 12px;

Spacing Scale

Spacing Tokens

2xs

2px

4px

8px

12px

base

16px

20px

24px

2xl

32px

3xl

40px

4xl

48px

5xl

56px

6xl

64px

/* Spacing Scale */
--space-2xs: 2px;
--space-xs: 4px;
--space-sm: 8px;
--space-md: 12px;
--space-base: 16px;
--space-lg: 20px;
--space-xl: 24px;
--space-2xl: 32px;
--space-3xl: 40px;
--space-4xl: 48px;
--space-5xl: 56px;
--space-6xl: 64px;

Buttons

Primary Buttons

Light Background

Dark Background

Secondary Buttons

Light Background

Ghost Buttons

Light Background

Dark Background

.btn-primary {
  background: var(--heat);
  color: white;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  border: none;
  transition: all var(--transition-base);
}

.btn-primary:hover {
  background: var(--heat-90);
  transform: translateY(-1px);
}

Badges

Badge Variants

Default Heat Success Purple

.badge {
  display: inline-block;
  font: 500 var(--type-badge) var(--font-body);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--heat-20);
  color: var(--heat);
}

.badge-success {
  background: rgba(34, 197, 94, 0.2);
  color: var(--green);
}

Cards

Feature Cards

3-up Grid

⚡

Fast Extraction

Lightning-quick web crawling with intelligent parsing. Get data in milliseconds.

🔒

Secure & Reliable

Enterprise-grade security with 99.9% uptime guarantees. Your data is safe.

🎯

Accurate Parsing

AI-powered content extraction. Structured data you can trust.

Basic Card

Single Card

Card Title

Brief description of the card content with helpful context about the feature.

.card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-card);
  transition: all var(--transition-medium);
}

.card:hover {
  box-shadow: var(--shadow-elevated);
  transform: translateY(-2px);
}

Navigation

Sticky Navbar

Desktop Navigation

Mobile Navigation

Mobile Menu (Responsive)

On screens below 768px, the navigation links collapse into a hamburger menu. The mobile menu icon animates to an X when open.

.navbar {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-light);
  z-index: 100;
  height: 64px;
  display: flex;
  align-items: center;
}

@media (min-width: 768px) {
  .nav-links,
  .nav-ctas {
    display: flex;
  }
}

Section Layouts

Split Section (Text + Visual)

Standard Layout

Powerful Web Crawling

Extract structured data from any website in seconds with our intelligent crawling API.

Fast and reliable extraction
Handles JavaScript rendering
Structured JSON output

Visual Placeholder

Split Section Reversed

Reversed Layout

Scale Your Operations

Built for enterprise with high availability, rate limiting, and comprehensive API documentation.

Visual Placeholder

3-Column Grid

Grid Layout

Column 1

Content for the first column.

Column 2

Content for the second column.

Column 3

Content for the third column.

CTA Band

Call-to-Action Section

Ready to Get Started?

Join thousands of developers using Firecrawl for web data extraction.

.split-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4xl);
  align-items: center;
}

@media (max-width: 768px) {
  .split-section {
    grid-template-columns: 1fr;
  }
}

Interactive Components

Accordion

Expandable Items

Firecrawl is a powerful web crawling and data extraction API that helps you extract structured data from websites efficiently and reliably.

We offer flexible pricing based on your API usage. Start with our free tier and scale as needed. No credit card required to get started.

Yes. We use enterprise-grade security with encryption in transit and at rest. Your data is never shared or stored beyond the API call.

Tab Switcher

Tabbed Content

Firecrawl makes web data extraction simple with our intuitive API. Get structured data in seconds.

Features include JavaScript rendering, intelligent parsing, rate limiting, and comprehensive API documentation.

Integrate with your favorite tools using REST API, webhooks, or our official SDKs for Node.js and Python.

.accordion-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-xl) 0;
  background: transparent;
  border: none;
  cursor: pointer;
}

.accordion-item.open .accordion-content {
  max-height: 500px;
  opacity: 1;
}

Pricing Cards

4-Tier Pricing

Starter

Free

Forever free

Perfect for testing and small projects.

Up to 1,000 requests
Basic support
API access

Footer

Footer Structure

.footer {
  background: var(--bg-white);
  border-top: 1px solid var(--border);
  padding: var(--space-4xl) var(--container-padding);
  margin-top: var(--space-6xl);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-2xl);
  margin-bottom: var(--space-3xl);
}

Complete Design Tokens

:root { /* COLOURS — Heat Scale */ --heat: #FA5D19; --heat-90: rgba(250, 93, 25, 0.9); --heat-80: rgba(250, 93, 25, 0.8); --heat-60: rgba(250, 93, 25, 0.6); --heat-40: rgba(250, 93, 25, 0.4); --heat-20: rgba(250, 93, 25, 0.2); --heat-10: rgba(250, 93, 25, 0.1); --heat-05: rgba(250, 93, 25, 0.05); /* COLOURS — Backgrounds */ --bg: #F9F9F9; --bg-white: #FFFFFF; --bg-elevated: #FFFFFF; --bg-dark: #1A1A2E; --bg-code: #0D0D0D; --bg-muted: #F5F5F5; /* COLOURS — Text */ --text: #262626; --text-dim: #525252; --text-muted: #737373; --text-label: #A3A3A3; --text-on-dark: #FFFFFF; --text-on-dark-dim: rgba(255, 255, 255, 0.7); /* COLOURS — Borders */ --border: #E5E7EB; --border-light: #F3F4F6; --border-accent: var(--heat); /* COLOURS — Semantic */ --green: #22C55E; --blue: #3B82F6; --purple: #8B5CF6; --yellow: #F59E0B; --red: #EF4444; /* TYPOGRAPHY — Font Families */ --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace; /* TYPOGRAPHY — Type Scale */ --type-display: clamp(2.25rem, 4vw, 3.75rem); --type-h1: clamp(2rem, 3.5vw, 3rem); --type-h2: clamp(1.5rem, 2.5vw, 2.25rem); --type-h3: clamp(1.25rem, 2vw, 1.5rem); --type-h4: 20px; --type-body-lg: 18px; --type-body: 16px; --type-body-sm: 14px; --type-caption: 13px; --type-label: 12px; --type-section-number: 14px; --type-mono: 14px; --type-mono-sm: 13px; --type-badge: 12px; --type-nav: 14px; /* SPACING SCALE */ --space-2xs: 2px; --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-base: 16px; --space-lg: 20px; --space-xl: 24px; --space-2xl: 32px; --space-3xl: 40px; --space-4xl: 48px; --space-5xl: 56px; --space-6xl: 64px; --space-section: clamp(48px, 8vw, 96px); --space-hero: clamp(64px, 12vw, 128px); /* LAYOUT */ --container-max: 1144px; --container-content: 1112px; --container-narrow: 768px; --container-padding: clamp(16px, 4vw, 32px); /* BORDER RADIUS */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 16px; --radius-pill: 999px; /* SHADOWS */ --shadow-subtle: 0 1px 2px rgba(0,0,0,0.04); --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --shadow-elevated: 0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03); --shadow-pricing: 0 8px 32px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.03); /* TRANSITIONS */ --transition-fast: 0.15s ease; --transition-base: 0.2s ease; --transition-medium: 0.3s ease; --transition-slow: 0.5s ease; }

Colour Palette

Heat Scale (Primary)

Backgrounds

Text Colours

Semantic Colours

Borders

Typography

Display & Headings

Body Text

Font Families

Spacing Scale

Buttons

Primary Buttons

Secondary Buttons

Ghost Buttons

Badges

Cards

Feature Cards

Fast Extraction

Secure & Reliable

Accurate Parsing

Basic Card

Card Title

Navigation

Sticky Navbar

Mobile Navigation

Section Layouts

Split Section (Text + Visual)

Powerful Web Crawling

Split Section Reversed

Scale Your Operations

3-Column Grid

Column 1

Column 2

Column 3

CTA Band

Ready to Get Started?

Interactive Components

Accordion

Tab Switcher

Pricing Cards

Footer

Product

Company

Legal

Complete Design Tokens