Paleta de Colores
Sistema de colores basado en CSS custom properties. Todos los valores estan definidos en globals.css como HSL.
Color Primario — Esmeralda
Primary
--primary
Botones, links activos, iconos
Primary Foreground
--primary-foreground
Texto sobre primary
Ring / Focus
--ring
Focus rings
Fondos
Background
--background
Fondo general del body
Card
--card
Cards y paneles
Main Content
hardcoded
Area principal del dashboard
Popover
--popover
Dropdowns, popovers
Sidebar
--sidebar-background
Fondo del sidebar
Sidebar Accent
--sidebar-accent
Items activos sidebar
Textos
Foreground
--foreground
Texto principal
Muted
--muted-foreground
Texto secundario
Sidebar Text
--sidebar-foreground
Texto del sidebar
Bordes
Border
--border
Bordes generales
Input
--input
Bordes de inputs
Sidebar Border
--sidebar-border
Bordes sidebar
Secundarios y Acentos
Secondary
Accent
Muted
Destructive
Graficos (Charts)
Esmeralda
Rojo
Purpura
Lavanda
Rosa
Colores de Tags (PDF / Pills)
curiosidad, educativo, autoridad, bot, automatizaciones
remarketing, comparacion, oferta, urgencia
pauta, interes, tendencias, formulario
organico, referidos, decision, compra, crm
Colores PDF / Reportes (Dark)
Opacidades de Blanco (PDF)
Texto principal
85%
Texto secundario
60%
Texto terciario
40%
Decorativo
25%
Sutil / separadores
10%
Tipografia
Dos familias tipograficas cargadas via next/font/google con display swap. Inter para cuerpo, Montserrat para encabezados.
Construye crecimiento
sobre sistemas.
Estrategia de crecimiento basada en datos.
Inter
Variable CSS: --font-inter · Clase: font-sans
La tecnologia impulsa tu negocio
400 RegularLa tecnologia impulsa tu negocio
500 MediumLa tecnologia impulsa tu negocio
600 SemiboldLa tecnologia impulsa tu negocio
700 BoldLa tecnologia impulsa tu negocio
800 ExtraboldLa tecnologia impulsa tu negocio
900 BlackMontserrat
Variable CSS: --font-montserrat · Clase: font-heading
La tecnologia impulsa tu negocio
400 RegularLa tecnologia impulsa tu negocio
500 MediumLa tecnologia impulsa tu negocio
600 SemiboldLa tecnologia impulsa tu negocio
700 BoldLa tecnologia impulsa tu negocio
800 ExtraboldEscala Tipografica
Heading 1
Heading 2
Heading 3
Heading 4
Body text — La plataforma todo-en-uno para gestionar tu negocio.
Small text — Texto secundario y captions
Caption — Labels, metadata, timestamps
Logos
Archivos servidos desde media.nodolabs.co. Variantes para fondos oscuros y claros. Usa el boton de copiar para obtener el link directo.
Logo Completo — Fondos Oscuros
Logo con texto blanco para sidebar, login y PDFs sobre fondos oscuros
120x32 sidebar · 250x100 login
Uso sobre fondo oscuro
Logo Completo — Fondos Claros
Logo con texto oscuro para uso sobre fondos blancos o claros
120x32 sidebar · 250x100 login
Uso sobre fondo claro
Isologo
Icono compacto para sidebar colapsado y favicons
32x32
Icono universal
Reglas de Uso
Espacio minimo
Mantener al menos 16px de padding alrededor del logo
Sin distorsion
Nunca estirar, rotar o aplicar efectos al logo
Contraste
Usar variante oscura sobre fondos oscuros y variante clara sobre fondos claros
Gradientes
Gradientes primarios usados en botones, headers y textos destacados.
.gradient-primary
135deg · Botones, cards destacados, CTAs
.gradient-text
Mismo gradiente aplicado como color de texto con background-clip: text
background-clip: text; -webkit-text-fill-color: transparent;Gradiente Chat IA
Fondo del sidebar de Chat IA — radial gradients esmeralda 15% opacidad en las puntas superior e inferior
Componentes
Componentes UI base del sistema. Todos usan las CSS custom properties para theming consistente.
Botones — Variantes
Border radius: rounded-xl (12px) · Font: text-sm font-medium · Padding: px-5 py-2.5
Botones — Estados
Default
Hover
Loading
Disabled
Botones — Tamanos
Badges
Cards
Card Default
bg-card con borde estandar y border-radius 16px
Card Glass
Glassmorphism con backdrop-blur y bg-white/3%
Card Accent
Borde y fondo emerald para elementos destacados
Inputs
Scrollbar
Width/Height: 4px
Track: transparent
Thumb: hsl(var(--border)) → #282e38
Thumb hover: foreground 25% opacity
Espaciado y Radius
Sistema de border-radius y dimensiones clave del layout.
Escala de Espaciado
Usar multiplos de 4px. Base rem = 16px. Tailwind: p-1 = 4px, p-4 = 16px, etc.
Border Radius
rounded-sm
8px
rounded-md
10px
rounded-lg
12px
rounded-2xl
16px
rounded-full
9999px
Dimensiones del Layout
256px
Sidebar expandido
w-64
68px
Sidebar colapsado
w-[68px]
380px
Chat IA ancho
w-[380px]
32px
Content padding
p-8
8px
Panel gap
gap-2
8px
Panel margin
p-2
56px
AI button
h-14 w-14
12px
Base radius
rounded-lg
Anatomia del Sidebar
Data Visualization
Las visualizaciones no se eligen por estilo: sirven a la narrativa del sistema. Tokens, paleta y reglas para graficos dentro y fuera del producto.
Tokens tipograficos para graficos
| Token | Fuente | Peso | Size/LH | Uso |
|---|---|---|---|---|
| Chart Headline | Montserrat | Bold | 18/24 | Titulo del grafico |
| Subtitle | Inter | Medium | 13/18 | Contexto / periodo |
| Axis Labels | Inter | Regular | 11/14 | Ejes X/Y, categorias |
| Values | Inter | Semibold | 12/16 | Numeros en barras/puntos |
| Legend | Inter | Medium | 11/14 | Leyenda de series |
| Footnote | Inter | Regular | 10/14 | Fuente, notas al pie |
Paleta para graficos
Primary
#10b981
Serie principal
Emerald Dark
#0c885f
Hover / oscuro
Lime
#88E06A
Positivo / growth
Ocean
#3B82F6
Tendencia
Navy
#1D4ED8
Base profunda
Sky
#7DD3FC
Tonos claros
Violet
#A37AF6
Educativo
Rose
#F66968
Alerta / remkt
Amber
#F2E23E
Destacados
Slate
#475569
Neutro / fondo
Ejemplos en contexto
Usuarios por canal
BarQ4 2025 · Fuente: Marka + GA4
Trafico: Organico vs Referidos
LineEne — Oct 2026 · Visitantes unicos
Reglas de visualizacion
Un grafico comunica una idea — si necesitas dos, crea dos graficos.
Nunca dejes al lector adivinar: titulo claro, subtitulo con contexto, fuente al pie.
Usa emerald para la serie principal. Los otros colores sirven a la narrativa, no al estilo.
Documenta el periodo y la fuente en cada visualizacion con tipografia del sistema.
Iconos
Libreria principal: Lucide React (lucide-react). Complementaria: React Icons / Heroicons (react-icons/hi2). Nunca emojis — siempre iconos SVG.
lucide-reactreact-icons/hi2Reglas
Nunca emojis
Siempre usar iconos SVG de Lucide o Heroicons
Tamano consistente
h-4 w-4 en sidebar items, h-5 w-5 en colapsado
Color via parent
text-sidebar-foreground hereda a los iconos hijos
Stroke width
Usar el default de Lucide (2px stroke)
Voice & Tone
Como suena NodoTech cuando habla. Principios, cards de personalidad, reglas de escritura y ejemplos en contexto.
Construimos los sistemas que hacen el crecimiento inevitable.
No vendemos campanas. Vendemos procesos repetibles que sobreviven al equipo que los construyo.
Como suena NodoTech
Directo
Hablamos claro. Sin rodeos, sin buzzwords vacias. Si algo escala, lo decimos. Si no, tambien.
Con datos
Cada afirmacion tiene respaldo. Numeros concretos, periodos definidos, fuentes visibles.
Con ambicion
Hablamos a operadores que quieren crecer. No suavizamos el lenguaje para complacer.
Con sistema
No vendemos trucos. Vendemos procesos repetibles que sobreviven al equipo que los construyo.
Principios de escritura
Claridad sobre elegancia
Una frase entendida gana a una frase bonita.
Acciones sobre promesas
Di lo que hace. El beneficio es consecuencia.
Especifico sobre generico
“40% mas leads calificados” > “mas leads”.
Activo sobre pasivo
“El sistema genera” > “Los leads son generados”.
Corto sobre largo
Si se puede decir en 8 palabras, no uses 15.
Humano sobre corporativo
Escribimos para personas, no para comites.
Si / No
Si
- →“Genera 40% mas leads calificados en 60 dias.”
- →“Automatiza la operacion. Conserva el control.”
- →“Construimos sistemas que crecen contigo.”
- →“Un equipo. Cada capa. Sin intermediarios.”
No
- דSinergias disruptivas que revolucionan tu negocio.”
- דLa solucion de proxima generacion para empresas modernas.”
- דTransformamos tu presencia digital.”
- דEmpoderamos tu marca con tecnologia de punta.”
Ejemplos en contexto
“Crecimiento inevitable.”
No es marketing. Es un sistema.
“Basta de hablar de nosotros, hablemos de ti.”
Agenda una sesion de diagnostico. 30 minutos.
“Los mismos que diagnostican el problema son los que construyen la solucion — y se quedan a medir el resultado.”
Sin handoffs, sin agencias intermedias.
Frases clave
Biblioteca de afirmaciones listas para usar en web, deck, propuestas y campanas. Usar tal cual o como punto de partida.
“Construimos sistemas que hacen el crecimiento inevitable.”
“Las ideas no escalan. Los sistemas si.”
“No pitcheamos ideas. Creamos sistemas que escalan.”
“Un equipo, cubriendo cada capa.”
“El tamano no importa. La ambicion si.”
“Si el crecimiento requiere construirlo, somos tu equipo.”
“Basta de hablar de nosotros, hablemos de ti.”
“Los que diagnostican son los que construyen — y se quedan a medir.”
CSS Tokens
Bloque de referencia con todas las custom properties del sistema. Copia y pega en tu globals.css o en un modulo de tokens.
:root {
/* Colores base */
--background: 220 24% 9%; /* #131619 */
--foreground: 0 0% 92%; /* #EBEBEB */
--card: 220 8% 11%; /* #191B1F */
--popover: 0 0% 14%; /* #242424 */
/* Sidebar */
--sidebar-background: 220 8% 11%; /* #1A1C20 */
--sidebar-foreground: 0 0% 81%; /* #CFCFCF */
--sidebar-accent: 220 8% 14%; /* #232629 */
--sidebar-border: 220 8% 16%; /* #272A2F */
/* Primario (Esmeralda) */
--primary: 160 84% 39%; /* #10B981 */
--primary-foreground: 0 0% 100%; /* #FFFFFF */
--ring: 160 84% 39%;
/* Secundarios */
--secondary: 0 0% 16%; /* #292929 */
--accent: 0 0% 18%; /* #2E2E2E */
--muted: 0 0% 16%;
--muted-foreground: 0 0% 55%; /* #8C8C8C */
/* Bordes */
--border: 220 12% 18%; /* #282E38 */
--input: 220 12% 18%;
/* Destructivo */
--destructive: 340 76% 49%; /* #DC2C54 */
--destructive-foreground: 0 0% 100%;
/* Graficos */
--chart-1: 160 84% 39%; /* Esmeralda */
--chart-2: 340 76% 49%; /* Rojo */
--chart-3: 270 50% 70%; /* Purpura */
--chart-4: 285 40% 60%; /* Lavanda */
--chart-5: 320 65% 55%; /* Rosa */
/* Gradientes */
--gradient-primary: linear-gradient(135deg, #10B77F 0%, #0C885F 100%);
--gradient-text: linear-gradient(135deg, #10B77F 0%, #0C885F 100%);
/* Tipografia */
--font-sans: "Inter", system-ui, sans-serif;
--font-heading: "Montserrat", system-ui, sans-serif;
/* Espaciado / Radius */
--radius: 12px;
--radius-sm: 8px;
--radius-md: 10px;
--radius-lg: 12px;
--radius-xl: 16px;
}