Firecrawl

---
version: "alpha"
name: "Firecrawl"
description: "Reference design from a website capture. Computed values and representative element roles remain draft."
x-zsd:
  profile: "0.1"
  kind: "reference"
  source:
    method: "generated"
    url: "https://www.firecrawl.dev/"
    captured: "2026-10-05"
  review:
    status: "draft"
  unresolved:
    - "Role assignments use representative DOM elements and need visual inspection."
    - "Audience, design rationale, alternate routes, and theme coverage need inspection."
    - "Interaction states, keyboard behavior, and reduced motion need direct inspection."
    - "Color counts and font declarations do not establish semantic roles."
    - "The capture omits 31 requested assets. Archive coverage needs inspection."
    - "The mobile screenshot omits the lower part of the page."
  layout:
    desktop-viewport: "1440px"
    desktop-content-width: "1440px"
    desktop-display: "block"
    mobile-viewport: "390px"
    mobile-content-width: "390px"
  evidence:
    method: "computed-style"
    scope: "Computed styles and representative visible elements. No interaction-state or visual fidelity review."
    selectors:
      colors.primary: "html > body > main > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(3) > div > div:nth-of-type(1) > div > a > button"
      colors.on-primary: "html > body > main > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(3) > div > div:nth-of-type(1) > div > a > button"
      colors.surface: "html > body"
      colors.on-surface: "html > body > main > section:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(4) > p"
      typography.headline-lg: "html > body > main > section:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(4) > h1"
      typography.body-md: "html > body > main > section:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(4) > p"
      typography.label-md: "html > body > main > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(3) > div > div:nth-of-type(1) > div > a > button"
      typography.headline-md: "html > body > main > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(2) > h2"
    viewports:
      - {"width": 1440, "height": 900}
      - {"width": 390, "height": 664}
    mobile-typography:
      headline:
        fontFamily: "suisse, \"suisse Fallback\", system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\""
        fontSize: "44px"
        fontWeight: 500
        lineHeight: 1.0909
        letterSpacing: "-0.22px"
      body:
        fontFamily: "suisse, \"suisse Fallback\", system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\""
        fontSize: "18px"
        fontWeight: 400
        lineHeight: 1.4444
        letterSpacing: "-0.09px"
      action:
        fontFamily: "suisse, \"suisse Fallback\", system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\""
        fontSize: "16px"
        fontWeight: 450
        lineHeight: 1.5
        letterSpacing: "0px"
    imagery:
      images: 84
      canvases: 34
      svg: 920
    action-label: "Start for free"
  motion:
    action-transition:
      duration: "0.2s, 0.1s, 0.1s"
      timing: "ease, ease, ease"
  elevation:
    action-shadow: "color(display-p3 0.9804 0.1127 0.098 / 0.2) 0px -6px 12px 0px inset, color(display-p3 0.9804 0.3647 0.098 / 0.12) 0px 2px 4px 0px, color(display-p3 0.9804 0.3647 0.098 / 0.12) 0px 1px 1px 0px, color(display-p3 0.9804 0.3647 0.098 / 0.16) 0px 0.5px 0.5px 0px, color(display-p3 0.9804 0.3647 0.098 / 0.2) 0px 0.25px 0.25px 0px"
colors:
  primary: "#FF4C00"
  on-primary: "#FFFFFF"
  surface: "#F9F9F9"
  on-surface: "#262626"
typography:
  headline-lg:
    fontFamily: "suisse, \"suisse Fallback\", system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\""
    fontSize: "60px"
    fontWeight: 500
    lineHeight: 1.0667
    letterSpacing: "-0.3px"
  body-md:
    fontFamily: "suisse, \"suisse Fallback\", system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\""
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "0px"
  label-md:
    fontFamily: "suisse, \"suisse Fallback\", system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\""
    fontSize: "14px"
    fontWeight: 450
    lineHeight: 1.4286
    letterSpacing: "0px"
  headline-md:
    fontFamily: "suisse, \"suisse Fallback\", system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\""
    fontSize: "52px"
    fontWeight: 500
    lineHeight: 1.0769
    letterSpacing: "-0.52px"
spacing:
  space-1: "1px"
  space-2: "2px"
  space-3: "3px"
  space-4: "4px"
  space-5: "6px"
  space-6: "8px"
  space-7: "10px"
  space-8: "12px"
  space-9: "16px"
  space-10: "20px"
  space-11: "25px"
  space-12: "40px"
  action-x: "8px"
  action-y: "8px"
  control-height: "36px"
rounded:
  action: "10px"
components:
  action-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    height: "{spacing.control-height}"
    rounded: "{rounded.action}"
---

# Firecrawl

## Overview

A reference record of the captured page. Values come from visible elements and computed styles at the recorded viewports.
Role assignments remain draft. Compare the record with the source screenshots before use.

## Colors

- `primary`: Use for the sampled action surface.
- `on-primary`: Use for text on the sampled action.
- `surface`: Use for the observed page surface.
- `on-surface`: Use for the sampled body text.

## Typography

- `headline-lg`: Use for the sampled page title.
- `body-md`: Use for the sampled body text.
- `label-md`: Use for the sampled action label.
- `headline-md`: Use for the sampled section title.

## Layout

`x-zsd.layout.desktop-content-width` records the sampled main element width.
`x-zsd.layout.desktop-viewport` records its viewport.
Spacing tokens record observed intervals. They do not establish an approved spacing scale.

### Responsive behavior

Compare `x-zsd.layout.mobile-content-width` at `x-zsd.layout.mobile-viewport` with the desktop observation.
Intermediate widths, overflow rules, and layout breakpoints need direct inspection.

## Elevation & Depth

`x-zsd.elevation.action-shadow` records the sampled action shadow. Other depth rules need direct inspection.

## Shapes

- `action`: Use for the sampled action radius.

## Components

### Action

Use `action-primary` for the representative action. Use `action-x` and `action-y` for its horizontal and vertical padding.
Use `control-height` for its observed height.
Hover, focus, pressed, disabled, loading, empty, error, and success states need direct inspection.

## Do's and Don'ts

- Do keep the source URL and capture date with this reference.
- Do compare representative roles with the source screenshots.
- Do keep missing behavior explicit.
- Do not substitute the plugin starter values.
- Do not treat a format check as visual approval.
- Do not infer interaction behavior from static screenshots.

## Motion

`x-zsd.motion.action-transition` records the sampled action transition. Animation timing and reduced motion need direct inspection.

## Iconography

Icon sources and stroke rules need direct inspection.

## Imagery

`x-zsd.evidence.imagery` records counts for images and graphics. Image treatment and crop rules need direct inspection.

## Accessibility

Token contrast checks apply to the sampled pairs. Keyboard paths, labels, and screen reader behavior need direct inspection.
This reference does not establish accessibility conformance.