# NodoTech.io — Brand Skill

> Usa este documento como contexto al crear contenido, disenos o interfaces para NodoTech.io.
> Cubre colores, tipografia, logos, elementos visuales, codigo, data visualization, espaciado y voice & tone.
> Dark mode only — sin tema claro.

## 01 — Colors

### Base Colors
| Name | HEX | HSL | Usage |
|------|-----|-----|-------|
| Background | #131619 | 220 24% 9% | Fondo general del body |
| Card | #191B1F | 220 8% 11% | Cards, paneles |
| Main Content | #1A1C20 | — | Area principal del dashboard (hardcoded) |
| Popover | #242424 | 0 0% 14% | Dropdowns, popovers |
| Emerald | #10B981 | 160 84% 39% | Primario, CTAs, focus rings |
| Foreground | #EBEBEB | 0 0% 92% | Texto principal |

### Sidebar Colors
| Name | HEX | HSL | Token |
|------|-----|-----|-------|
| Sidebar Background | #1A1C20 | 220 8% 11% | `--sidebar-background` |
| Sidebar Foreground | #CFCFCF | 0 0% 81% | `--sidebar-foreground` |
| Sidebar Accent | #232629 | 220 8% 14% | `--sidebar-accent` |
| Sidebar Border | #272A2F | 220 8% 16% | `--sidebar-border` |
| Sidebar Primary | #10B981 | 160 84% 39% | `--sidebar-primary` |

### Primary Scale (Esmeralda)
| 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| #ECFDF5 | #D1FAE5 | #A7F3D0 | #6EE7B7 | #34D399 | #10B981 | #059669 | #047857 | #065F46 | #064E3B |

### Secondary / Accent
| Name | HEX | HSL | Token |
|------|-----|-----|-------|
| Secondary | #292929 | 0 0% 16% | `--secondary` |
| Accent | #2E2E2E | 0 0% 18% | `--accent` |
| Muted | #292929 | 0 0% 16% | `--muted` |
| Muted Foreground | #8C8C8C | 0 0% 55% | `--muted-foreground` |
| Border | #282E38 | 220 12% 18% | `--border` |
| Input | #282E38 | 220 12% 18% | `--input` |

### Destructive
| Name | HEX | HSL | Token |
|------|-----|-----|-------|
| Destructive | #DC2C54 | 340 76% 49% | `--destructive` |
| Destructive Foreground | #FFFFFF | 0 0% 100% | `--destructive-foreground` |

### Chart Palette
| Token | HEX | Color |
|-------|-----|-------|
| `--chart-1` | #10B981 | Esmeralda |
| `--chart-2` | #DC2C54 | Rojo |
| `--chart-3` | #B388F7 | Purpura |
| `--chart-4` | #A37ABF | Lavanda |
| `--chart-5` | #D44D8A | Rosa |

### Extended Chart Palette
| Name | HEX | Role |
|------|-----|------|
| Primary | #10B981 | Serie principal (Esmeralda) |
| 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 |

### Tag Colors (PDF / Pills)
| Name | Background | Text | Usage |
|------|-----------|------|-------|
| Purple | #A37AF6 | #1E1233 | Curiosidad, educativo, autoridad, bot, automatizaciones |
| Red | #F66968 | #2E1212 | Remarketing, comparacion, oferta, urgencia |
| Yellow | #F2E23E | #2E2A0F | Pauta, interes, tendencias, formulario |
| Green | #88E06A | #1A2E12 | Organico, referidos, decision, compra, crm |

### PDF / Reports Colors (Dark)
```js
pageBg:      "#11151C"   // Fondo pagina
cardBg:      "#131519"   // Fondo tarjetas
cellBg:      "#1A1C20"   // Celdas tabla
border:      "#282C33"   // Bordes
borderLight: "#333840"   // Bordes secundarios
emerald:     "#10B981"   // Acentos
emeraldDark: "#065F46"   // Acentos secundarios
```

### White Opacities (Text on dark)
| Opacity | Usage |
|---------|-------|
| 0.85 | Texto principal |
| 0.60 | Texto secundario |
| 0.40 | Texto terciario |
| 0.25 | Decorativo |
| 0.10 | Sutil / separadores |

### Gradients
| Name | Definition | Usage |
|------|-----------|-------|
| Primary | `linear-gradient(135deg, #10B77F 0%, #0C885F 100%)` | Botones, cards destacados, CTAs |
| Text | `linear-gradient(135deg, #10B77F 0%, #0C885F 100%)` (clip-text) | Headlines, numeros destacados |
| AI Chat | Radial gradients emerald 15% en extremos + `#131519` base | Sidebar de Chat IA |

### Accessibility
- Todo texto debe cumplir **WCAG AA** (4.5:1 body, 3:1 texto grande).
- Emerald (#10B981) solo como acento — no para texto extensivo.
- Siempre dark mode: nunca probar el sistema contra fondos claros.

## 02 — Typography

- **UI Font**: Inter (cuerpo, via `next/font/google`)
- **Display / Headings Font**: Montserrat (encabezados)
- **Mono**: system-ui mono (para codigo y tokens)

### Type Scale
| Role | Font | Size | Weight | Line Height |
|------|------|------|--------|-------------|
| Display / Hero | Montserrat | 72px | 800 Extrabold | 0.95 |
| H1 | Montserrat | 48px | 800 | 1.1 |
| H2 | Montserrat | 30px | 700 | 1.15 |
| H3 | Montserrat | 20px | 700 | 1.25 |
| H4 | Montserrat | 18px | 600 | 1.3 |
| Body Large | Inter | 18px | 400 | 1.6 |
| Body | Inter | 16px | 400 | 1.6 |
| Small | Inter | 14px | 400 | 1.5 |
| Caption | Inter | 12px | 500 | 1.4 |
| Mono | system-ui mono | 10-11px | 400 | 1.5 |

### Available Weights
**Inter**: 400, 500, 600, 700, 800, 900 (variable)
**Montserrat**: 400, 500, 600, 700, 800

### Tailwind Classes
- Cuerpo: `font-sans` (variable `--font-inter`)
- Headings: `font-heading` (variable `--font-montserrat`)
- Mono: `font-mono`

### Usage Rules
- Headlines grandes: Montserrat 800, `tracking-tight`, `leading-[0.95]`.
- Body: Inter Regular 16px, line-height 1.6.
- Captions / labels: Inter Medium 10-12px con `tracking-wider uppercase`.
- Codigo: font-mono, 10-11px, color `text-emerald-400/60`.

## 03 — Logo System

- El logo consta de **isologo** (icono) + **logotipo** (NodoTech).
- Tres variantes oficiales servidas desde `media.nodolabs.co`.

### Files
| Variant | URL | Usage |
|---------|-----|-------|
| Logo Dark (sobre fondos oscuros) | https://media.nodolabs.co/uploads/nodo-tech/NodoTech/0cdd80eb_1775756104243.webp | Sidebar expandido, login, PDFs |
| Logo Light (sobre fondos claros) | https://media.nodolabs.co/uploads/nodo-tech/NodoTech/0d2f0f69_1775756100577.webp | Web claras, print |
| Isologo | https://media.nodolabs.co/uploads/nodo-tech/NodoTech/01fb33c7_1775756104063.webp | Sidebar colapsado, favicon |

### Dimensions
| Context | Size |
|---------|------|
| Sidebar expandido | 120×32 px |
| Sidebar colapsado (isologo) | 32×32 px |
| Login | 250×100 px |
| PDF header | height 32px |
| PDF footer | height 28px (opacity 0.5) |

### Do's
- Usar los archivos oficiales sin modificacion.
- Mantener minimo 16px de padding (clear space).
- Usar version oscura sobre fondos oscuros, clara sobre claros.
- El isologo puede usarse standalone con clear space correcto.

### Don'ts
- No rotar, distorsionar ni aplicar efectos al logo.
- No cambiar los colores fuera de la paleta.
- No colocar el logo sobre fondos de bajo contraste.
- No invadir la zona de exclusion con otros elementos.
- No usar `next/image` para los logos remotos — usar `<img>` nativo.

## 04 — Visual Elements

### Backgrounds
- Body: solido `#131619`.
- Cards: solido `#191B1F` o glassmorphism (`bg-white/[0.03] backdrop-blur-sm`).
- Hero: gradient orbs radiales emerald 6-10% con blur de 128px.
- Separadores: border `#282E38` o opacidad blanca 6%.

### Cards
| Variant | Background | Border | Padding |
|---------|-----------|--------|---------|
| Default | #191B1F | #282C33 | 24px (p-6) |
| Glass | bg-white/[0.03] + backdrop-blur-sm | white/[0.06] | 24px |
| Accent | emerald/5 | emerald/20 | 24px |

- Border radius: 16px (`rounded-2xl`)
- Header con icono en cuadrado 32×32 con `bg-emerald-500/15` y esquinas `rounded-lg`.

### Buttons
| Variant | Style |
|---------|-------|
| Primary | Gradient `#10B77F → #0C885F` 135deg, text white, rounded-xl |
| Secondary | bg `#292929`, text white/80, hover bg `#333` |
| Destructive | bg `#DC2C54`, text white |
| Outline | border white/10, text white/70, hover bg white/[0.04] |
| Ghost | text white/50, hover bg white/[0.04] |

### Button Sizes
- Small: `px-3 py-1.5 text-xs h-8 rounded-lg`
- Medium: `px-5 py-2.5 text-sm h-10 rounded-xl`
- Large: `px-7 py-3.5 text-base h-12 rounded-xl`
- Icon: `h-10 w-10 rounded-xl`

### Button States
- Default: gradient base.
- Hover: gradient oscurecido + `shadow-emerald-500/20` + `ring-2 ring-emerald-400/30`.
- Loading: `<Loader2 className="animate-spin" />` + texto "Procesando".
- Disabled: `bg-white/[0.04] border border-white/[0.06] text-white/30 cursor-not-allowed`.

### Badges / Pills
- `rounded-full px-2.5 py-1 text-xs font-medium`
- Soft badges: `bg-color/15` + `text-color` (ej: `bg-emerald-500/15 text-emerald-400`).
- Solid badges: `bg-emerald-500 text-white`.
- Outline: `border border-white/20 text-white/50`.

### Inputs
- Default: `h-10 rounded-lg bg-[#191B1F] border border-[#282E38] px-3 text-sm`.
- Focus: `focus:ring-1 focus:ring-emerald-500`.
- Placeholder: `text-[#8C8C8C]/50`.

### Scrollbar
```css
*::-webkit-scrollbar { width: 4px; height: 4px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 9999px; }
*::-webkit-scrollbar-thumb:hover { background: hsl(var(--foreground) / 0.25); }
```

## 05 — Code / Design Tokens

```css
: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 */
  --sidebar-primary: 160 84% 39%;

  /* Primario (Esmeralda) */
  --primary: 160 84% 39%;            /* #10B981 */
  --primary-foreground: 0 0% 100%;
  --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%;
  --chart-2: 340 76% 49%;
  --chart-3: 270 50% 70%;
  --chart-4: 285 40% 60%;
  --chart-5: 320 65% 55%;

  /* Gradientes */
  --gradient-primary: 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;
}
```

## 06 — Data Visualization

### Chart Typography
| Role | Font | Size/LH | Color | Usage |
|------|------|---------|-------|-------|
| Chart Headline | Montserrat Bold | 18/24 | #EBEBEB / #10B981 | Titulo del grafico |
| Subtitle | Inter Medium | 13/18 | #CFCFCF | Contexto / periodo |
| Axis Labels | Inter Regular | 11/14 | #8C8C8C | Ejes X/Y, categorias |
| Values | Inter Semibold | 12/16 | #EBEBEB | Numeros en barras/puntos |
| Legend | Inter Medium | 11/14 | #CFCFCF | Leyenda de series |
| Footnote | Inter Regular | 10/14 | #8C8C8C/60% | Fuente, notas al pie |

### Diagram Types
1. **Bar Chart** — Barras redondeadas (radius 4), gradiente emerald en serie principal.
2. **Line Chart** — Lineas monotone, dot markers, area fill con gradient emerald 25→0%.
3. **Area Chart** — Gradient fills, emerald primary, backgrounds transparentes.
4. **Stat Cards** — Valor grande en Montserrat, label en Inter small, icono emerald.
5. **Progress Rings** — SVG circular, emerald stroke, thickness 8px.
6. **Numbered List** — Numero en badge emerald, texto en card con border.
7. **Equation Blocks** — Cards apiladas con + y = como separadores.

### Chart Rules
- Un grafico comunica UNA idea. Si necesitas dos, crea dos graficos.
- Titulo claro, subtitulo con contexto, fuente al pie — nunca dejes al lector adivinar.
- Emerald para la serie principal. Los otros colores sirven a la narrativa, no al estilo.
- Documenta periodo y fuente con la tipografia del sistema (Inter Regular 10px).
- No uses mas de 4 series simultaneamente en una vista.
- Prefiere bar y area charts. Evita pie charts.
- No gradientes en los fills salvo el area gradient emerald estandar.

## 07 — Spacing & Layout

### Spacing Scale
| Token | Value | Tailwind |
|-------|-------|----------|
| space-1 | 4px | `p-1` |
| space-2 | 8px | `p-2` |
| space-3 | 12px | `p-3` |
| space-4 | 16px | `p-4` |
| space-6 | 24px | `p-6` |
| space-8 | 32px | `p-8` |
| space-12 | 48px | `p-12` |
| space-16 | 64px | `p-16` |

Base rem = 16px. Usar multiplos de 4px siempre.

### Border Radius
| Token | Value | Tailwind |
|-------|-------|----------|
| rounded-sm | 8px | `rounded-sm` |
| rounded-md | 10px | `rounded-md` |
| rounded-lg | 12px | `rounded-lg` (base `--radius`) |
| rounded-xl | 12px | `rounded-xl` |
| rounded-2xl | 16px | `rounded-2xl` |
| rounded-full | 9999px | `rounded-full` |

### Layout Dimensions
| Element | Size |
|---------|------|
| Sidebar expandido | 256px (`w-64`) |
| Sidebar colapsado | 68px (`w-[68px]`) |
| Chat IA ancho | 380px (`w-[380px]`) |
| Content padding | 32px (`p-8`) |
| Panel gap | 8px (`gap-2`) |
| Panel margin | 8px (`p-2`) |
| AI floating button | 56px (`h-14 w-14`) |
| Sidebar position | `fixed top-2 bottom-2 left-2` |
| Sidebar corners | `rounded-2xl` (16px) |

## 08 — Iconography

- **Libreria principal**: Lucide React (`lucide-react`)
- **Complementaria**: React Icons / Heroicons (`react-icons/hi2`)
- **Regla absoluta**: nunca usar emojis. Siempre SVG icons.

### Rules
- Tamano sidebar items: `h-4 w-4`.
- Tamano sidebar colapsado: `h-5 w-5`.
- Color: heredado del parent via `text-sidebar-foreground`.
- Stroke width: default de Lucide (2px).
- Icono dentro de container: cuadrado 32-40px con `bg-emerald-500/15` + `rounded-lg`.

## 09 — Voice & Tone

La voz de NodoTech es la de un cofounder tecnico hablando con un operador ambicioso.
Directo, sin jerga vacia, con la confianza de quien construye lo que recomienda.

**Idioma primario**: Espanol (codigo en ingles).

### Tone Attributes
1. **Directo** — Decimos lo que hacemos sin rodeos. Sin buzzwords vacias.
   - Ejemplo: "Construimos los sistemas que hacen el crecimiento inevitable."
2. **Con datos** — Cada afirmacion tiene respaldo. Numeros concretos, periodos definidos.
   - Ejemplo: "Genera 40% mas leads calificados en 60 dias."
3. **Con ambicion** — Hablamos a operadores que quieren crecer. No suavizamos el lenguaje.
   - Ejemplo: "El tamano no importa. La ambicion si."
4. **Con sistema** — No vendemos trucos. Vendemos procesos repetibles.
   - Ejemplo: "Las ideas no escalan. Los sistemas si."

### Writing Principles
1. **Claridad sobre elegancia** — Una frase entendida gana a una frase bonita.
2. **Acciones sobre promesas** — Di lo que hace. El beneficio es consecuencia.
3. **Especifico sobre generico** — "40% mas leads calificados" > "mas leads".
4. **Activo sobre pasivo** — "El sistema genera" > "Los leads son generados".
5. **Corto sobre largo** — Si se puede decir en 8 palabras, no uses 15.
6. **Humano sobre corporativo** — Escribimos para personas, no para comites.

### Do's
- "Genera 40% mas leads calificados en 60 dias." — Especifico, medible, con tiempo.
- "Automatiza la operacion. Conserva el control." — Contraste, claridad, corto.
- "Construimos sistemas que crecen contigo." — Accion clara, beneficio implicito.
- "Un equipo. Cada capa. Sin intermediarios." — Ritmo, propuesta de valor en 7 palabras.

### Don'ts
- "Sinergias disruptivas que revolucionan tu negocio." — Buzzword salad.
- "La solucion de proxima generacion para empresas modernas." — Generico, vacio.
- "Transformamos tu presencia digital." — No dice que hace ni como.
- "Empoderamos tu marca con tecnologia de punta." — Hype motivacional, no nuestra voz.

### Voice Examples in Context
| Kind | Copy | Why it works |
|------|------|--------------|
| Headline | "Crecimiento inevitable." | Corto, confiado, la promesa central. |
| Subheadline | "No es marketing. Es un sistema." | Contraste, diferenciacion. |
| CTA | "Basta de hablar de nosotros, hablemos de ti." | Informal pero profesional. Rompe la cuarta pared. |
| Body largo | "Los mismos que diagnostican el problema son los que construyen la solucion — y se quedan a medir el resultado." | Contraste con agencias, accountability explicita. |
| Tagline | "Construye crecimiento sobre sistemas." | Imperativo, metafora concreta. |

### Key Phrases
- "Construimos los 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."

---
*NodoTech.io Brand Skill — Abril 2026 · v1.0*