FocusFire Ignite
Ignite is our internal proprietary design system and component library. Built with Tailwind v4, native CSS variables, and a highly modular theme engine, it forms the backbone of all FocusFire products.
* Note: The Ignite website builder is an internal agency tool. Contact us directly to have your fully-themed, high-performance web platform built.
The Core Architecture
Ignite bridges the gap between raw styling and interactive components. It maps Tailwind's @theme directives directly to native CSS variables, allowing dynamic color switching without JavaScript bloat.
/* Seamless Tailwind v4 Integration */
@import "@focusfire/ignite/ignite.css";
@layer base {
body {
background-color: var(--color-background);
color: var(--color-foreground);
}
}
Hardware Accelerated
Zero-config components like StellarBackground and GlassPanel leverage GPU acceleration for smooth performance.
Available Data Themes
digi-tech
Default sky blue and pink glass. Light modern aesthetic.
sundance
Warm amber and teal styling over light frosted glass.
glacier
Cool icy blue theme with deep high-contrast styling.
menace
Industrial dark theme with solid high-alert colors.
Themes are activated simply by assigning a data-theme attribute to your layout wrapper or <html> element.
