---
title: "Firecrawl design system"
variant: extended
source: https://www.firecrawl.dev/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/firecrawl-dev)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Firecrawl · Design System

> Quiet technical precision, punctuated by Firecrawl orange.

**Theme:** light · **Industry:** ai · **Source:** https://www.firecrawl.dev/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Firecrawl pairs a near-white canvas and restrained typography with vivid orange calls to action and highlighted phrases. A long, spacious product story uses code, interface demonstrations, and fine grid details to make a developer-focused API feel approachable.

## North star

Keep the page calm and near-white, using orange sparingly to mark actions, key phrases, and product moments.

## Overview

The page builds its identity from a near-white #f9f9f9 canvas, dark charcoal text, hairline borders, and a small but unmistakable orange signal. Orange highlights key headline phrases, text links, buttons, and selected decorative marks; it is not used as a general section background except for the Alexandria feature panel. The hero centers a large Suisse headline, with the second line picked out in orange, then layers a product prompt interface over a pale technical grid. Across the long page, centered section titles give way to airy two-column feature explanations, code samples, comparison visuals, and product mockups. Roboto Mono makes technical content feel native, while Suisse keeps the surrounding narrative clean and human. Generous vertical pauses separate content groups; fine rules and pale UI surfaces provide structure without heavy cards. Most illustrations are intentionally low-contrast so the information and orange accents remain dominant.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Cloud Canvas | `#f9f9f9` | `--color-cloud-canvas` | surface | Dominant page background and continuous section canvas. |
| Fire Signal | `#ff4d00` | `--color-fire-signal` | accent | Primary CTA, text links, headline emphasis, and small decorative marks. |
| Soft Ember | `#ffe6db` | `--color-soft-ember` | semantic | Measured text color; appears mainly as a pale warm accent rather than the main reading color. |
| Faint Rule | `#ededed` | `--color-faint-rule` | neutral | Hairline dividers, card outlines, and subtle UI boundaries. |
| Quiet Gray | `#727272` | `--color-quiet-gray` | neutral | Muted descriptions and secondary explanatory copy. |
| Charcoal Ink | `#262626` | `--color-charcoal-ink` | brand | Primary headings, navigation, body copy, and dark UI text. |
| Clean Surface | `#ffffff` | `--color-clean-surface` | surface | Raised controls, cards, and the foreground of interface mockups. |
| Slate Gray | `#606060` | `--color-slate-gray` | neutral | Occasional secondary text, especially within dense interface details. |
| Stone Gray | `#949494` | `--color-stone-gray` | neutral | Subdued labels and low-priority interface text. |
| Pale Graphite | `#b5b5b5` | `--color-pale-graphite` | neutral | Very muted text and secondary details in UI demonstrations. |

### Semantic aliases

`--color-canvas` → `#f9f9f9` (Cloud Canvas) · `--color-surface` → `#ffffff` (Clean Surface) · `--color-text` → `#ffe6db` (Soft Ember) · `--color-text-muted` → `#727272` (Quiet Gray) · `--color-text-subtle` → `#262626` (Charcoal Ink) · `--color-border` → `#ededed` (Faint Rule) · `--color-accent` → `#ff4d00` (Fire Signal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffe6db` | `#f9f9f9` | 1.13:1 | fail |
| `#ffe6db` | `#ffffff` | 1.19:1 | fail |
| `#727272` | `#f9f9f9` | 4.57:1 | AA |
| `#727272` | `#ffffff` | 4.81:1 | AA |
| `#262626` | `#f9f9f9` | 14.37:1 | AAA |
| `#262626` | `#ffffff` | 15.13:1 | AAA |
| `#ff4d00` | `#f9f9f9` | 3.16:1 | AA-large |
| `#ff4d00` | `#ffffff` | 3.33:1 | AA-large |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0))`
- `linear-gradient(to top, color(display-p3 0.976471 0.976471 0.976471) 30%, rgba(0, 0, 0, 0) 80%)`
- `linear-gradient(rgba(0, 0, 0, 0), color(display-p3 0.976471 0.976471 0.976471) 95%)`
- `linear-gradient(rgb(255, 255, 255), rgba(0, 0, 0, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Roboto Mono | `--font-mono` | webfont | 400 | Code samples, technical labels, and compact data-like interface text. | Roboto Mono |
| suisse | `--font-body` | webfont | 400, 450, 500 | Headings, body copy, navigation, links, buttons, and the main interface narrative. | Inter |
| GeistMono | `--font-geistmono` | webfont | 400, 500 | Secondary monospace UI and technical details where present. | Geist Mono |

- **Roboto Mono:** Regular monospace texture; keep code compact and avoid turning it into display typography.
- **suisse:** Mostly regular to medium weights; large headings use tight tracking and natural case, without all-caps styling.
- **GeistMono:** Use sparingly for compact technical labels; preserve a restrained, readable monospace appearance.

### Type scale — Perfect Fifth (ratio ≈ 1.466, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 500 | 1.07 | -0.005em | — | suisse | Large hero or major section display headlines. |
| h1 | 52px | 500 | 1.08 | -0.01em | — | suisse | Primary hero headline and top-level page statement. |
| h2 | 40px | 500 | 1.1 | -0.01em | — | suisse | Centered feature and section headlines. |
| h3 | 20px | 400 | 1.4 | -0.005em | — | suisse | Feature names and supporting subsection headings. |
| body | 13px | 400 | 1.54 | 0 | — | suisse | Descriptions, explanatory copy, and general content. |
| caption | 12px | 450 | 1.67 | 0 | — | suisse | Small metadata, helper text, and supporting labels. |
| button | 14px | 450 | 1.43 | 0 | — | suisse | Primary and secondary action labels. |
| nav | 14px | 450 | 1.43 | 0 | — | suisse | Header navigation and menu items. |
| link | 16px | 450 | 1.5 | 0 | — | suisse | Inline documentation links and supporting actions. |
| code | 8.5px | 400 | 1.12 | 0 | — | Roboto Mono | Code snippets and compact technical readouts. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 2, 3, 4, 6, 8, 10, 12, 15, 16, 20, 24, 28, 32, 40, 48 px.
- Section rhythm 90px · element gap 8px · card padding — · max content width 1112px.

The page uses a centered content frame with a measured maximum width of 1112px and a comfortable, low-density rhythm. The hero is centered and layered over a broad, pale technical illustration; later sections alternate centered introductions with two-column feature layouts, code examples, and product visuals. Section backgrounds stay consistently near-white, so changes in content structure and fine rules—not color bands—signal transitions. Large vertical gaps separate the major story beats, while related details sit closer together. Navigation and announcement content are aligned within the same overall frame.

## Shape & elevation

- Radius: button `9999px` · card `16px` · media `50%` · badge `4px` · nav `8px` · link `9999px` · xs `4px` · sm `6px` · md `8px` · lg `10px` · xl `16px` · 2xl `20px` · pill `9999px`
- Shadow `hairline` (other): `rgb(249, 249, 249) 0px 0px 0px 6px`
- Shadow `xl` (card, other): `rgba(0, 0, 0, 0.02) 0px 40px 48px -20px, rgba(0, 0, 0, 0.03) 0px 32px 32px -20px, rgba(0, 0, 0, 0.03) 0px 16px 24px -12px, rgba(0, 0, 0, 0.03) 0px 0px 0px 1px`
- Shadow `inset` (button): `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(d`
- Shadow `xl-2` (other, card): `rgba(0, 0, 0, 0.03) 0px 24px 32px -12px, rgba(0, 0, 0, 0.03) 0px 16px 24px -8px, rgba(0, 0, 0, 0.03) 0px 8px 16px -4px, rgba(0, 0, 0, 0.03) 0px 0px 0px 1px`
- Shadow `hairline-2` (text): `color(display-p3 0.984314 0.984314 0.984314) 0px 0px 0px 8px`
- Shadow `hairline-3` (other): `rgb(253, 253, 253) 0px 0px 0px 8px`
- Motion: standard transition `0.2s ease` on interactive elements.

Most structure is flat, separated by #ededed hairlines and pale surface changes. White interface mockups sit slightly above the canvas with restrained, broad shadows; buttons use a more distinct inset orange treatment. Keep cards visually light, with the measured rounded card treatment used selectively rather than enclosing every section.

## Imagery

There is no dominant photography. The page relies on SVG-led technical illustrations, API and browser mockups, code panes, logo marks, and small data visualizations. Mockups sit on white or near-white surfaces, with low-contrast gray details and occasional orange highlights. Hero imagery stretches broadly behind the centered message; later visuals are arranged beside copy or in compact comparison layouts. The Alexandria panel is the clearest full-bleed illustration moment, using vivid orange as a contained feature backdrop.

## Components

### Announcement banner

A long orange pill-shaped notice sits above the navigation, with small centered light text and an inline announcement link.

### Primary CTA

Orange button with white Suisse text, a rounded pill-like silhouette, and subtle inset orange shadow treatment.

### Navigation

A centered, restrained header with dark Suisse labels, small dropdown indicators, and a light neutral sign-up control.

### Hero search prompt

White rounded prompt interface with a text-entry area, mode tabs, and a prominent orange arrow action.

### Feature/code panel

Light, hairline-separated content with explanatory copy paired with compact monospace snippets or rendered API output.

### Inline link

Orange Suisse link text integrated into copy or used as a short follow-up action.

### Product showcase panel

A vivid orange Alexandria feature area with centered white messaging and compact actions, distinct from the otherwise pale page.

### Measured component styles

- **Primary button** (“Start for free”): background #ff4c00 · text #ffffff · radius 10px · padding 8px · 450 14px suisse · shadow color(display-p3 0.9804 0.1127 0.098 / 0.2) 0px -6px 12px 0px inset, color(displ
- **Secondary button** (“Prompt”): background #eaeaea · text #262626 · radius 6px · padding 4px 10px · 450 13px suisse
- **Link** (“View the docs”): transparent background · text #ff4d00 · radius 0px · padding 0px · 450 16px suisse
- **Input**: transparent background · text #262626 · radius 0px · padding 0px · 400 15px suisse
- **Card** (“[ 02 / 07 ] · POWER YOUR AGENT”): transparent background · text #262626 · border 1px solid #ededed · radius 0px · padding 0px · 400 16px suisse
- **Badge** (“DOCX”): background #a4a4a4 · text #ffffff · radius 4px · padding 2px 6px · 500 12px suisse · uppercase
- **Navigation item** (“Products Resources Pricing Docs Blog Pla”): transparent background · text #262626 · radius 0px · padding 0px · 400 16px suisse

## Do

- Use #f9f9f9 as the dominant canvas.
- Reserve #ff4d00 for actions, key words, and small highlights.
- Set large headings in Suisse or a close sans-serif substitute.
- Use monospace only for code and technical labels.
- Build structure with whitespace and fine #ededed rules.
- Pair feature copy with quiet product or code demonstrations.

## Don't

- Do not introduce dark section bands.
- Do not use orange as a general page background.
- Do not turn every feature into a heavy card.
- Do not add photography that competes with product UI.
- Do not use all-caps for large display headings.
- Do not make muted interface details high contrast.

## Agent prompt

Build a new Firecrawl-style page with a calm, near-white #f9f9f9 canvas and a centered content frame. Use Charcoal Ink #262626 for readable headings and navigation, with Suisse-like sans-serif typography and large, tightly tracked headline lines. Use Fire Signal #ff4d00 sparingly for primary actions, inline links, and selected headline phrases; buttons should be rounded and clearly actionable. Place technical examples in Roboto Mono-like text. Organize content into spacious, centered section introductions followed by paired copy and product/code demonstrations. Prefer fine Faint Rule #ededed dividers over boxed cards, and use white raised surfaces only for interface mockups. Keep decorative technical graphics pale and low-contrast. Maintain generous pauses between sections, with orange full-panel treatment reserved for a single standout product feature.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and product prompt, with a broad pale technical grid behind the hero and navigation above. | Announcement link, Primary CTA, Agent setup action, Search prompt modes | Orange headline emphasis, White prompt panel, Technical grid illustration, Rounded action button |
| 2 | how-it-works | Centered section heading followed by capability summaries and a wide code/output demonstration. | Mode selection, Code tabs, Copy code action, Documentation links | Two-column code view, Monospace snippets, Light rules, Orange inline links |
| 3 | feature-split | Centered section lead followed by paired agent-connection explanations and code-oriented examples. | Docs links, Skill onboarding, Agent integration guidance | Two-column feature copy, Compact code blocks, Subtle section divider |
| 4 | comparison | Centered section heading with a balanced comparison grid of performance, reliability, and open-source evidence. | Benchmark links, Comparison links, Savings calculator link, Repository link | Benchmark charts, Repository mockup, Quiet data labels, Orange link accents |
| 5 | feature-grid | Centered heading above a spacious sequence of feature explanations and paired product demonstrations. | Media parsing, Wait and extract, Index and scrape, Browser actions | Document mockup, Browser preview, Small icon illustrations, Sparse two-column features |
| 6 | feature-grid | Centered introduction and CTA followed by a use-case list beside a larger product workflow demonstration. | Use-case browsing, View-all action, Deep research example | List with active state, Workflow mockup, Orange button, Subtle separators |
| 7 | stats | Contained full-width orange feature panel followed by a horizontal row of four metrics. | Explore library action, Provider action | Orange illustrated panel, Centered light text, Prominent metrics, Compact supporting labels |

## Source CSS custom properties (selected)

```css
--tw-text-opacity: 1;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--accent-black: color(display-p3 0.149020 0.149020 0.149020 / 1.000000);
--accent-white: color(display-p3 1.000000 1.000000 1.000000 / 1.000000);
--surface: color(display-p3 1.000000 1.000000 1.000000 / 1.000000);
--surface-raised: color(display-p3 1.000000 1.000000 1.000000 / 1.000000);
--accent-amethyst: color(display-p3 0.564706 0.380392 1.000000 / 1.000000);
--accent-bluetron: color(display-p3 0.164706 0.427451 0.984314 / 1.000000);
--accent-crimson: color(display-p3 0.921569 0.203922 0.141176 / 1.000000);
--accent-forest: color(display-p3 0.258824 0.764706 0.400000 / 1.000000);
--accent-honey: color(display-p3 0.925490 0.717647 0.188235 / 1.000000);
--border-faint: color(display-p3 0.929412 0.929412 0.929412 / 1.000000);
--border-muted: color(display-p3 0.909804 0.909804 0.909804 / 1.000000);
--border-loud: color(display-p3 0.901961 0.901961 0.901961 / 1.000000);
--background-base: color(display-p3 0.976471 0.976471 0.976471 / 1.000000);
--background-lighter: color(display-p3 0.984314 0.984314 0.984314 / 1.000000);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/firecrawl-dev