Firecrawl Design System

Overview

Firecrawl presents itself as a developer-first API platform with a visual language that balances technical precision with approachable warmth. The design rests on a warm light-gray canvas ({colors.canvas} — #ededed) rather than stark white, immediately signaling a tool that lives in the terminal and the browser alike. Brand voltage concentrates almost entirely in a single high-energy orange ({colors.primary} — #fa5d19), which appears on CTAs, the announcement banner, the hero subheadline ("clean web data"), and active tab states. This restrained palette—near-black ink ({colors.ink} — #262626), warm gray surfaces, one brand orange—creates a system where every instance of color carries intentional emphasis.

The typography is anchored by the Suisse typeface, a proprietary geometric sans-serif that reads similarly to Inter or SF Pro but with slightly warmer proportions. The defining typographic move here is the confidence of medium weights: the display headline sits at 500 weight (never bold), and even small UI labels sit at 450 rather than the more common 400. This gives the interface a subtly assertive voice without aggression. Code and URL displays switch to GeistMono, a clean monospace that maintains legibility at small sizes while feeling native to developer tools.

Shape language follows a clear hierarchy: interactive elements like buttons and badges are fully pill-shaped ({rounded.pill} or {rounded.DEFAULT} with 8–10px radius), while content cards use softer rounding at 16–20px. This creates a visual grammar where "tappable" things feel distinctly different from "readable" containers. Shadows are notably sophisticated—multi-layered, with up to six shadow values stacked for elevated surfaces, and the primary button carries its own custom orange-tinted inset shadow that makes it appear luminous rather than merely raised.

The site's architecture reveals a product landing page with strong editorial structure: an orange announcement banner anchors the top, a sticky nav with dropdown menus provides dense but organized navigation, and the hero section combines a massive display headline, an orange-accented subheadline, a descriptive paragraph, a badge callout ("2 Months Free — Annually"), and an interactive demo card showing a URL input with Search/Scrape/Map/Crawl tabs. Below the fold, the pattern continues with what appears to be feature sections, integration showcases, and pricing—all unified by the same warm gray/orange/black vocabulary.

Key Characteristics

• Warm gray canvas ({colors.canvas} — #ededed) replaces pure white as the foundational surface
• Single brand orange ({colors.primary} — #fa5d19) carries all semantic voltage—CTAs, accents, active states, highlights
• Suisse typeface at medium weights (400–500) defines the voice; never bold, never thin
• Pill-shaped buttons ({rounded.DEFAULT} / {rounded.pill}) vs. softly rounded cards ({rounded.lg} — 16px)
• Multi-layered shadow system with custom orange-tinted glow on {component.button-primary}
• GeistMono for all code, URLs, and technical identifiers
• Sticky header with hairline bottom border separating nav from content
• Interactive hero demo card with tabbed interface (Search/Scrape/Map/Crawl) inside elevated container
• Announcement banner using full-width {colors.primary} background with centered white text

Colors

Brand & Accent

• Primary ({colors.primary} — #fa5d19): The signature Firecrawl orange. Used for all primary CTAs ({component.button-primary}), the announcement banner ({component.announcement-banner}), the hero subheadline accent ("clean web data"), active tab indicators, links, and any element demanding user attention or action.
• Primary Hover ({colors.primary-hover} — #e55415): Darkened orange state for hover interactions on buttons and links.
• Primary Active ({colors.primary-active} — #d14a12): Further darkened orange for pressed/active states, used in {component.button-primary-active}.
• Accent ({colors.accent} — #fa5d19): Alias for primary; used interchangeably in the component system.

Surface

• Canvas ({colors.canvas} — #ededed): The page-level background—a warm mid-tone gray that wraps all content. Not white; deliberately warmer and darker to reduce eye strain and signal "developer tool."
• Surface ({colors.surface} — #f9f9f9): Standard card and panel background, slightly lighter than canvas for subtle lift.
• Surface Soft ({colors.surface-soft} — #fdfdfd): Near-white used for the most elevated containers (input fields, modal interiors).
• Surface Elevated ({colors.surface-elevated} — #ffffff): Pure white reserved specifically for floating elements—the hero URL input container, demo cards, and dropdown panels that must pop visually above the gray canvas.
• Surface Dark ({colors.surface-dark} — #262626): Near-black surface used sparingly for inverted contexts like the badge pill and potential footer areas.

Text & Ink

• Ink ({colors.ink} — #262626): The primary text color—near-black but not quite #000. Used for headlines, body copy, nav links, and all default text states.
• Body ({colors.body} — #262626): Alias for ink in the current theme; body text and headings share the same near-black value.
• Muted ({colors.muted} — #8c8c8c): Secondary text for descriptions, placeholder content, inactive tab labels, and supporting information that shouldn't compete with primary copy.
• Muted Strong ({colors.muted-strong} — #525252): Mid-tone gray used for the hero description paragraph—more visible than muted but less than ink.
• Muted Soft ({colors.muted-soft} — #a3a3a3): Very light gray for tertiary metadata, timestamps, or decorative text elements.
• On Primary ({colors.on-primary} — #ffffff): White text rendered on orange backgrounds (buttons, banner). Provides ~4.5:1 contrast ratio against {colors.primary}.
• On Dark ({colors.on-dark} — #ffffff): White text for inverted surfaces (badge pills, potential dark-mode footers).
• On Surface ({colors.on-surface} — #262626): Default text-on-surface token mirroring ink.

Hairlines & Borders

• Hairline ({colors.hairline} — #e5e5e5): Standard border and divider color—light enough to separate without competing. Used on nav bottom edge, card outlines, and input boundaries.
• Hairline Soft ({colors.hairline-soft} — #f0f0f0): Barely-visible separator for subtle internal divisions within cards or panels.
• Border Faint ({colors.border-faint} — #e5e5e5): Functional alias for hairline; specifically referenced in the sticky nav's vertical container guides.
• Border Strong ({colors.border-strong} — #cccccc): Heavier border for focus states or emphasized dividers when hairline would be insufficient.

Semantic

• Error ({colors.error} — #dc2626): Red for form validation errors, API failure states, and destructive actions.
• Success ({colors.success} — #16a34a): Green for confirmation states, successful scrape notifications, and positive status indicators.
• Warning ({colors.warning} — #ca8a04): Amber/yellow for deprecation notices, rate-limit warnings, and caution states.
• Info ({colors.info} — #2563eb): Blue for informational tooltips, help text, and neutral system messages.
• Link ({colors.link} — #fa5d19): Orange link color matching primary brand—inline links inherit the brand color rather than standard blue.
• Link Active ({colors.link-active} — #d14a12): Darkened orange for visited or active link states.

Typography

Font Family

Firecrawl employs two font families in a deliberate dual-track system. The primary face is Suisse, a proprietary geometric sans-serif served as a variable WOFF2 with weights spanning 400 (regular), 450 (medium), 500 (semibold), 600 (semibold bold), and 700 (bold). The CSS fallback stack gracefully degrades through system fonts: "suisse Fallback" (an Arial-based metric-matched override with 103% size adjustment), then ui-sans-serif, system-ui, sans-serif, and finally emoji fonts. For all technical content—URLs displayed in the hero input, code snippets, API endpoint references, and monospace data—the system switches to GeistMono, a clean variable-weight monospace with Roboto Mono as its cross-platform fallback. This pairing creates a clear visual contract: Suisse speaks to humans; GeistMono speaks to machines.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 60px | 500 | 64px | -0.3px | Hero headline ("Power AI agents with...") | | {typography.display-lg} | 52px | 500 | 56px | -0.52px | Hero subheadline ("clean web data") | | {typography.title-md} | 20px | 450 | 28px | -0.1px | Section titles, feature names | | {typography.body-md} | 16px | 400 | 24px | normal | Body paragraphs, descriptions | | {typography.body-sm} | 14px | 450 | 20px | normal | Nav items, small UI text | | {typography.label-md} | 14px | 450 | 20px | normal | Buttons, badges, form labels | | {typography.caption} | 13px | 400 | 18px | normal | Metadata, fine print | | {typography.button} | 14px | 450 | 20px | normal | All button text | | {typography.mono} | 13px | 400 | 18px | normal | URLs, code, technical strings |

Principles

The typography system's most distinctive choice is its refusal to rely on bold weight for emphasis. The display headline hits 500 weight—not 600 or 700—and even the smallest UI labels sit at 450 rather than 400. This creates a uniformly "medium" voice across the entire interface, where hierarchy comes from size (60px → 52px → 20px → 16px → 14px → 13px), color (ink vs. muted vs. orange), and tight negative letter-spacing on large display text (-0.3px at 60px, -0.52px at 52px) rather than weight jumps. The letter-spacing compression on display sizes is critical—it pulls large characters together visually so the headline feels cohesive and modern rather than sparse.

Another principle is the color-as-hierarchy technique visible in the hero: the main headline is {colors.ink}, but the phrase "clean web data" switches to {colors.primary} within the same {typography.display-lg} line. This mixed-color span is a signature moment—the brand color does double duty as both visual accent and semantic highlight. The system also treats monospace text as a first-class citizen rather than an afterthought: {typography.mono} at 13px is only 1px smaller than caption text, ensuring URLs and code remain comfortably readable.

Line heights are consistently generous (1.07× at display sizes, 1.4× at body, 1.38× at caption), which combined with the warm canvas color produces a reading experience that feels open and unhurried despite the technical subject matter.

Note on Font Substitutes

Suisse is a proprietary typeface from Swiss Typefaces (the commercial successor to the foundry behind the classic ABC Helvetica). For implementations requiring Google Fonts alternatives, Inter is the closest match—both are geometric sans-serifs with similar x-heights, circular bowls, and neutral-but-warm character. Set up substitution via CSS variables:

:root {
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

For GeistMono substitutes, JetBrains Mono or IBM Plex Mono provide the closest visual match with excellent ligature support. Always define both --font-sans and --font-mono variables even if no substitution is needed—it establishes a single source of truth for your build pipeline.

Layout

Spacing System

• Base unit: 2px (the {spacing.xxs} increment).
• Tokens: {spacing.xxs} (2px — micro-adjustments), {spacing.xs} (4px — icon gaps), {spacing.sm} (6px — compact internal padding), {spacing.base-sm} (8px — icon-button sizing), {spacing.md} (10px — button internal pad), {spacing.base-md} (12px — list item spacing), {spacing.base-lg} (15px — banner internal), {spacing.lg} (16px — card padding, container gutters), {spacing.xl} (20px — component external margin), {spacing.section-sm} (24px — minor section break), {spacing.nav} (48px — nav-related spacing), {spacing.section} (64px — major vertical rhythm), {spacing.hero-top} (164px — hero top padding on desktop).
• Section padding (vertical): {spacing.section} (64px) — used between major content bands (hero-to-features, features-to-integrations).
• Card internal padding: {spacing.lg} (16px) for compact cards, {spacing.xl} (20px) for spacious content cards like {component.demo-card}.
• Gutters: Desktop container uses {spacing.lg} (16px) horizontal padding within the 1440px max-width; mobile collapses to {spacing.xl} (20px).

Grid & Container

The layout operates on a single 1440px max-width container ({component.container-max}), which is unusually wide for a marketing site—this breadth accommodates the hero's side-by-side headline/demo-card arrangement and allows the background grid decoration (visible in the screenshot's faint square pattern) to breathe. Content within the container follows a loose 12-column implicit grid, though the hero specifically uses a roughly 45/55 split: the text column (headline + description + badge) occupies the left portion, while the interactive demo card floats right with substantial left margin.

The density choice here is editorial-spread: generous whitespace around each block (164px top padding on hero alone), wide container, and comfortable line lengths (~65–75ch for body copy) that prioritize readability over information density. This is not a dashboard—it's a narrative landing page where the product story unfolds vertically.

Whitespace Philosophy

Firecrawl's whitespace strategy is generous but grounded. The warm gray canvas means whitespace doesn't read as "empty white space"—it reads as "gray air," which is inherently calmer. Vertical rhythm uses multiples of 8px/16px/64px, creating a sense of measured pacing. Horizontal whitespace within the 1440px container is asymmetric by design: the hero text column is left-aligned with breathing room, while the demo card pushes right, creating dynamic tension without crowding.

Header Architecture

┌─────────────────────────────────────────────────────────────────┐
│ [🔥 Firecrawl]   Products ▾  Playground  Docs  Pricing  ...   │ ← 64px height
│                 Integrations ▾  Blog  Resources ▾     [115.1K] [Sign up] │
├─────────────────────────────────────────────────────────────────┤ ← 1px hairline border-bottom
│                                                                 │
│  (page content begins below with {spacing.hero-top} = 164px)    │
└─────────────────────────────────────────────────────────────────┘
 ↑ 1440px max-width container centered                            ↑

The sticky nav uses {colors.canvas} background with a {colors.border-faint} bottom hairline. Logo flush-left, navigation items center-left with chevron indicators for dropdown menus, utility items (GitHub star count badge, Sign up CTA) flush-right. The entire header gains position: sticky; top: 0 with z-index: 101 to float above scrolling content.

Hero Section

┌──────────────────────────────────────────────────────────────────┐
│  (164px top padding)                                             │
│                                                                  │
│         ┌──────────────────────┐                                 │
│         │ 2 Months Free — Annually ⓘ │  ← badge-pill             │
│         └──────────────────────┘                                 │
│                                                                  │
│     Power AI agents with          ┌──────────────────────────┐   │
│       clean web data             │ 🔗 https://example.com   │   │
│                                  │                           │   │
│     The API to search, scrape,   │ [Search] [Scrape] [Map] [→]│   │
│     and interact with            └──────────────────────────┘   │
│     the web at scale.                                           │
│                                  ┌──────────────────────────┐   │
│                                  │   (demo illustration /    │   │
│                                  │    screenshot preview)    │   │
│                                  └──────────────────────────┘   │
│                                                                  │
│  (64px bottom padding)                                           │
└──────────────────────────────────────────────────────────────────┘

The hero stacks vertically on mobile but spreads horizontally on desktop (min-width ~1024px). The badge pill sits above the headline. The display-xl headline ("Power AI agents with") is {colors.ink}; the display-lg subheadline ("clean web data") is {colors.primary}. The description paragraph uses {typography.body-md} in {colors.muted-strong}. The demo card is an elevated white container ({colors.surface-elevated}) with {rounded.xl} (20px) corners, containing a URL input row and a segmented control bar (Search/Scrape/Map/Crawl tabs) plus a submit arrow button in {colors.primary}.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 (Flat) | No shadow, {colors.canvas} or {colors.surface} background | Page background, announcement banner, footer | | 1 (Hairline) | 1px {colors.hairline} border, no shadow | Nav bottom edge, input field outlines | | 2 (Soft raise) | {extensions.shadows.card-sm} — 4-layer subtle shadow | Standard cards, dropdown panels | | 3 (Elevated) | {extensions.shadows.card} — 5-layer shadow with larger spread | Demo cards, modal surfaces, featured content | | 4 (Focus ring) | {extensions.shadows.focus-ring} — solid color-offset ring (rgb(249,249,249) 0 0 0 6px) | Focus-visible state on buttons, inputs, interactive elements | | 5 (Brand glow) | {extensions.shadows.button-primary} — 5-layer orange-tinted shadow with inset highlight | Primary CTA button only | | 6 (Hero demo) | {extensions.shadows.hero-demo} — 7-layer mega-shadow with 10px color offset ring | Hero demo card, signature showcase element |

The depth philosophy is layered warmth rather than flat minimalism or heavy material-design elevation. Shadows are always cool-toned (rgba black at 2–5% opacity) except for the primary button, which gets its own orange-tinted glow treatment—an inner shadow highlight that makes the button look backlit. This is a rare moment where the brand color bleeds into non-fill properties, and it's reserved exclusively for the most important interactive element on the page.

The focus ring is notable: instead of a traditional outline or box-shadow in a contrasting color, it uses a solid ring of near-white (rgb(249,249,249)) at 6px spread. On the gray canvas, this creates a subtle "halo" effect that indicates focus without the harshness of blue or purple rings. It's accessibility-compliant and visually gentle.

Decorative Depth

Beyond functional elevation, the hero section employs background grid decoration—a faint pattern of large squares (appearing as subtle {colors.hairline} lines forming a grid) visible in the screenshot's background layer. This is purely atmospheric: it suggests "data," "structure," "the web as a grid" without representing anything literal. Two small four-pointed star/cross symbols (in {colors.primary}) float in the upper portion of the hero area as additional decorative marks—likely scroll-triggered or positionally animated. These decorative elements exist outside the component token system and should be implemented as absolute-positioned SVG or pseudo-elements with low opacity.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 4px | Internal element corners, tag chips | | {rounded.DEFAULT} | 8px | Standard buttons, nav items, stat badges, input containers | | {rounded.md} | 10px | Announcement banner, medium cards | | {rounded.lg} | 16px | Content cards, code blocks, demo illustrations | | {rounded.xl} | 20px | Hero demo card, prominent feature cards | | {rounded.pill} | 999px (full) | Badge pill ("2 Months Free"), tag-style elements |

The shape vocabulary is intentionally limited: three functional categories (small/standard/large) plus the pill escape hatch. This constraint ensures visual consistency across a complex page—every rounded thing falls into a predictable bucket. The dominance of {rounded.pill} for badges and {rounded.DEFAULT} (8px) for buttons creates a tactile "soft rectangle" language that feels modern without being overly playful.

Photography Geometry

No photography is visible in the current viewport—Firecrawl's hero relies on typographic impact, the interactive demo card, and decorative graphic elements (grid, stars) rather than product screenshots or lifestyle imagery. If imagery is added below the fold, it should follow the {rounded.lg} (16px) convention for contained images or be full-bleed without rounding for immersive showcase sections.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-active}, {component.tab-button-active}); add hover styling at implementation time per your stack's conventions.

Buttons & CTAs

{component.button-primary} — The highest-voltage conversion element. Background {colors.primary}, white text ({colors.on-primary}) at {typography.button} (14px/450 weight), {rounded.DEFAULT} (8px), padding {spacing.sm} {spacing.xl} (6px horizontal, 20px vertical internally). Carries the custom orange-tinted shadow stack ({extensions.shadows.button-primary}) with an inset highlight that creates a luminous, slightly recessed appearance. Active state documented as {component.button-primary-active} with darkened background. Appears in the nav ("Sign up"), hero demo card (arrow submit button), and throughout the page as the primary conversion target.

{component.button-primary-active} — Pressed/active state of the primary button. Background shifts to {colors.primary-active} (#d14a12)—roughly 10% darker than default—with all other properties preserved. Implementation should add a subtle scale transform (0.98–0.99) on active per platform conventions.

{component.button-secondary} — Transparent-background button with {colors.ink} text, {typography.button}, {rounded.DEFAULT}. Used for secondary actions that shouldn't compete with the primary CTA. Has no visible border or shadow—relies on text color and cursor change to indicate interactivity.

{component.button-tertiary} — The most subdued button style. Transparent background, {colors.ink} text, {typography.button}, {rounded.DEFAULT}. Padding {spacing.sm} {spacing.md} (6px × 10px). Used for the GitHub star count badge ("115.1K") and mobile menu toggle—utility actions that need clickability without visual weight. Contains an inline SVG icon alongside text.

Navigation

{component.top-nav} — Full-width sticky header. Background {colors.canvas}, height 64px, text in {typography.body-sm}. Contains the Firecrawl flame logo (left), navigation menu items with dropdown chevrons (center-left), and utility actions (right: stat badge + Sign up CTA). A {colors.border-faint} (1px #e5e5e5) hairline runs along the bottom edge. The nav transitions padding on scroll (200ms duration per extracted CSS). Z-index 101 ensures it floats above hero content.

{component.nav-link} — Individual navigation menu items. Transparent background, {colors.ink} text at {typography.body-sm}, {rounded.DEFAULT}. Hover/focus states should add subtle background tint (rgba(0,0,0,0.04) approximate). Dropdown indicators (▾) accompany items with sub-menus (Products, Integrations, Resources).

Hero Section Components

{component.announcement-banner} — Full-width promotional strip at the very top of the page (above nav). Background {colors.primary}, text {colors.on-primary} at {typography.body-md}, {rounded.md} (10px) with overflow hidden. Content reads: "Introducing /parse. Convert PDFs, Word docs, or spreadsheets into clean data for AI agents 5x faster." Includes a "Try it now →" inline link. Padded with {spacing.base-lg} vertical and {spacing.xl} horizontal.

{component.hero-band} — The hero section container itself. Transparent background (inherits canvas), padding {spacing.hero-top} (164px) top, {spacing.lg} (16px) horizontal, {spacing.section} (64px) bottom on desktop. Contains the badge, headline stack, description, and demo card arranged in a responsive grid.

{component.hero-headline} — The primary H1: "Power AI agents with". Uses {typography.display-xl} (60px/500 weight/-0.3px tracking) in {colors.ink}. Centered or left-aligned within the text column. Line height 64px keeps lines tight and impactful.

{component.hero-subheadline} — The second line of the headline: "clean web data". Uses {typography.display-lg} (52px/500 weight/-0.52px tracking) in {colors.primary}—this is the brand-color moment in the hero. Sits immediately below or inline-after the main headline depending on breakpoint.

{component.hero-description} — Supporting paragraph: "The API to search, scrape, and interact with the web at scale. It's also open source." {typography.body-md} (16px/400) in {colors.muted-strong} (#525252). Generous line height (24px) ensures readability beneath the large headlines.

{component.badge-pill} — Inline badge reading "2 Months Free — Annually" with an info icon. Background {colors.surface-dark} (#262626), text {colors.on-dark} (white), {typography.label-md}, fully {rounded.pill}. Positioned above the headline. The dark pill creates strong contrast against the light canvas and draws the eye before the headline is read.

{component.url-input-container} — The white card holding the URL entry interaction. Background {colors.surface-elevated} (white), {rounded.xl} (20px), padding {spacing.lg} (16px), shadow {extensions.shadows.card} (5-layer elevated). Contains the URL input field and tab bar. This is the visual centerpiece of the hero—its white surface pops dramatically against the {colors.canvas} background.

{component.url-input} — The actual text input for entering URLs. Transparent background (inherits white from parent), {colors.ink} text, {typography.body-md} (16px), zero border-radius (sharp corners within the rounded parent), zero padding. Shows placeholder "https://example.com". Focus state adds the {extensions.shadows.focus-ring} (6px white halo).

{component.tab-button} — Segmented control option within the demo card (Search, Scrape, Map, Crawl). Transparent background, {colors.muted} text at {typography.button}, sharp corners (radius 0), padding {spacing.md} {spacing.base-md} (10px × 12px) with zero bottom padding to align with the container edge. Inactive tabs show muted text and a faint icon.

{component.tab-button-active} — Currently selected tab (appears to be "Scrape" in the screenshot). Same structure as {component.tab-button} but text color shifts to {colors.ink} (full strength), indicating selection. An underline or bottom border likely appears on active state (not fully extractable—implement per platform conventions, suggest 2px {colors.ink} bottom border).

{component.tab-button-icon} — Small icon preceding tab label text (grid icon for Search, dots for Scrape, map lines for Map, spider for Crawl). Size approximately 16px, color inherits from parent tab state (muted or ink). Rendered as inline SVG.

Data Display & Content

{component.stat-badge} — Compact numeric display showing "115.1K" (GitHub stars). Transparent background, {colors.muted} text at {typography.label-md}, {rounded.DEFAULT} (8px), padding {spacing.sm} {spacing.md} (6px × 10px). Contains a GitHub icon SVG alongside the number. Functions as social proof in the nav.

{component.demo-card} — General-purpose elevated content container. Background {colors.surface-elevated} (white), {colors.ink} text, {typography.body-md}, {rounded.lg} (16px), padding {spacing.xl} (20px). Shadow {extensions.shadows.card-sm} (4-layer). Used for the interactive preview area below the URL input and potentially for feature showcase cards lower on the page.

{component.code-block} — Monospace content container. Background {colors.surface} (#f9f9f9), {colors.muted} text at {typography.mono} (13px GeistMono), {rounded.lg} (16px), padding {spacing.lg} (16px). Used for JSON previews, API response examples, or terminal output simulations in the demo area.

{component.footer} — Page footer region. Background {colors.canvas} (matches page), {colors.muted} text at {typography.body-sm}, padding {spacing.section} vertical × {spacing.lg} horizontal. Contains legal links, copyright, and secondary navigation.

Do's and Don'ts

Do

• Do use {colors.primary} for all CTAs, active states, and the one branded phrase per headline—this is the sole voltage color and loses power if overused.
• Do set the canvas to {colors.canvas} (#ededed) rather than pure white—the warmth is intentional and distinguishes Firecrawl from generic SaaS templates.
• Do apply {typography.display-xl} at 500 weight (never 600+) to the hero headline; let size carry emphasis rather than boldness.
• Do use {rounded.pill} (999px) for badge-like elements like {component.badge-pill} and {rounded.DEFAULT} (8px) for tappable buttons—the shape distinction helps users identify affordances.
• Do implement the primary button shadow ({extensions.shadows.button-primary}) with its orange-tinted layers—the inset highlight is a signature detail that makes the CTA feel premium.
• Do pair Suisse body copy with GeistMono for any technical strings (URLs, endpoints, code snippets); the monospace swap signals "this is machine-readable."
• Do maintain 164px top padding on the hero at desktop widths—the extreme whitespace is a deliberate luxury that lets the headline land.
• Do use the focus ring ({extensions.shadows.focus-ring}) as a near-white 6px spread for all focus-visible states—it's gentler than blue rings while remaining accessible.
• Do keep the nav sticky with {colors.canvas} background and a 1px {colors.border-faint} bottom edge; the hairline separates nav from content without visual weight.
• Do reserve {colors.surface-elevated} (white) for truly floating elements like the demo card—white against gray canvas creates the primary depth cue.
• Do set letter-spacing to -0.3px at {typography.display-xl} and -0.52px at {typography.display-lg}—the tightening prevents large text from looking sparse.

Don't

• Don't introduce a secondary brand color—{colors.primary} orange is the only chromatic accent; everything else is grayscale or semantic (error/success/warning).
• Don't use font-weight above 500 for any text element—the system tops out at semibold (500 for display, 450 for UI); bold (700) doesn't exist in this vocabulary.
• Don't round the URL input field's corners—it's sharp-edged (radius 0) intentionally, nesting cleanly inside the {rounded.xl} parent container.
• Don't place {colors.primary} text on any background other than white or extremely light gray—the contrast ratio requires careful testing on mid-tones.
• Don't expand the border radius beyond the five defined tokens ({rounded.sm} through {rounded.pill}); inventing new values breaks the predictable shape language.
• Don't remove the announcement banner's {rounded.md} corners or its {colors.primary} background—even though it's full-width, the rounding and padding make it a distinct "notification object" rather than a painted strip.
• Don't use blue for links—Firecrawl's {colors.link} is orange (#fa5d19), matching the brand; standard blue links would feel foreign.
• Don't let the hero demo card touch the headline text—the horizontal gap between text column and demo card should be at least {spacing.section} (64px) at desktop widths.
• Don't apply shadows to the nav or footer—they're meant to feel flush with the canvas, not elevated above it.
• Don't use {colors.ink} for placeholder text in inputs—always drop to {colors.muted} or lighter to indicate field emptiness.

Motion & Animation

Transition Tokens

--transition-base: all 0.2s ease;
--transition-padding: padding 0.2s ease;
--transition-fast: 0.05s ease;
--transition-medium: 0.15s ease;
--transition-complex: 0.2s ease, scale 0.1s ease, box-shadow 0.1s ease;
--transition-opacity: opacity 0.2s ease;
--transition-filter: filter 0.2s ease, opacity 0.2s ease;

The motion system is subtle and fast. Base transitions run at 200ms with ease timing (no custom bezier detected—standard ease is the default). Complex interactions (buttons that scale + shadow simultaneously) decompose into parallel transitions: 0.2s for color/background, 0.1s for transform/shadow. The nav specifically transitions its padding property on scroll (likely reducing vertical padding as user scrolls down), timed at 200ms.

Keyframe Animations

• cursor-blink — Terminal-style blinking caret for the URL input field or code blocks.
• spin-reverse — Counterclockwise rotation, likely for loading indicators.
• bounce — Subtle vertical bounce for scroll-triggered entrance animations.
• ping — Ripple/radial expansion effect, possibly for notification dots or real-time indicators.
• pulse — Opacity pulse for "live" status indicators (real-time scraping feedback).
• snowfall — Decorative particle fall animation for the background atmosphere (code rain / data particles).
• spin — Clockwise rotation for loading spinners.
• ai-chats-chat-shine — Gradient shimmer sweep across chat/message surfaces.
• ai-chats-realtime-indicator — Pulsing dot sequence indicating live data streaming.
• hero-scraping-highlight-before — Highlight sweep effect across the hero demo card during "scraping" simulation.
• swipe-out-left/right/up/down — Directional exit animations for dismissed elements (toasts, notifications).
• sonner-fade-in/out — Toast notification enter/exit transitions (Sonner library integration).
• sonner-spin — Spinner variant for toast loading states.

Interaction Patterns

• Scroll-triggered padding reduction: The top nav reduces its vertical padding after the user scrolls past the hero threshold (detected via transition-[padding] duration-[200ms] class).
• Tab switching: The Search/Scrape/Map/Crawl segmented control swaps content within the demo card; transition likely involves opacity fade (0.2s) or subtle slide.
• Focus rings: All interactive elements gain the {extensions.shadows.focus-ring} (white 6px halo) on keyboard focus—no outline property, pure box-shadow implementation.
• Button press scaling: Primary buttons likely scale to ~0.98–0.99 on active/pressed (inferred from active:[scale( class fragment in Sign up button).
• Hero decoration animation: The background grid and star symbols may parallax or fade on scroll; the snowfall keyframe suggests particle effects in the hero background layer.
• Toast system: Sonner-library toast notifications with fade-in/out and optional spin loading states slide in from top-right.
• Demo simulation: The hero card likely runs an animated "scraping" sequence (highlight sweep + realtime indicator + data population) triggered by clicking the Scrape tab or submitting a URL.

Imagery Style

• The current viewport contains no photography—the hero relies on typography, the interactive demo card, and abstract decorative graphics (grid pattern, star symbols).
• Decorative graphics use thin-line geometric forms: the background grid is composed of faint {colors.hairline} squares suggesting a wireframe/data-structure metaphor; two four-pointed stars (✦) in {colors.primary} act as accent marks in the hero's upper quadrant.
• Illustration style (if present below fold) would likely follow a technical-diagram aesthetic: clean lines, monochrome or single-accent coloring, schematic representations of APIs, web crawlers, or data pipelines.
• Product screenshots (if used later on the page) would be framed in {component.demo-card} containers with {rounded.lg} corners, {extensions.shadows.card} elevation, and likely a subtle gradient or glow backdrop.
• Color treatment for any added imagery should be restrained—grayscale or lightly tinted—to avoid competing with the {colors.primary} orange accent system.
• Icon style throughout is outline/stroke-based, consistent, 1.5–2px stroke weight, rendered as inline SVGs with currentColor fill behavior.

Icon System

• Library: Custom SVG icons (no detected third-party library—Lucide, Heroicons, etc. not identified in class names or font files).
• Specific icons observed: Flame/logo mark (Firecrawl brand), Chevron/down-arrow (dropdown indicators), Info-circle (badge tooltip), Globe/earth (URL input prefix), Grid-2x2 (Search tab), Dots-grid (Scrape tab), Map-pin or map-lines (Map tab), Spider/arrows (Crawl tab), Arrow-right (submit button), GitHub octocat (stat badge), Menu/hamburger (mobile nav).
• Treatment: Stroke-based (not filled), currentColor inheritance for color, typically 16px–20px size, aligned center-vertical with adjacent text. Icons in buttons sit beside text with ~6–8px gap. The flame logo is filled (brand exception).
• Consistency: All icons share uniform stroke width (approximately 1.5px) and geometric construction—no mix of outlined and filled styles except the brand mark.

Recommended Frontend Stack

- Framework:      Next.js 14+ (App Router) — evident from __next_f payload, React server component patterns
- Styling:        Tailwind CSS v3.4+ — confirmed by utility class naming (p-6, rounded-8, bg-background-base, etc.)
- Fonts:          Self-hosted WOFF2 (Suisse + GeistMono) with CSS @font-face declarations; fallback to system font stack
- Animation:      CSS transitions/keyframes (native) + possible Framer Motion for scroll-triggered sequences
- Icons:          Custom SVG components (inline React components, not an icon library)
- Component lib:  Custom component system (no shadcn/Radix detected—handrolled primitives with Tailwind)

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single-column layout; hero stacks vertically; nav collapses to hamburger; demo card becomes full-width; padding reduces to {spacing.xl} (20px) horizontal | | Tablet | 640–1023px | Two-column hero begins (text + demo card side-by-side with reduced gap); nav shows abbreviated menu; {spacing.hero-top} compresses to ~100px | | Desktop | 1024–1439px | Full hero layout (164px top padding, 1440px max container, 45/55 split); all nav items visible; sticky nav at full height | | Wide | ≥ 1440px | Container reaches 1440px max; extra horizontal breathing room; background grid decoration fully visible |

Touch Targets

• {component.button-primary}: Approximately 44–48px height (padding 6px + font 14px + line-height 20px = ~32px internal, plus container sizing reaches WCAG AAA 44×44px minimum).
• {component.button-tertiary} (stat badge): ~36px height—may fall short of 44px AAA minimum on mobile; consider increasing padding to {spacing.base-md} (12px) vertically.
• {component.tab-button}: ~32px height—touch-target concern on mobile; the clickable area should extend invisibly or padding should increase.
• {component.url-input-container}: Interactive area is the full card height (~80–100px)—exceeds minimum comfortably.
• {component.url-input}: Text input intrinsic height ~40px—acceptable but consider min-height 44px for touch.

Collapsing Strategy

• Navigation: At lg-max breakpoint (below 1024px), the full horizontal nav collapses to a hamburger menu icon ({component.button-tertiary} variant with menu SVG). The lg-max:[&_svg]:size-24 class suggests icons resize to 24px on mobile.
• Hero columns: The headline/text column and demo card shift from horizontal (desktop) to vertical stacking (mobile). The demo card becomes full-width within the container. {spacing.hero-top} drops from 164px to approximately 100px (lg:pt-254 / lg:-mt-100 classes suggest complex responsive padding math).
• Announcement banner: Remains full-width at all breakpoints but padding compresses horizontally on mobile.
• Grid decoration: The background grid pattern may disable or simplify on mobile to reduce visual noise and save rendering cost.
• Demo card internals: The tab bar (Search/Scrape/Map/Crawl) may convert to a dropdown or swipeable segment on narrow screens where four tabs don't fit horizontally.

Image Behavior

• Hero demo illustration: If an image/screenshot sits below the URL input within the demo card, it should scale to full card width on mobile with maintained aspect ratio (likely 16:9 or 4:3 for UI mockups).
• Background decorations: The grid pattern and star symbols are likely position: absolute elements that reposition or hide on mobile via media queries—the overflow-x-clip on main suggests horizontal containment is enforced strictly.
• Code blocks: {component.code-block} containers should allow horizontal scroll on mobile if content exceeds container width (overflow-x: auto with faded edge hint).

Iteration Guide

1. Build the landing page foundation using Next.js with App Router and Tailwind CSS v3.4+. Configure your tailwind.config.js to accept the 1440px max-width container and define custom shadow extensions matching {extensions.shadows.*}.
2. Extract every color, font, radius, and spacing value from this DESIGN.md's YAML frontmatter. Reference them as Tailwind theme tokens (e.g., theme('colors.primary'), theme('spacing.hero-top')) or CSS custom properties—never hard-code hex values or pixel measurements that have defined tokens.
3. Implement state variants (hover, focus, active, disabled) as separate component variants following the pattern established in the components: frontmatter. For example, {component.button-primary-active} is a distinct entry, not a nested variants object.
4. When adding new components beyond those documented here, assign them to one of three subsystems: Editorial (headlines, body text, badges), Interactive (buttons, inputs, tabs, nav), or Structural (cards, containers, bands). Each subsystem has distinct padding/radius/shadow conventions.
5. Host the Suisse and GeistMono font files locally (WOFF2 format) and declare them via @font-face with font-display: swap. Define CSS variables --font-sans and --font-mono pointing to these families with their fallback stacks intact.
6. Implement the sticky nav with position: sticky; top: 0; z-index: 101 and the 1px bottom hairline. Add the scroll-triggered padding transition (200ms) that reduces nav vertical padding after the user scrolls past the hero threshold.
7. Build the hero demo card as the visual centerpiece: white background ({colors.surface-elevated}), 20px radius, 5-layer shadow, containing the URL input (transparent, sharp corners) and segmented tab bar (Search/Scrape/Map/Crawl with icon + label). Wire the tab switch to show/hide content panels with 0.2s opacity transition.
8. Apply the primary button glow shadow ({extensions.shadows.button-primary}) exclusively to {component.button-primary} instances. This 5-layer orange-tinted stack (with inset highlight) is a signature detail—do not substitute a standard box-shadow.
9. Run accessibility checks ensuring the white-on-orange contrast ratio ({colors.on-primary} on {colors.primary}) meets WCAG AA (4.5:1 minimum). Verify focus rings render as the 6px near-white halo ({extensions.shadows.focus-ring}) on all interactive elements.
10. Test responsive behavior at 375px (mobile), 768px (tablet), 1024px (desktop threshold), and 1440px (wide). Confirm the hero transitions from stacked (mobile) to side-by-side (desktop), nav collapses appropriately, and the announcement banner remains readable at all widths.

Font Setup: Suisse is proprietary. For development without the licensed font, substitute with Inter (Google Fonts: <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700&display=swap">). For GeistMono, substitute with JetBrains Mono (<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap">). Define:

:root {
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

When production-deploying, replace these with the self-hosted WOFF2 files and original family names.

Known Gaps

• Hover state styling: Per the no-hover policy, exact hover colors, transforms, and background tints for buttons, links, tabs, and nav items were not extractable from the static screenshot. Implement hover states using conventional patterns: darken fills by 8–10%, add subtle background tints (rgba black at 4%), or lift with translateY(-1px).
• Loading/skeleton states: No skeleton loaders, spinner implementations, or pending-state treatments were visible. Recommend using the sonner-spin and spin-reverse keyframes already defined in the CSS for loading indicators.
• Form validation states beyond focus: Error, warning, and success input states (red/green/yellow borders, accompanying message text) are defined semantically ({colors.error}, {colors.success}, {colors.warning}) but no concrete invalid-input component was captured.
• Dropdown menu contents: The nav shows dropdown chevrons (Products ▾, Integrations ▾, Resources ▾) but the expanded menu panels, their dimensions, shadow levels, and item structures are not visible.
• Below-fold sections: Features, integrations, pricing, testimonials, and FAQ sections (implied by nav structure) are not represented in this specification. Their component tokens should extend the established system using existing colors, radii, and typography.
• Dark mode: The entire system is documented in light mode ({extensions.mode}: "light"). A dark mode inversion was not observed and would require deriving a complementary palette (invert canvas/ink, adjust orange for dark-surface contrast, modify shadow opacities).
• Exact values for translucent colors: Several colors in the extracted CSS use color(display-p3 ...) syntax with alpha channels (e.g., color(display-p3 0.14902 0.14902 0.14902 / 0.639216) for muted text). These have been approximated to nearest opaque hex values; precise alpha-blended versions may differ by ±1–2% in luminance.
• Mobile nav drawer: The hamburger menu's expanded state (drawer panel, animation direction, backdrop treatment, close mechanism) is inferred but not directly observable from the desktop-focused screenshot.