open-lovable/styles/design-system/.cursor/rules/design-system.md

Firecrawl Design System Rules

When working with the fire-inspired design system:

Important Note

• For existing pages: Continue using styles/main.css
• For Dashboard v2 pages: Import styles/dashboard.css in the layout

Color System

Use CSS custom properties with P3 color space for richer colors:

• Heat colors: --heat-4 through --heat-100 (fire orange shades)
• Accent colors: --accent-black, --accent-amethyst, --accent-bluetron, --accent-crimson
• Alpha variants: Black and white with various opacity levels
• UI colors: Borders, backgrounds, illustrations
• All colors have sRGB fallbacks for browser compatibility

Typography

Font Families:

• Display: SuisseIntl (weights: 400, 450, 500, 600, 700)
• Mono: System monospace stack (SF Mono, Monaco, Inconsolata, etc.)

Type Scale Classes:

• Headings: .title-h1 through .title-h5
• Body: .body-small, .body-medium, .body-large, .body-x-large
• Labels: .label-small, .label-medium, .label-large, .label-x-large
• Mono: .mono-small, .mono-medium, .mono-large

Utilities

Gradients:

• .gradient-fire - Heat gradient
• .gradient-heat - Subtle heat gradient
• .gradient-sunset - Heat to amethyst
• .gradient-ocean - Blue gradient

Layout:

• .container-prose - Max 65ch width
• .center-absolute - Absolute centering
• .stack-* - Vertical spacing
• .layout-sidebar - Sidebar layout pattern

Effects:

• .blur-backdrop - Backdrop blur
• .border-gradient - Gradient border
• .mask-fade-* - Fade masks
• .focus-ring - Accessible focus states
• .dotted-underline - SVG dotted underline

Animation Classes

• .cursor - Blinking cursor
• .animate-spin-reverse - Reverse rotation
• .animate-flicker - Fire flicker effect
• .animate-glow - Glowing effect
• .transition-* - Smooth transitions

Usage Example

.fire-button {
  background: var(--heat-100);
  color: var(--white);
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
}

.fire-button:hover {
  background: var(--accent-crimson);
  box-shadow: 0 0 40px rgba(250, 93, 25, 0.8);
}

Component CSS Architecture

Component-specific styles go in styles/components/:

• Button.css - Fire-inspired button styles
• Input.css - Input with heat focus states
• Modal.css - Modal with fire animations

Build Optimization

• PostCSS handles optimization
• Tailwind v3 purging via content paths in tailwind.config.js
• P3 color space with automatic sRGB fallbacks
• Font preloading for performance