USE THIS FOR EVERY DESIGN TASK. Firecrawl's visual identity and branding system for building beautifully designed pages. Use this skill when creating new pages, components, or projects that should follow Firecrawl's branding - including the signature heat orange color (#fa5d19), ASCII art animations, button styles, typography, and design patterns. Triggers on tasks involving landing pages, marketing pages, UI components, styling, animations, or brand consistency.
Comprehensive visual identity system for Firecrawl products. Contains design tokens, ASCII animation patterns, component styles, and guidelines for creating beautifully designed, developer-focused pages.
Firecrawl's visual identity is built around heat, fire, and speed:
Reference these guidelines when:
Heat Orange: #fa5d19
This is the signature color. Use it for:
| Token | Light | Dark | Usage |
|---|---|---|---|
| heat-100 | #fa5d19 | #fa5d19 | Primary brand color |
| accent-black | #262626 | #f5f5f5 | Primary text |
| accent-white | #f5f5f5 | #262626 | Inverse text |
| surface | #ffffff | #171717 | Card backgrounds |
| border-muted | #e8e8e8 | #333333 | Subtle borders |
/* Primary Font */
font-family: SuisseIntl, sans-serif;
/* Monospace (code) */
font-family: Geist Mono, monospace;
/* ASCII Art */
font-family: Roboto Mono, monospace;
Primary button with heat color and multi-layer shadow:
.btn-primary {
background: #ff4c00;
color: white;
box-shadow:
inset 0px -6px 12px 0px rgba(255, 0, 0, 0.2),
0px 2px 4px 0px rgba(250, 93, 25, 0.3);
transition: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.btn-primary:hover {
box-shadow:
inset 0px -6px 12px 0px rgba(255, 0, 0, 0.2),
0px 4px 8px 0px rgba(250, 93, 25, 0.4);
}
.btn-primary:active {
transform: scale(0.995);
}
Standard transition: