# Firecrawl — Design System
> Firecrawl is the context API to search, scrape, and interact with the web at scale, turning any source into clean Markdown or structured data.
- **Canonical:** https://uiuxskills.com/library/firecrawl-2
- **Source:** https://firecrawl.com/
- **Category:** Developer Tools & IDEs
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 80%
- **License:** MIT
- **Last updated:** 2026-08-26T00:17:04.449Z

---

---
version: alpha
name: Firecrawl
tagline: Power AI agents with clean web data
description: >-
  Firecrawl is the context API to search, scrape, and interact with the web at scale, turning any
  source into clean Markdown or structured data.
tone: modern
color-scheme: light
colors:
  primary: "#FF4C00"
  secondary: "#F9C2AB"
  background: "#F9F9F9"
  surface: "#FFFFFF"
  surface-container: "#EFEFEF"
  on-primary: "#FFFFFF"
  on-surface: "#262626"
  on-surface-variant: "#666666"
  outline: "#E5E5E5"
  success: "#28A745"
  error: "#DC3545"
typography:
  display-lg:
    fontFamily: Suisse
    fontSize: 60px
    fontWeight: 700
    lineHeight: "1.1"
    letterSpacing: "-0.02em"
  display-md:
    fontFamily: Suisse
    fontSize: 52px
    fontWeight: 700
    lineHeight: "1.15"
    letterSpacing: "-0.01em"
  headline-lg:
    fontFamily: Suisse
    fontSize: 36px
    fontWeight: 600
    lineHeight: "1.2"
    letterSpacing: "-0.01em"
  headline-md:
    fontFamily: Suisse
    fontSize: 24px
    fontWeight: 600
    lineHeight: "1.3"
    letterSpacing: 0em
  body-lg:
    fontFamily: Suisse
    fontSize: 18px
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: 0em
  body-md:
    fontFamily: Suisse
    fontSize: 16px
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: 0em
  body-sm:
    fontFamily: Suisse
    fontSize: 14px
    fontWeight: 400
    lineHeight: "1.4"
    letterSpacing: 0em
  label-md:
    fontFamily: Suisse
    fontSize: 14px
    fontWeight: 500
    lineHeight: "1.2"
    letterSpacing: 0.02em
  label-sm:
    fontFamily: Suisse
    fontSize: 12px
    fontWeight: 500
    lineHeight: "1.2"
    letterSpacing: 0.05em
rounded:
  sm: 4px
  md: 8px
  lg: 10px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md} {spacing.lg}"
  button-primary-hover:
    backgroundColor: "#E04300"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md} {spacing.lg}"
  button-secondary:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md} {spacing.lg}"
  card:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.outline}"
    outlineOffset: 0px
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.xl}"
    padding: "{spacing.lg}"
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: "{spacing.sm} {spacing.md}"
    borderColor: "{colors.outline}"
  input-field-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: "{spacing.sm} {spacing.md}"
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
  link-hover:
    textColor: "#E04300"
    typography: "{typography.label-md}"
  badge:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: "{spacing.xs} {spacing.sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-success:
    backgroundColor: "#E2F0D9"
    textColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: "{spacing.xs} {spacing.sm}"
  badge-error:
    backgroundColor: "#FCE8E6"
    textColor: "{colors.error}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: "{spacing.xs} {spacing.sm}"
  page-container:
    backgroundColor: "{colors.background}"
  text-secondary:
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.body-sm}"
motion:
  duration-short: 200ms
  duration-medium: 500ms
  easing-standard: ease
elevation:
  sm: 0 1px 2px rgba(0, 0, 0, 0.05)
  md: 0 4px 6px rgba(0, 0, 0, 0.05)
  lg: 0 10px 15px rgba(0, 0, 0, 0.05)
---

## Overview

Firecrawl's visual identity is developer-centric, high-energy, and highly structured. It pairs a striking, high-contrast orange with a clean, light-mode background and precise technical layouts. The aesthetic is optimized for readability and performance, reflecting the product's core utility of transforming messy web data into clean, structured output.

## Colors

The color strategy uses a high-contrast palette designed to feel technical, energetic, and highly legible. A vibrant, signature orange acts as the primary brand anchor, while a clean, off-white background and pure white surfaces keep the interface feeling lightweight and fast.

*   `colors.primary` (#FF4C00): High-energy orange used for primary calls to action, active states, and brand accents.
*   `colors.secondary` (#F9C2AB): Soft, tinted orange used for subtle highlights, category badges, and secondary brand elements.
*   `colors.background` (#F9F9F9): Clean off-white background that provides a high-contrast canvas for technical layouts.
*   `colors.surface` (#FFFFFF): Pure white used for structural cards, input fields, and elevated containers.
*   `colors.surface-container` (#EFEFEF): Light gray surface variant used for secondary buttons and code block containers.
*   `colors.on-primary` (#FFFFFF): High-contrast white text used on top of the primary orange background.
*   `colors.on-surface` (#262626): Deep charcoal gray used for primary body copy and high-priority text elements.
*   `colors.on-surface-variant` (inferred) (#666666): Medium gray used for secondary text, captions, and lower-priority labels.
*   `colors.outline` (inferred) (#E5E5E5): Light gray border stroke used to define card boundaries and input fields.
*   `colors.success` (inferred) (#28A745): Semantic green used to denote successful operations, active states, and positive benchmarks.
*   `colors.error` (inferred) (#DC3545): Semantic red used for error states, destructive actions, and warning badges.

## Typography

The typography system relies entirely on the Suisse font family, establishing a clean, highly structured, and technical layout. It balances bold display headers with highly readable body and label styles to facilitate quick scanning of technical documentation and code snippets.

*   `typography.display-lg` (Suisse): Used for the main hero headline to establish strong visual hierarchy.
*   `typography.display-md` (Suisse): Used for secondary display headings and large section titles.
*   `typography.headline-lg` (inferred) (Suisse): Used for major feature section headers.
*   `typography.headline-md` (inferred) (Suisse): Used for card titles and medium-sized section headers.
*   `typography.body-lg` (inferred) (Suisse): Used for hero subheadings and introductory paragraphs.
*   `typography.body-md` (Suisse): The standard body copy size used across all descriptive paragraphs.
*   `typography.body-sm` (inferred) (Suisse): Used for secondary descriptions, metadata, and small card content.
*   `typography.label-md` (inferred) (Suisse): Used for button labels, navigation links, and interactive controls.
*   `typography.label-sm` (inferred) (Suisse): Used for small badges, category tags, and micro-copy.

## Layout

*   **Grid & Spacing:** Built on a highly structured, grid-based layout strategy with a background grid pattern and subtle crosshairs. Sections are separated with thin borders using `{colors.outline}` and generous vertical padding using `{spacing.2xl}`.
*   **Section Order:** Follows a strict top-to-bottom flow: `nav` → `hero` → `social-proof` → `features` → `agent-integration` → `performance-benchmarks` → `use-cases` → `footer`.
*   **Hero Pattern:** Centered headline with a highlighted orange keyword using `{typography.display-lg}`, followed by a concise subhead using `{typography.body-lg}`, dual primary and secondary CTAs, and an interactive search/scrape playground widget.
*   **Responsive Behavior:** Mobile-first responsive layout with standard Tailwind breakpoints. Navigation collapses into a mobile menu, and multi-column grid layouts stack vertically on smaller viewports.

## Elevation & Depth

The interface relies primarily on flat surfaces and high-contrast borders rather than heavy drop shadows to convey hierarchy, with depth subtly introduced through soft, single-layer shadows.

*   `elevation.sm` (inferred): Used for minimal card lift and subtle interactive elements, maintaining a clean, high-performance feel.
*   `elevation.md` (inferred): Applied to dropdown menus, popovers, and secondary floating interface elements.
*   `elevation.lg` (inferred): Reserved for modals, drawer overlays, and high-priority floating components.

## Shapes

The shape language balances sharp technical lines with friendly, highly rounded interactive components. Structural elements like code blocks and container cards use a softer, larger radius to frame technical content cleanly, while interactive controls use distinct, standardized roundness to signal clickability.

*   `rounded.sm` (4px) is used for small technical indicators and minor UI elements.
*   `rounded.md` (8px) is applied to input fields like `input-field` to maintain a clean, sharp profile.
*   `rounded.lg` (10px) is the standard for interactive buttons like `button-primary` and `button-secondary`.
*   `rounded.xl` (16px) is used for structural containers like `card-elevated` to soften the technical layout.
*   `rounded.full` (9999px) is reserved for status badges and category tags like `badge` to maintain a distinct pill-shaped profile.

## 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`

### Button Primary
The primary action button uses a solid `{colors.primary}` background with `{colors.on-primary}` text, styled with `{typography.label-md}` and a `{rounded.lg}` corner radius. It transitions to a deeper orange hover state (`#E04300`) to provide clear interactive feedback. Use this exclusively for the main call-to-action on a page or section, such as initiating a signup or submitting a primary form.

### Button Secondary
The secondary action button is styled with a `{colors.surface-container}` background and `{colors.on-surface}` text, utilizing `{typography.label-md}` and `{rounded.lg}` corners. It provides a low-contrast, structural alternative to the primary button. Use this for secondary actions, such as "View the docs" or "Setup for agents," when positioned alongside a primary CTA.

### Card
The standard card is a flat container with a `{colors.surface}` background and a thin border styled with `{colors.outline}`. It has no default shadow, relying on the border stroke for separation. Use this to group related technical content, feature descriptions, or code snippets in a structured grid.

### Card Elevated
The elevated card uses a `{colors.surface}` background, a softer `{rounded.xl}` corner radius, and generous `{spacing.lg}` padding. It is designed to subtly lift key content blocks or interactive widgets above the page background. Use this for high-priority features, interactive playgrounds, or testimonials that require extra visual prominence.

### Input Field
The input field features a `{colors.surface}` background, `{colors.on-surface}` text styled with `{typography.body-sm}`, and a `{rounded.md}` corner radius. It uses `{colors.outline}` for its default border, which transitions to `{colors.primary}` upon focus to indicate active user input. Use this for search inputs, API key fields, and other text entry areas.

### Link
The inline link component uses `{colors.primary}` text and `{typography.label-md}` to stand out within body copy or navigation blocks. It transitions to a deeper orange hover state (`#E04300`) to indicate interactivity. Use this for inline text redirections, navigation menus, or secondary "Learn more" actions.

### Badge
The standard badge uses a soft `{colors.secondary}` background with `{colors.primary}` text, styled with `{typography.label-sm}` and a `{rounded.full}` pill shape. It is highly compact, utilizing `{spacing.xs}` vertical and `{spacing.sm}` horizontal padding. Use this for category tags, feature labels, or neutral metadata indicators.

### Badge Success
The success badge features a light green background (`#E2F0D9`) with `{colors.success}` text, styled with `{typography.label-sm}` and a `{rounded.full}` pill shape. It provides a clear, positive semantic state for successful operations or high-performance metrics. Use this to display positive benchmarks, active statuses, or successful API responses.

### Badge Error
The error badge uses a light red background (`#FCE8E6`) with `{colors.error}` text, styled with `{typography.label-sm}` and a `{rounded.full}` pill shape. It provides a clear, negative semantic state for failed operations or system errors. Use this to display error states, failed API requests, or critical system warnings.

### Divider
The divider is a thin, 1px horizontal or vertical rule styled with a `{colors.outline}` background. It is used to separate content blocks, table rows, or navigation sections without adding visual noise. Use this to enforce structured, grid-like layouts across the interface.

### Page Container
The page container acts as the main viewport wrapper, styled with a `{colors.background}` fill. It establishes the clean, off-white canvas that allows white cards and vibrant orange elements to maintain high contrast. Use this as the root layout wrapper for all pages.

### Text Secondary
The secondary text style uses `{colors.on-surface-variant}` text and `{typography.body-sm}` to establish typographic hierarchy. It is designed to reduce visual weight for non-critical information. Use this for captions, metadata, table headers, and secondary descriptions.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` exclusively for primary call-to-actions like `{button-primary}`. | Never use `{colors.primary}` for secondary actions; use `{button-secondary}` instead. |
| Ensure all body text uses `{colors.on-surface}` on top of `{colors.background}` or `{colors.surface}` for optimal contrast. | Never place low-contrast text like `{colors.on-surface-variant}` directly on dark backgrounds without verifying accessibility. |
| Apply `{rounded.full}` to all status badges like `{badge}` and category tags to maintain consistent shape language. | Do not use sharp 90-degree corners on buttons; always apply the standard `{rounded.lg}` radius. |
| Use thin borders colored with `{colors.outline}` to structure sections and separate content blocks. | Avoid applying heavy drop shadows to `{card}` components; rely on `{colors.outline}` for definition. |
| Set code block containers to use `{colors.surface-container}` as their background color. | Do not mix font families; use the canonical 'Suisse' typeface across all `{typography}` levels. |
| Maintain a consistent vertical rhythm by separating major sections with `{spacing.2xl}` margins. | Do not crowd layout elements; avoid using `{spacing.xs}` or `{spacing.sm}` for primary section padding. |
| Use `{badge-success}` to highlight positive benchmarks and successful API response states. | Do not use `{colors.success}` or `{colors.error}` for non-semantic decorative elements. |
| Apply `{elevation.sm}` only to interactive elements or elevated cards like `{card-elevated}` to preserve a flat, high-performance aesthetic. | Do not stack multiple layers of `{elevation.lg}` or apply heavy shadows to standard `{card}` containers. |

## Content Style

*   **CTA Style:** Call-to-action labels must be direct, action-oriented, and developer-focused. Use imperative verbs in sentence case (e.g., "Start for free", "Setup for agents", "View the docs") to drive immediate engagement.
*   **Heading Tone:** Headlines must be technical, clear, and benefit-driven. Focus on performance metrics, open-source credibility, and developer efficiency while avoiding marketing fluff or generic hype.
*   **Copy Density:** Keep text highly scannable and concise. Rely heavily on code snippets, structured tables, visual benchmarks, and bulleted lists to convey technical details quickly, leaving generous whitespace to maintain readability.

## Imagery & Icons

The imagery style combines clean, interactive terminal mockups, live code editors, and minimal line-art grid backgrounds to reinforce the developer-centric aesthetic. Icons must be clean, stroke-based, and highly recognizable developer logos. Visual assets should focus on demonstrating technical utility, such as comparing scraping benchmarks or displaying structured JSON outputs, rather than abstract illustrations.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Firecrawl, a modern, developer-centric data infrastructure brand with a minimal-yet-bold visual identity. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by token name — `{colors.primary}`, `{typography.body-md}`, `{spacing.lg}`, `{rounded.md}` — never hardcode hex values, pixel sizes, or font names.
2. Render only components listed under `components:` (`button-primary`, `card`, `input-field`, etc.). Do not invent variants the spec does not define.
3. Follow the Layout notes: grid-based structure, sections demarcated with `{colors.outline}` borders, and `{spacing.2xl}` vertical separation between major sections. Collapse to single column below 768px.
4. Apply shape language strictly — `{rounded.lg}` on buttons, `{rounded.full}` on badges and tags, `{rounded.xl}` on cards and code blocks, `{rounded.md}` on input fields.
5. Treat the Do's and Don'ts as authoritative. Surface any conflict with a user request before proceeding.

## Output contract

**Must:**
- Use all tokens by name on every generated component.
- Include hover, focus, and disabled states for all interactive components where the spec defines them (`button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply `{colors.on-primary}` on `{colors.primary}` backgrounds; apply `{colors.on-surface}` on `{colors.background}` and `{colors.surface}`.
- Write CTAs and interactive labels in sentence case using direct, imperative verbs per the voice spec.
- Set code block backgrounds to `{colors.surface-container}`.

**Must NOT:**
- Introduce colors, radii, or typefaces not present in the spec.
- Use generic utility defaults when a named token exists.
- Apply heavy drop shadows to `card` components; use `{colors.outline}` borders for definition.
- Use `{colors.primary}` for secondary actions.
- Add emoji, filler copy, or marketing language.
- Rewrite page copy, button labels, headings, or alter navigation structure.

## When in doubt
- If the spec does not define a value, ask the user before inventing one.
- Prefer composing existing components over introducing new tokens.
- Default to `{colors.surface}` for elevated containers and `{colors.background}` for page-level backgrounds.
- For unspecified breakpoints, default to mobile-first with one breakpoint at 768px.
- Tokens marked "(inferred)" yield to any authoritative source such as a theme file or Storybook.