Firecrawl Design System

design skillsfirecrawl · № —

The design system

Two files, versioned together.

Read the spec, then read the prompt that teaches the model how to use it.

explore the bundle

rendered with firecrawl tokens

Color Palette · 12 tokens

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 Scale · 10 levels

display-lgDisplay lg56px / 700

headline-mdHeadline md28px / 600

body-lgBody lg18px / 400

label-lgLabel lg14px / 500

label-smLabel sm12px / 500

Components

Firecrawl card

design.md · 15 components

Input field

Spacing Scale

2xl

Border Radius Scale

full

Coverage & preview

Per-surface coverage of this spec — the higher each bar, the fewer gaps your AI has to guess.

coverage by surface

81%

what's covered

accessibility advisory

3 color combinations don't meet WCAG AA. Verify before shipping.

components.button-primary: textColor (#ffffff) on backgroundColor (#ff5a1f) has contrast ratio 3.12:1, below WCAG AA minimum of 4.5:1.

components.button-primary-hover: textColor (#ffffff) on backgroundColor (#e04814) has contrast ratio 4.11:1, below WCAG AA minimum of 4.5:1.

components.badge-error: textColor (#d32f2f) on backgroundColor (#f1f1f1) has contrast ratio 4.41:1, below WCAG AA minimum of 4.5:1.

Not affiliated with Firecrawl. All trademarks belong to their respective owners.