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 · 11 tokens

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

display-lgDisplay lg60px / 700

headline-mdHeadline md24px / 600

body-lgBody lg18px / 400

label-mdLabel md14px / 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

80%

what's covered

accessibility advisory

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

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

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

components.badge: textColor (#ff4c00) on backgroundColor (#f9c2ab) has contrast ratio 2.12:1, below WCAG AA minimum of 4.5:1.

components.badge-success: textColor (#28a745) on backgroundColor (#e2f0d9) has contrast ratio 2.64:1, below WCAG AA minimum of 4.5:1.

components.badge-error: textColor (#dc3545) on backgroundColor (#fce8e6) has contrast ratio 3.84:1, below WCAG AA minimum of 4.5:1.

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