# Firecrawl — Design System
> The web context API for AI agents. Search, scrape, parse, and interact with the live web — turn any source into clean Markdown or structured data your agents can ship with.
- **Canonical:** https://uiuxskills.com/library/firecrawl
- **Source:** https://www.firecrawl.dev/
- **Category:** Developer Tools & IDEs
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 81%
- **License:** MIT
- **Last updated:** 2026-06-09T23:12:58.843Z

---

---
version: alpha
name: Firecrawl
tagline: The API to search, scrape, and interact with the web at scale.
description: >-
  The API to search, scrape, and interact with the web at scale, turning any source into clean
  Markdown or structured data.
tone: Technical, authoritative, and highly efficient.
color-scheme: light
colors:
  primary: "#FF5A1F"
  primary-hover: "#E04814"
  background: "#F9F9F9"
  surface: "#FFFFFF"
  surface-container: "#F1F1F1"
  surface-bright: "#FFFFFF"
  on-primary: "#FFFFFF"
  on-surface: "#0D0D0D"
  on-surface-variant: "#646464"
  outline: "#E5E5E5"
  error: "#D32F2F"
  success: "#2E7D32"
typography:
  display-lg:
    fontFamily: "\"Geist Sans\", \"Inter\", sans-serif"
    fontSize: 3.5rem
    fontWeight: 700
    lineHeight: "1.1"
    letterSpacing: "-0.02em"
  display-md:
    fontFamily: "\"Geist Sans\", \"Inter\", sans-serif"
    fontSize: 2.75rem
    fontWeight: 700
    lineHeight: "1.15"
    letterSpacing: "-0.02em"
  headline-lg:
    fontFamily: "\"Geist Sans\", \"Inter\", sans-serif"
    fontSize: 2.25rem
    fontWeight: 600
    lineHeight: "1.2"
    letterSpacing: "-0.01em"
  headline-md:
    fontFamily: "\"Geist Sans\", \"Inter\", sans-serif"
    fontSize: 1.75rem
    fontWeight: 600
    lineHeight: "1.25"
  headline-sm:
    fontFamily: "\"Geist Sans\", \"Inter\", sans-serif"
    fontSize: 1.25rem
    fontWeight: 600
    lineHeight: "1.3"
  body-lg:
    fontFamily: "\"Geist Sans\", \"Inter\", sans-serif"
    fontSize: 1.125rem
    fontWeight: 400
    lineHeight: "1.5"
  body-md:
    fontFamily: "\"Geist Sans\", \"Inter\", sans-serif"
    fontSize: 1rem
    fontWeight: 400
    lineHeight: "1.5"
  body-sm:
    fontFamily: "\"Geist Sans\", \"Inter\", sans-serif"
    fontSize: 0.875rem
    fontWeight: 400
    lineHeight: "1.5"
  label-lg:
    fontFamily: "\"Geist Sans\", \"Inter\", sans-serif"
    fontSize: 0.875rem
    fontWeight: 500
    lineHeight: "1.4"
  label-sm:
    fontFamily: "\"Geist Sans\", \"Inter\", sans-serif"
    fontSize: 0.75rem
    fontWeight: 500
    lineHeight: "1.4"
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  page-wrapper:
    backgroundColor: "{colors.background}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-lg}"
    width: auto
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-lg}"
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-lg}"
    borderColor: "{colors.outline}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
  card-bright:
    backgroundColor: "{colors.surface-bright}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.primary}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  input-field-focus:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
  link-hover:
    textColor: "{colors.primary-hover}"
    typography: "{typography.body-md}"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.label-sm}"
    width: auto
  badge-success:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.success}"
    typography: "{typography.label-sm}"
  badge-error:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.error}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
motion:
  duration-short: 150ms
  duration-medium: 300ms
  easing-standard: cubic-bezier(0.4, 0, 0.2, 1)
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.05)
  md: 0 4px 12px rgba(0,0,0,0.05)
  lg: 0 12px 24px rgba(0,0,0,0.08)
---

## Overview

Firecrawl features a high-performance, developer-first aesthetic that balances a clean, light-mode interface with high-contrast dark code blocks and vibrant orange accents. The brand communicates speed, reliability, and technical precision, catering directly to developers and AI engineers. The visual tone is authoritative, clean, and highly efficient.

## Colors

The color strategy relies on a clean, light-mode foundation punctuated by high-contrast interactive elements and a signature warm accent. A crisp off-white background is paired with pure white surfaces and subtle borders to keep the interface feeling lightweight, while a vibrant orange serves as the primary focal point for key user actions.

* **primary** (#FF5A1F): The signature Firecrawl orange/heat color, used for primary actions, highlights, and brand recognition.
* **primary-hover** (inferred) (#E04814): A slightly deeper orange used for hover states on primary interactive elements.
* **background** (#F9F9F9): The dominant light background color of the page, providing a clean canvas for content.
* **surface** (inferred) (#FFFFFF): Pure white used for cards, containers, and input fields to stand out against the off-white background.
* **surface-container** (inferred) (#F1F1F1): A light gray container background for subtle grouping of secondary elements.
* **surface-bright** (inferred) (#FFFFFF): Brightest surface variant used to highlight key interactive cards.
* **on-primary** (inferred) (#FFFFFF): White text used on top of the primary orange background for optimal contrast.
* **on-surface** (inferred) (#0D0D0D): Near-black text color used for high-contrast headlines and body copy.
* **on-surface-variant** (inferred) (#646464): Muted gray text used for secondary labels and metadata.
* **outline** (inferred) (#E5E5E5): Faint border color used to define boundaries without adding visual noise.
* **error** (inferred) (#D32F2F): Standard semantic red used for error states and destructive actions.
* **success** (inferred) (#2E7D32): Standard semantic green used for success badges and positive indicators.

## Typography

The typography system is unified under a single, clean sans-serif scale to maintain a highly readable, technical, and precise layout. It relies on Geist Sans and Inter to deliver a crisp, developer-centric reading experience across all screen sizes.

* **display-lg** (inferred): Used for main hero headlines to establish a bold, technical presence.
* **display-md** (inferred): Used for secondary hero and major section headers.
* **headline-lg** (inferred): Used for standard section headers.
* **headline-md** (inferred): Used for sub-sections and feature group headers.
* **headline-sm** (inferred): Used for card titles and small feature headers.
* **body-lg**: Used for hero subheadings and introductory paragraphs.
* **body-md** (inferred): Used for standard body copy and descriptions.
* **body-sm**: Used for secondary body copy and dense technical descriptions.
* **label-lg**: Used for button text and prominent UI labels.
* **label-sm** (inferred): Used for small badges, tags, and micro-copy.

## Layout

The layout is structured around a clean, centered grid with generous vertical spacing to separate distinct technical sections. 

* **Spacing Scale**: Spacing relies on a structured scale from `spacing.xs` (4px) up to `spacing.2xl` (48px) to establish clear visual hierarchy and breathing room.
* **Section Order**: The page follows a strict top-to-bottom flow: nav, hero, social-proof, features, agent-integration, performance, integrations, open-source, use-cases, and footer.
* **Hero Pattern**: Features a centered headline and subhead with primary and secondary call-to-actions, flanked by an interactive scraping or JSON preview visualization.
* **Responsive Behavior**: Built on a mobile-first responsive grid where code blocks, comparison tables, and multi-column feature lists stack vertically on smaller viewports.

## Elevation & Depth

Subtle single-layer shadows are used across three levels to convey minimal depth. The interface relies primarily on flat surfaces with subtle borders to separate content blocks, keeping the layout lightweight and fast.

* **elevation.sm** (inferred): Applied to standard card hover states and subtle interactive elements.
* **elevation.md** (inferred): Used for dropdowns, popovers, and floating code block containers.
* **elevation.lg** (inferred): Reserved for prominent overlay elements, modals, or active floating panels.

## Shapes

The brand utilizes a mix of sharp technical corners and fully rounded pills to balance structure with approachability. 

Structural containers like `{components.card}` and code blocks use `{rounded.lg}` (12px) or `{rounded.md}` (8px) to maintain a precise, developer-first aesthetic. Interactive badges, status indicators, and tags utilize `{rounded.full}` (9999px) to make them instantly recognizable and distinct from structural layouts.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### page-wrapper
The root container of the application. It applies `{colors.background}` as its base color to establish a clean, off-white canvas for all content sections.

### button-primary
The main call-to-action button. It uses `{colors.primary}` for its background, `{colors.on-primary}` for text, and `{typography.label-lg}` for clear, readable action labels. Use this for the primary path on any page.

### button-primary-hover
The active hover state for the primary button. It transitions smoothly to `{colors.primary-hover}` to provide immediate visual feedback during user interaction.

### button-secondary
A secondary action button used alongside the primary action. It features a `{colors.surface}` background with `{colors.on-surface}` text and a `{colors.outline}` border to remain distinct but visually subordinate.

### card
The standard structural container for features and content. It uses `{colors.surface}` background, `{colors.on-surface}` text, `{rounded.lg}` corners, and a `{colors.outline}` border to group information cleanly without heavy shadows.

### card-elevated
An elevated variant of the standard card. It uses `{colors.surface}` background and `{rounded.lg}` corners, but relies on `{elevation.sm}` instead of a border to denote interactive depth.

### card-bright
A high-visibility card variant used to highlight key features or active states. It features a `{colors.surface-bright}` background and is wrapped in a `{colors.primary}` border to draw immediate user focus.

### input-field
Standard text input container. It uses `{colors.surface}` background, `{rounded.md}` corners, and a `{colors.outline}` border to provide a clean, structured input area.

### input-field-focus
The active focus state for text inputs. It maintains `{colors.surface}` background and `{rounded.md}` corners, but transitions its border to `{colors.primary}` to indicate active user focus.

### link
Standard inline text link. It uses `{colors.primary}` color and `{typography.body-md}` to stand out within body copy. Use for inline navigation and documentation references.

### link-hover
The hover state for inline links. It transitions to `{colors.primary-hover}` to provide clear interactive feedback.

### badge
A compact visual tag for metadata and categories. It uses `{colors.surface-container}` background, `{colors.on-surface-variant}` text, and `{typography.label-sm}` to present secondary information cleanly.

### badge-success
A semantic badge indicating positive status or successful operations. It pairs `{colors.surface-container}` background with `{colors.success}` text.

### badge-error
A semantic badge indicating failed operations or error states. It pairs `{colors.surface-container}` background with `{colors.error}` text.

### divider
A thin structural line used to separate content blocks. It uses `{colors.outline}` background and has a fixed height of 1px to maintain a minimal, clean layout.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for primary call-to-actions and key interactive highlights. | Never use `{colors.primary}` for body text or large blocks of non-interactive copy. |
| Apply `{colors.outline}` for subtle borders on cards and dividers to maintain clean separation. | Avoid applying heavy shadows; rely on `{colors.outline}` and subtle background shifts instead. |
| Use `{typography.display-lg}` exclusively for main hero headers to establish strong visual hierarchy. | Do not mix font families; keep typography unified under the clean sans-serif scale. |
| Ensure code blocks use a dark background contrast against the light `{colors.background}` page wrapper. | Never place `{colors.on-surface-variant}` text on dark backgrounds without adjusting for contrast. |
| Use `{rounded.full}` for badges and status indicators to keep them distinct from structural cards. | Do not use `{rounded.full}` on structural containers like `{components.card}`. |
| Pair `{colors.on-primary}` text with `{colors.primary}` backgrounds to guarantee high accessibility and contrast. | Don't use `{colors.primary-hover}` as a static background color; reserve it strictly for active hover states. |
| Use `{typography.label-sm}` on `{components.badge}` to keep secondary metadata compact and readable. | Avoid using `{typography.display-md}` for standard body text or secondary labels. |
| Set `{components.divider}` height to 1px with `{colors.outline}` to cleanly segment technical details. | Don't use `{elevation.lg}` on standard static cards; keep them flat or use `{elevation.sm}` on hover. |

## Content Style

CTA labels are action-oriented, direct, and developer-focused. They utilize clear, imperative verbs that prompt immediate technical engagement, such as "Try it now", "View the skill", or "Check out our repo".

Headlines are technical, benefit-driven, and highly confident. Phrasing focuses directly on performance, reliability, and ease of integration, avoiding vague marketing fluff in favor of concrete technical solutions.

Copy density is designed for high scannability. Information is delivered through short paragraphs, bulleted lists, structured code snippets, and visual benchmarks, allowing developers to quickly digest technical specifications and integration steps.

## Imagery & Icons

The visual system combines clean, minimal vector icons, interactive code blocks, and visual benchmark charts. It utilizes a high-contrast dark-mode aesthetic for code blocks and interactive playgrounds to match developer environments, while maintaining a light, clean aesthetic for the surrounding layout. Icons feature sharp, precise lines that align with the brand's technical precision.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Firecrawl, a minimal-yet-bold developer-first API brand. Match its technical, authoritative, and highly efficient tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{typography.body-md}`, `{rounded.lg}` — never hardcode hex values, pixel sizes, or font names.
2. Use only the component shapes listed under `components:`. Do not invent variants (e.g. no `button-ghost`, no `card-outlined`) the spec doesn't define.
3. Follow the Layout section for section order, hero pattern, and responsive stacking behavior. Follow Elevation & Depth when assigning shadows; prefer `{colors.outline}` borders on static cards over elevation tokens.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it (e.g. using `{colors.primary}` for body text, or `{rounded.full}` on a card), surface the conflict before generating.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative token file exists for the project, its values supersede the spec.

## Output contract

**Must:**
- Use all tokens by name on every generated component.
- Include hover, focus, and disabled states for interactive components when the spec defines them (`button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply `{rounded.lg}` to cards, `{rounded.md}` to inputs, and `{rounded.full}` exclusively to badges and status indicators.
- Use the `{spacing.xs}` – `{spacing.2xl}` scale for all padding and gap values.
- Apply motion values (`{motion.duration-short}`, `{motion.easing-standard}`) to hover and focus transitions.
- Render hero headlines in `{typography.display-lg}` only when the spec's hero pattern applies.
- Use `{typography.label-lg}` for all button labels; `{typography.label-sm}` for all badges.

**Must NOT:**
- Invent colors, font sizes, radii, or spacing values absent from the spec.
- Use generic utility defaults (e.g. `text-gray-500`, `rounded-md` as a literal string) when a brand token exists.
- Apply `{colors.primary}` to body copy or non-interactive blocks.
- Use `{elevation.lg}` on static cards; reserve it for modals and active floating panels.
- Add emoji, filler text, or marketing copy.
- Rewrite, replace, or invent page copy, button labels, headings, or navigation items.
- Alter information architecture as a side effect of applying tokens.

## When in doubt
- If the spec doesn't define a value, ask the user before inventing one.
- Prefer composing existing components over introducing new tokens or variants.
- For ambiguous background roles, default to `{colors.surface}` for cards and `{colors.background}` for page sections.
- For unspecified breakpoints, follow the spec's mobile-first responsive notes; if absent, use one breakpoint at 768px.
- Tokens marked "(inferred)" are approximations — defer to any authoritative design system file if available.