El sistema completo de identidad visual, voz y diseño de la plataforma SaaS Fluxr Pro — desde el color hasta el componente, de la tipografía al tono.
El alma de la marca — misión, visión, valores y posicionamiento que guían cada decisión de diseño y comunicación.
"Democratizar el acceso a tecnología de primer nivel."
Transformar visiones en experiencias digitales que cautivan y convierten — combinando diseño estratégico y código excepcional para generar resultados reales.
"Ser la plataforma digital que realmente marca la diferencia."
Un ecosistema SaaS completo con IA, automatización, reventa y soporte para escalar negocios digitales.
"¿Tu presencia digital realmente refleja tu potencial?"
Sitios que impresionan + sistemas que funcionan + IA que automatiza. Todo en una plataforma, con soporte real y resultados medibles.
Crea soluciones que empoderan. Comparte conocimiento (blog, docs, base de conocimiento). Usa la tecnología como herramienta de transformación.
Púrpura como identidad principal, azul como acción y CTA. Fondos profundos OLED. Degradado como elemento de destaque.
background: linear-gradient(135deg, #8b5cf6 0%, #135BEC 100%);
/* Uso: títulos hero, badges, borders ativos, CTAs principais */| Vista previa | Token | Valor | Uso |
|---|---|---|---|
| --glow-purple-light | rgba(139,92,246,0.1) | Fondo de badge/chip | |
| --glow-purple | rgba(139,92,246,0.2) | Glow de card en hover | |
| --glow-purple-strong | rgba(139,92,246,0.4) | Border activo, hero glow | |
| --glow-blue-light | rgba(19,91,236,0.1) | Hover de btn secondary | |
| --glow-blue | rgba(19,91,236,0.3) | Box-shadow de CTA | |
| --glow-blue-strong | rgba(19,91,236,0.5) | Box-shadow hover de CTA |
Plus Jakarta Sans como fuente principal — amigable, moderna, profesional. Space Grotesk para títulos hero de alto impacto.
background: linear-gradient(135deg, #8b5cf6, #135BEC);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
Biblioteca de UI construida sobre Tailwind CSS v4 + Framer Motion. Todos los componentes siguen las reglas de la paleta y deben tener hover states definidos.
/* Primary Azul — CTA principal */
background: #135BEC; color: #fff;
hover: #0f4bc4;
/* Secondary Roxo (quando primary é azul) */
background: transparent; border: 2px solid #8b5cf6; color: #8b5cf6;
/* Secondary Neutro (sempre válido) */
border: 2px solid #475569; color: #94a3b8;
/* REGRA: borda e texto SEMPRE mesma cor */
/* NUNCA: primary e secondary da mesma cor */Sistema de spacing basado en múltiplos de 4px. Consistencia en todos los componentes y layouts.
Los efectos que definen el carácter visual Fluxr — glow, glassmorphism, grid, blur y degradado trabajando en conjunto.
Animaciones suaves que dan vida a la interfaz sin distraer. Framer Motion como motor principal. Respetar prefers-reduced-motion.
/* fadeUp — entrada de seções e cards */
const fadeUp = {
hidden: { opacity: 0, y: 28 },
visible: (i: number) => ({
opacity: 1, y: 0,
transition: { delay: i * 0.1, duration: 0.5, ease: [.25,.46,.45,.94] }
})
};
/* stagger — filhos em sequência */
const stagger = { visible: { transition: { staggerChildren: 0.1 } } };
/* VP — viewport options */
const VP = { once: true, margin: '-60px' };La voz de la marca es consistente en todos los idiomas (ES, PT-BR, EN) y canales — sitio, dashboard, emails, WhatsApp y soporte.
Cada producto tiene identidad visual propia dentro del sistema Fluxr. Color, tono y posicionamiento consistentes con la marca principal.
Lucide React como set primario. Heroicons como alternativa. Nunca emojis como íconos funcionales — siempre SVG.
Dos contextos principales: Landing Page y Dashboard. Cada uno con su lógica de grid, secciones y breakpoints.
DashboardShell + DashboardSidebar + DashboardHeader. Roles: admin · cliente · revendedor.Errores comunes que violan la identidad Fluxr. Cualquier componente que viole estas reglas debe corregirse antes del deploy.
Regras de uso, variações, clear space e aplicações do logotipo Fluxr Pro.
Alerts, toasts, modais, empty states e loading — padrões de feedback visual para o usuário.
Tokens avançados: border-radius, z-index, surfaces, breakpoints detalhados e escalas numéricas.
Grids decorativos, dividers, texturas e padrões visuais que compõem o DNA visual do Fluxr Pro.
Templates padronizados para seções de marketing, landing pages e páginas de produto.
/* Estrutura padrão de section */
<section className="py-20 md:py-28">
<div className="max-w-7xl mx-auto px-4 md:px-8">
/* Badge / Eyebrow */
<span className="inline-flex bg-[#8b5cf6]/10 text-[#8b5cf6] text-xs font-bold px-3 py-1 rounded-full border border-[#8b5cf6]/20 uppercase tracking-wider mb-6">
Título da Seção
</span>
/* Heading */
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
Texto do <span className="grad-text">Heading</span>
</h2>
/* Description */
<p className="text-slate-400 text-lg max-w-2xl mb-12">...</p>
/* Content Grid */
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">...</div>
</div>
</section>Padrões de gráficos, KPIs e visualização de dados usados no dashboard e páginas analíticas.
Frames de dispositivos para apresentação de screenshots, demos e materiais de marketing.