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.
Ciano #00D1FF como color primario. Sin color accent secundario — solo grises de alto contraste para énfasis de texto. Fondos profundos OLED.
background: var(--brand-primary);
/* Cor sólida ciano. NUNCA gradiente multi-cor em textos, botões ou cards */| Vista previa | Token | Valor | Uso |
|---|---|---|---|
| --glow-brand-light | rgba(var(--brand-primary-rgb),0.1) | Glow decorativo de fondo (sutil) | |
| --glow-brand | rgba(var(--brand-primary-rgb),0.2) | Glow decorativo de card (bg) | |
| --glow-brand-strong | rgba(var(--brand-primary-rgb),0.4) | Border activo, hero glow (ciano) | |
| --glow-blue-light | rgba(var(--brand-primary-rgb),0.1) | Hover de btn secondary (ciano) | |
| --glow-blue | rgba(var(--brand-primary-rgb),0.3) | Box-shadow de CTA | |
| --glow-blue-strong | rgba(var(--brand-primary-rgb),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.
/* ✓ CORRETO — cor sólida ciano */
color: var(--brand-primary);
/* ✕ PROIBIDO — gradient-text é anti-padrão (exceto logotipo) */
/* background: linear-gradient(...); -webkit-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 Ciano — CTA principal */
background: var(--brand-primary); color: var(--brand-on-primary);
hover: var(--brand-primary-hover);
/* Secondary Outline Ciano (quando primary é ciano) */
background: transparent; border: 2px solid var(--brand-primary); color: var(--brand-primary);
/* 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.
Reglas de uso, variaciones, clear space y aplicaciones del logotipo Fluxr Pro.
Alerts, toasts, modales, empty states y loading — patrones de feedback visual para el usuario.
Tokens avanzados: border-radius, z-index, surfaces, breakpoints detallados y escalas numéricas.
Grids decorativos, dividers, texturas y patrones visuales que componen el ADN visual de Fluxr Pro.
Templates estandarizados para secciones de marketing, landing pages y páginas de producto.
/* Estructura estándar 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-[var(--brand-primary)]/10 text-[#cbd5e1] text-xs font-bold px-3 py-1 rounded-full border border-[#64748b]/30 uppercase tracking-wider mb-6">
Título de la Sección
</span>
/* Heading */
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
Texto del <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>Patrones de gráficos, KPIs y visualización de datos usados en el dashboard y páginas analíticas.
Frames de dispositivos para presentación de screenshots, demos y materiales de marketing.