@estebanhiguita
Apply Winter Kpital brand identity to all visual deliverables (HTML pages, presentations, documents, dashboards, emails, infographics, etc.). Use whenever Winter Kpital is mentioned or something associated with the brand is being created.
---
name: winter-kpital-brand
description: Apply Winter Kpital brand identity to all visual deliverables (HTML pages, presentations, documents, dashboards, emails, infographics, etc.). Use whenever Winter Kpital is mentioned or something associated with the brand is being created.
---
# Winter Kpital Brand Skill
Apply the Winter Kpital brand identity consistently across every deliverable. Read this skill
before writing any code or creating any file for this brand.
---
## Brand Colors
| Role | Hex | Usage |
|--------------|-----------|--------------------------------------------|
| Azul Oscuro | `#303C42` | Primary background, headers, nav bars |
| Amarillo | `#FFF7D4` | Light backgrounds, highlights, cards |
| Palo de rosa | `#FFEFE6` | Soft sections, alternating backgrounds |
| Azul menta | `#D9FFF5` | Accent sections, tags, callouts |
| Blanco | `#FFFFFF` | Text on dark, clean surfaces |
**Color pairing rules:**
- Dark bg (`#303C42`) → white text (`#FFFFFF`)
- Light bg (`#FFF7D4`, `#FFEFE6`, `#D9FFF5`) → dark text (`#303C42`)
- Primary CTA buttons: `#303C42` bg with `#FFF7D4` text
- Secondary/ghost buttons: transparent border `#303C42`, `#303C42` text
---
## Typography
Winter Kpital uses **BDO Grotesk** exclusively. Load it from Google Fonts fallback or use system sans-serif stack when not available.
```css
@import url('https://fonts.googleapis.com/css2?family=BDO+Grotesk:wght@300;400&display=swap');
/* Note: If BDO Grotesk is unavailable via Google Fonts, use: */
font-family: 'BDO Grotesk', 'Inter', 'Helvetica Neue', Arial, sans-serif;
```
| Element | Weight | Notes |
|-------------|-------------|------------------------------------|
| `<h1>` | Light (300) | Largest on the piece |
| `<h2>` | Thin (100) | Second largest |
| `<p>` | Light (300) | Body copy, small size |
| Labels/UI | Regular(400)| Buttons, nav items, captions |
---
## Logo / Isotipo
The brand has **four official logo assets**. Always select the correct version based on the background color:
### Logo version rules
| Background type | Background colors | Logo/Isotipo to use | Asset URL |
|---|---|---|---|
| **Fondo oscuro** (azul) | `#303C42` o cualquier fondo oscuro | Logotipo amarillo | `https://winterkpital.com/wp-content/uploads/2025/05/LOGOTIPO_7@2x.png` |
| **Fondo oscuro** (azul) | `#303C42` o cualquier fondo oscuro | Logotipo blanco (alternativa) | `https://winterkpital.com/wp-content/uploads/2025/05/WinterKpitak-Blanco-1-scaled.png` |
| **Fondo claro** (amarillo, blanco, rosa, menta) | `#FFF7D4`, `#FFEFE6`, `#D9FFF5`, `#FFFFFF` | Logotipo azul/negro | `https://winterkpital.com/wp-content/uploads/2025/05/Winter-kpital_LOGOTIPO_1@2x.png` |
| **Fondo claro** (amarillo, blanco, rosa, menta) | `#FFF7D4`, `#FFEFE6`, `#D9FFF5`, `#FFFFFF` | Isotipo azul/negro | `https://winterkpital.com/wp-content/uploads/2025/05/ISOTIPO_06@2x.png` |
**Regla rápida:**
- 🌑 **Fondo oscuro** (`#303C42`) → logo **amarillo** (`LOGOTIPO_7@2x.png`) o **blanco** (`WinterKpitak-Blanco-1-scaled.png`)
- ☀️ **Fondo claro** (`#FFF7D4`, `#FFEFE6`, `#D9FFF5`, `#FFFFFF`) → logo **azul/negro** (`Winter-kpital_LOGOTIPO_1@2x.png`) o isotipo (`ISOTIPO_06@2x.png`)
### Usage in HTML/CSS
```html
<!-- On dark background (#303C42) — use yellow logotype -->
<header class="wk-header"> <!-- dark bg -->
<img src="https://winterkpital.com/wp-content/uploads/2025/05/LOGOTIPO_7@2x.png"
alt="Winter Kpital" style="height: 36px;" />
</header>
<!-- On light background (#FFF7D4, white, etc.) — use dark logotype -->
<section class="section-light">
<img src="https://winterkpital.com/wp-content/uploads/2025/05/Winter-kpital_LOGOTIPO_1@2x.png"
alt="Winter Kpital" style="height: 36px;" />
</section>
<!-- Isotipo only (icon mark) on light background -->
<img src="https://winterkpital.com/wp-content/uploads/2025/05/ISOTIPO_06@2x.png"
alt="Winter Kpital" style="height: 40px;" />
```
### Fallback (when no image available)
If logo images cannot be loaded, represent typographically:
```
❄ Winter
Kpital.
```
- On dark bg: color `#FFF7D4` (yellow) or `#FFFFFF` (white)
- On light bg: color `#303C42` (dark blue)
### General logo rules
- Never distort, recolor outside palette, or modify the logo anatomy
- Minimum clear space: equal to the height of the "W" on all sides
- Do not place the yellow/white logo on a light background
- Do not place the dark/blue logo on a dark background
---
## Design Principles
1. **Clean and spacious** — generous whitespace, no clutter
2. **Sophisticated minimalism** — few elements, high impact
3. **Consistent palette** — only use the 5 brand colors
4. **Typography hierarchy** — always use BDO Grotesk weights correctly
5. **Dark header/footer** — use `#303C42` for structural chrome elements
---
## HTML/CSS Deliverables — Base Template
Always start from this structure for web deliverables:
```html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Winter Kpital</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=BDO+Grotesk:wght@300;400&display=swap');
:root {
--wk-dark: #303C42;
--wk-yellow: #FFF7D4;
--wk-pink: #FFEFE6;
--wk-mint: #D9FFF5;
--wk-white: #FFFFFF;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'BDO Grotesk', 'Inter', sans-serif;
font-weight: 300;
color: var(--wk-dark);
background: var(--wk-white);
}
h1 { font-weight: 300; line-height: 1.1; }
h2 { font-weight: 100; line-height: 1.2; }
p { font-weight: 300; line-height: 1.6; }
/* Header */
.wk-header {
background: var(--wk-dark);
color: var(--wk-white);
padding: 1.5rem 3rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.wk-logo {
font-size: 1.1rem;
font-weight: 300;
letter-spacing: 0.05em;
color: var(--wk-yellow);
}
/* Sections */
.section-dark { background: var(--wk-dark); color: var(--wk-white); padding: 5rem 3rem; }
.section-light { background: var(--wk-yellow); color: var(--wk-dark); padding: 5rem 3rem; }
.section-pink { background: var(--wk-pink); color: var(--wk-dark); padding: 5rem 3rem; }
.section-mint { background: var(--wk-mint); color: var(--wk-dark); padding: 5rem 3rem; }
.section-white { background: var(--wk-white); color: var(--wk-dark); padding: 5rem 3rem; }
/* Buttons */
.btn-primary {
background: var(--wk-dark);
color: var(--wk-yellow);
border: none;
padding: 0.85rem 2rem;
font-family: inherit;
font-weight: 400;
font-size: 0.9rem;
letter-spacing: 0.05em;
cursor: pointer;
text-decoration: none;
display: inline-block;
}
.btn-secondary {
background: transparent;
color: var(--wk-dark);
border: 1.5px solid var(--wk-dark);
padding: 0.85rem 2rem;
font-family: inherit;
font-weight: 400;
font-size: 0.9rem;
letter-spacing: 0.05em;
cursor: pointer;
text-decoration: none;
display: inline-block;
}
/* On dark backgrounds, invert secondary */
.section-dark .btn-secondary {
color: var(--wk-white);
border-color: var(--wk-white);
}
/* Cards */
.wk-card {
background: var(--wk-white);
padding: 2rem;
border-left: 3px solid var(--wk-dark);
}
/* Footer */
.wk-footer {
background: var(--wk-dark);
color: var(--wk-white);
padding: 3rem;
font-size: 0.85rem;
opacity: 0.85;
}
</style>
</head>
<body>
<header class="wk-header">
<div class="wk-logo">❄ Winter<br>Kpital.</div>
<nav><!-- navigation items --></nav>
</header>
<!-- Content sections here -->
<footer class="wk-footer">
<p>© Winter Kpital · www.winterkapital.com</p>
</footer>
</body>
</html>
```
---
## React/JSX Deliverables
Use Tailwind with inline style overrides for brand colors (since custom colors aren't in base Tailwind):
```jsx
const colors = {
dark: '#303C42',
yellow: '#FFF7D4',
pink: '#FFEFE6',
mint: '#D9FFF5',
white: '#FFFFFF',
};
// Use style prop for brand colors, Tailwind for spacing/layout
<div style=colors.dark, color: colors.white>
```
---
## PPTX / Document Deliverables
- **Slide backgrounds**: Alternate between `#303C42`, `#FFF7D4`, `#FFEFE6`, `#D9FFF5`
- **Title slides**: `#303C42` background, `#FFF7D4` or white title text
- **Content slides**: `#FFF7D4` or white background, `#303C42` text
- **Accent color**: use `#D9FFF5` or `#FFEFE6` for highlighted boxes/callouts
- **Font**: BDO Grotesk or fallback to Helvetica Neue / Arial
- **No gradients** — flat color only
- **Avoid drop shadows** — use flat design language
---
## Quick Reference Checklist
Before finalizing any deliverable, verify:
- [ ] Only brand colors used (`#303C42`, `#FFF7D4`, `#FFEFE6`, `#D9FFF5`, `#FFFFFF`)
- [ ] BDO Grotesk font loaded (or proper fallback)
- [ ] H1 = Light 300, H2 = Thin 100, Body = Light 300
- [ ] Header/footer use `#303C42` dark background
- [ ] **Logo version matches background**: dark bg → yellow/white logo; light bg → dark/blue logo or isotipo
- [ ] Sufficient whitespace — no cluttered layouts
- [ ] Buttons follow primary/secondary patternAtomic Design System para Plataforma de Inteligencia de Campo
---
name: bondii-design-system-guidelines
description: Atomic Design System para Plataforma de Inteligencia de Campo
---
# Bondii Design System Guidelines
## Atomic Design System para Plataforma de Inteligencia de Campo
---
## 📋 Índice
1. [Filosofía de Diseño](#filosofía-de-diseño)
2. [Sistema de Colores](#sistema-de-colores)
3. [Tipografía](#tipografía)
4. [Espaciado y Grid](#espaciado-y-grid)
5. [Atomic Design](#atomic-design)
6. [Componentes](#componentes)
7. [Efectos Visuales](#efectos-visuales)
8. [Animaciones](#animaciones)
9. [Responsive Design](#responsive-design)
10. [Naming Conventions](#naming-conventions)
---
## 🎨 Filosofía de Diseño
### Concepto Central
**"Premium Intelligence Tech con Elegancia Bond"**
La plataforma Bondii combina:
- **Infografía Editorial**: Inspiración en diseños tipo WeTransfer y visualizaciones de datos editoriales
- **Premium-Tech**: Interfaces limpias con glassmorphism sutil y efectos de profundidad
- **James Bond Elegance**: Naming y sutilezas visuales inspiradas en el universo de espionaje (sin caer en lo infantil)
### Principios de Diseño
1. **Claridad ante todo**: Los datos deben ser legibles y accionables
2. **Jerarquía visual fuerte**: Uso estratégico de color, tamaño y contraste
3. **Elegancia contenida**: Efectos sutiles que no distraen
4. **Responsive Intelligence**: Adaptación fluida a diferentes dispositivos
5. **Performance-first**: Animaciones y efectos que no comprometen rendimiento
---
## 🎨 Sistema de Colores
### Paleta Principal
#### Colores de Marca
```css
/* Naranja Principal - BAT Brand */
--primary: #E74504
--primary-foreground: #FFFFFF
/* Naranja Secundario - Accent */
--secondary: #FC68A0A
--secondary-foreground: #292929
/* Naranja Intenso - Heatmap Alta Varianza */
--primary-intense: #C43A00
```
#### Fondos y Neutros
```css
/* Background Principal - Beige Casi Blanco */
--background: #FEFDFB
/* Texto Principal - Gris Oscuro */
--foreground: #292929
/* Cards y Superficies Elevadas */
--card: #FFFFFF
--card-foreground: #292929
/* Muted - Beige Suave */
--muted: #F5ECE4
--muted-foreground: #585757
```
#### Sidebar (Navegación)
```css
/* Sidebar - Gris Medio */
--sidebar: #52525B
--sidebar-foreground: #FFFFFF
--sidebar-primary: #E74504
--sidebar-accent: #71717A
--sidebar-border: rgba(255, 255, 255, 0.1)
```
#### Estados y Feedback
```css
/* Success - Verde */
--success: #10b981
--success-bg: #f0fdf4
--success-foreground: #166534
/* Warning - Naranja/Amarillo */
--warning: #f59e0b
--warning-bg: #fef3c7
--warning-foreground: #92400e
/* Error/Destructive - Rojo */
--destructive: #d4183d
--destructive-foreground: #FFFFFF
--destructive-bg: #fef2f2
/* Info - Azul (uso mínimo) */
--info: #3b82f6
--info-bg: #eff6ff
```
#### Heatmap Gradient (Naranjas)
```css
/* Para visualizaciones de mapas de calor */
--heatmap-5: #FCD34D /* Varianza muy baja */
--heatmap-4: #FB923C /* Varianza baja */
--heatmap-3: #F97316 /* Varianza media */
--heatmap-2: #E74504 /* Varianza alta */
--heatmap-1: #C43A00 /* Varianza muy alta */
```
### Opacidades Estándar
```css
--opacity-disabled: 0.4
--opacity-muted: 0.6
--opacity-hover: 0.8
--opacity-pressed: 0.9
```
### Uso de Color por Contexto
| Contexto | Color Principal | Color Secundario | Uso |
|----------|----------------|------------------|-----|
| **CTA Principal** | `primary` | `primary-foreground` | Botones de acción principal |
| **Navegación Activa** | `sidebar-primary` | `sidebar-primary-foreground` | Item de menú seleccionado |
| **KPIs Positivos** | `success` | `success-bg` | Incrementos, cumplimiento alto |
| **KPIs Negativos** | `destructive` | `destructive-bg` | Decrementos, alertas |
| **Datos Neutrales** | `foreground` | `muted-foreground` | Información general |
| **Emphasis** | `primary` | - | Precios, métricas importantes |
---
## ✍️ Tipografía
### Font Family
```css
/* Principal */
font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Fallback Stack */
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif
```
**Outfit** es una tipografía geométrica moderna que evoca la elegancia de Futura pero optimizada para pantallas digitales.
### Escala Tipográfica
| Tamaño | Class | Uso | Line Height | Font Weight |
|--------|-------|-----|-------------|-------------|
| **3xl** | `text-3xl` | Page Titles (H1) | 1.5 | 700 (Bold) |
| **2xl** | `text-2xl` | Section Titles, Large KPIs | 1.5 | 700 (Bold) |
| **xl** | `text-xl` | Card Titles (H2) | 1.5 | 600 (Semibold) |
| **lg** | `text-lg` | Subsection Titles (H3) | 1.5 | 600 (Semibold) |
| **base** | `text-base` | Body Text, Buttons | 1.5 | 400-500 |
| **sm** | `text-sm` | Secondary Text, Labels | 1.4 | 400-500 |
| **xs** | `text-xs` | Captions, Metadata | 1.3 | 400-500 |
### Font Weights
```css
--font-weight-normal: 400 /* Body text */
--font-weight-medium: 500 /* Buttons, labels, emphasis */
--font-weight-semibold: 600 /* Subtitles */
--font-weight-bold: 700 /* Titles, KPIs */
```
### Jerarquía de Texto
```tsx
// Page Title
<h1 className="text-3xl font-bold text-foreground">Centro de Control</h1>
// Section Title
<h2 className="text-2xl font-bold text-foreground">Categorías de Producto</h2>
// Card/Subsection Title
<h3 className="text-lg font-semibold text-foreground">Evolución de Precios</h3>
// Body Text
<p className="text-sm text-muted-foreground">Descripción o contexto</p>
// Caption/Metadata
<span className="text-xs text-muted-foreground">Última actualización: Junio 2026</span>
```
### Colores de Texto por Jerarquía
- **Primary Text**: `text-foreground` (#292929)
- **Secondary Text**: `text-muted-foreground` (#585757)
- **Emphasis/CTA**: `text-primary` (#E74504)
- **Success**: `text-green-600`
- **Warning**: `text-orange-600`
- **Error**: `text-red-600`
---
## 📐 Espaciado y Grid
### Escala de Espaciado (Tailwind)
```css
/* Base: 4px (0.25rem) */
spacing-1: 4px /* 0.25rem */
spacing-2: 8px /* 0.5rem */
spacing-3: 12px /* 0.75rem */
spacing-4: 16px /* 1rem */
spacing-5: 20px /* 1.25rem */
spacing-6: 24px /* 1.5rem */
spacing-8: 32px /* 2rem */
spacing-10: 40px /* 2.5rem */
spacing-12: 48px /* 3rem */
spacing-16: 64px /* 4rem */
```
### Layout Spacing
```tsx
// Página Container
<div className="p-8 space-y-6"> // Padding 32px, gap vertical 24px
// Section Container
<div className="space-y-4"> // Gap vertical 16px entre elementos
// Card Padding
<div className="p-6"> // Padding 24px
// Compact Card
<div className="p-4"> // Padding 16px
```
### Grid System
```tsx
// Dashboard Grid (4 columnas)
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
// Two Column Layout
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
// Three Column Layout
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
```
### Breakpoints
```css
sm: 640px /* Tablet pequeña */
md: 768px /* Tablet */
lg: 1024px /* Desktop */
xl: 1280px /* Desktop grande */
2xl: 1536px /* Desktop extra grande */
```
---
## ⚛️ Atomic Design
### 1. ÁTOMOS (Atoms)
#### 1.1 Iconos
```tsx
// Librería: lucide-react
import { TrendingUp, Store, Users } from "lucide-react";
// Tamaños estándar
<Icon className="w-4 h-4" /> // Small (16px)
<Icon className="w-5 h-5" /> // Medium (20px)
<Icon className="w-6 h-6" /> // Large (24px)
<Icon className="w-8 h-8" /> // XLarge (32px)
// Colores por contexto
<Icon className="text-primary" />
<Icon className="text-muted-foreground" />
<Icon className="text-green-600" />
```
**Iconografía por Contexto:**
- **Dashboard**: `LayoutDashboard`
- **Productos**: `Package`, `Cigarette`, `Flame`, `Wind`, `Pill`
- **Analytics**: `TrendingUp`, `TrendingDown`, `BarChart3`
- **Ubicación**: `MapPin`, `Store`
- **Usuarios**: `Users`, `UserPlus`
- **Acciones**: `Download`, `Upload`, `Filter`, `Calendar`, `Search`
- **Estado**: `CheckCircle2`, `AlertCircle`, `XCircle`
- **Navegación**: `ChevronRight`, `ArrowLeft`
- **Inteligencia**: `Target`, `Sparkles`, `Zap`
#### 1.2 Badges
```tsx
// Success Badge
<span className="text-xs font-medium text-green-600 bg-green-50 px-2 py-1 rounded-full">
+8.2%
</span>
// Warning Badge
<span className="text-xs font-medium text-orange-600 bg-orange-50 px-2 py-1 rounded-full">
Pendiente
</span>
// Primary Badge
<span className="text-xs font-medium text-primary bg-primary/10 px-2 py-1 rounded-full">
Activo
</span>
```
#### 1.3 Avatares
```tsx
// User Avatar
<div className="w-9 h-9 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center text-white text-sm font-bold">
AD
</div>
// Tamaños
w-6 h-6 // 24px - Pequeño
w-9 h-9 // 36px - Medio
w-12 h-12 // 48px - Grande
w-16 h-16 // 64px - Extra Grande
```
#### 1.4 Divisores
```tsx
// Línea horizontal
<div className="border-b border-border" />
// Con contenido
<div className="relative">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-border" />
</div>
<div className="relative flex justify-center text-xs uppercase">
<span className="bg-background px-2 text-muted-foreground">O</span>
</div>
</div>
```
---
### 2. MOLÉCULAS (Molecules)
#### 2.1 Button (Botón)
```tsx
// Primary Button
<button className="flex items-center gap-2 px-4 py-2 rounded-lg bg-primary text-white hover:shadow-lg transition-all">
<Icon className="w-4 h-4" />
<span className="text-sm">Texto del Botón</span>
</button>
// Secondary Button
<button className="flex items-center gap-2 px-4 py-2 rounded-lg border border-border bg-card hover:bg-accent transition-colors">
<Icon className="w-4 h-4" />
<span className="text-sm">Texto del Botón</span>
</button>
// Ghost Button
<button className="flex items-center gap-2 px-4 py-2 rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent transition-colors">
<Icon className="w-4 h-4" />
<span className="text-sm">Texto del Botón</span>
</button>
// Destructive Button
<button className="flex items-center gap-2 px-4 py-2 rounded-lg bg-destructive text-destructive-foreground hover:shadow-lg transition-all">
<Icon className="w-4 h-4" />
<span className="text-sm">Eliminar</span>
</button>
```
**Variantes de Tamaño:**
- **Small**: `px-3 py-1.5 text-xs`
- **Medium** (default): `px-4 py-2 text-sm`
- **Large**: `px-6 py-3 text-base`
#### 2.2 Input Field
```tsx
// Text Input
<div>
<label className="block text-sm mb-2 text-foreground">
Etiqueta del Campo
</label>
<input
type="text"
className="w-full px-4 py-3 rounded-xl bg-input-background border border-border focus:outline-none focus:ring-2 focus:ring-primary transition-all"
placeholder="Placeholder"
/>
</div>
// Input con Icono
<div className="relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
<input
type="text"
className="w-full pl-10 pr-4 py-3 rounded-lg bg-card border border-border focus:outline-none focus:ring-2 focus:ring-primary"
placeholder="Buscar..."
/>
</div>
```
#### 2.3 KPI Card Mini
```tsx
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
<TrendingUp className="w-5 h-5 text-primary" />
</div>
<div>
<p className="text-sm text-muted-foreground">Métrica</p>
<p className="text-2xl font-bold text-foreground">1,234</p>
</div>
</div>
```
#### 2.4 Tabs
```tsx
<div className="border-b border-border">
<div className="flex gap-6">
<button
className="pb-3 px-1 border-b-2 border-primary text-primary font-medium"
>
Tab Activo
</button>
<button
className="pb-3 px-1 border-b-2 border-transparent text-muted-foreground hover:text-foreground transition-colors"
>
Tab Inactivo
</button>
</div>
</div>
```
#### 2.5 Slider (Range Input)
```tsx
<div className="space-y-3">
<input
type="range"
min="0"
max="100"
value={50}
className="w-full h-2 bg-muted rounded-lg appearance-none cursor-pointer accent-primary"
/>
<div className="flex items-center justify-between">
<span className="text-sm text-muted-foreground">0%</span>
<span className="text-2xl font-bold text-primary">50%</span>
<span className="text-sm text-muted-foreground">100%</span>
</div>
</div>
```
---
### 3. ORGANISMOS (Organisms)
#### 3.1 KPI Card (Tarjeta de Métrica Grande)
```tsx
<div className="bg-card rounded-xl p-6 border border-border shadow-sm hover:shadow-md transition-shadow">
<div className="flex items-center justify-between mb-4">
<div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center">
<TrendingUp className="w-6 h-6 text-primary" />
</div>
<span className="text-xs font-medium text-green-600 bg-green-50 px-2 py-1 rounded-full">
+8.2%
</span>
</div>
<h3 className="text-2xl font-bold text-foreground mb-1">$13,500</h3>
<p className="text-sm text-muted-foreground">Precio Promedio / Producto</p>
</div>
```
**Anatomía:**
- **Container**: `bg-card rounded-xl p-6 border border-border`
- **Icon Container**: `w-12 h-12 rounded-lg bg-[color]/10`
- **Value**: `text-2xl font-bold text-[semantic-color]`
- **Label**: `text-sm text-muted-foreground`
- **Change Badge**: Badge con color semántico
#### 3.2 Data Card (Tarjeta Clickeable)
```tsx
<button className="bg-card rounded-xl p-5 border border-border shadow-sm hover:shadow-md hover:border-primary/30 transition-all text-left group">
<div className="flex items-start justify-between mb-3">
<div className="w-12 h-12 rounded-lg bg-gradient-to-br from-primary/10 to-secondary/10 flex items-center justify-center group-hover:scale-110 transition-transform">
<Icon className="w-6 h-6 text-primary" />
</div>
<span className="text-xs font-medium text-green-600 bg-green-50 px-2 py-1 rounded-full">
+12%
</span>
</div>
<h4 className="font-semibold text-foreground mb-1">Título</h4>
<p className="text-2xl font-bold text-primary">234</p>
<p className="text-xs text-muted-foreground mt-1">Descripción</p>
</button>
```
#### 3.3 Chart Card (Tarjeta con Gráfica)
```tsx
<div className="bg-card rounded-xl p-6 border border-border shadow-sm">
<div className="flex items-center justify-between mb-6">
<div>
<h3 className="text-lg font-semibold text-foreground mb-1">
Título del Gráfico
</h3>
<p className="text-sm text-muted-foreground">
Descripción o contexto
</p>
</div>
<button className="text-sm text-primary hover:underline flex items-center gap-1">
Ver Más
<ChevronRight className="w-4 h-4" />
</button>
</div>
<ResponsiveContainer width="100%" height={300}>
{/* Recharts component */}
</ResponsiveContainer>
</div>
```
#### 3.4 Table
```tsx
<div className="bg-card rounded-xl border border-border overflow-hidden">
<table className="w-full">
<thead className="bg-muted/50">
<tr>
<th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">
Columna
</th>
</tr>
</thead>
<tbody>
<tr className="border-b border-border hover:bg-accent/50 transition-colors">
<td className="py-4 px-4 font-medium text-foreground">
Celda
</td>
</tr>
</tbody>
</table>
</div>
```
#### 3.5 Sidebar Navigation
```tsx
<aside className="w-64 bg-sidebar text-sidebar-foreground flex flex-col">
{/* Header */}
<div className="p-6 border-b border-sidebar-border">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center">
<Target className="w-6 h-6 text-white" />
</div>
<div>
<h1 className="text-xl font-bold">Bondii</h1>
<p className="text-xs text-sidebar-foreground/60">Intelligence</p>
</div>
</div>
</div>
{/* Navigation */}
<nav className="flex-1 p-4 space-y-1">
<button className="w-full flex items-center gap-3 px-4 py-3 rounded-lg bg-sidebar-primary text-sidebar-primary-foreground shadow-lg">
<Icon className="w-5 h-5" />
<span className="flex-1 text-left text-sm">Item Activo</span>
<ChevronRight className="w-4 h-4" />
</button>
</nav>
</aside>
```
#### 3.6 Heatmap Visualization
```tsx
<div className="relative bg-gradient-to-br from-muted/20 to-background rounded-xl p-12 min-h-[500px]">
{/* Map container */}
<div className="relative w-full h-full flex items-center justify-center">
{/* Title */}
<div className="absolute top-4 left-4">
<h2 className="text-3xl font-bold text-foreground">COLOMBIA</h2>
<h3 className="text-xl font-semibold text-primary">VARIANZA DE PRECIOS</h3>
</div>
{/* City Data Point */}
<div className="absolute group cursor-pointer" style={{ top: '45%', left: '38%' }}>
<div className="grid grid-cols-14 gap-0.5 w-28 h-28 p-1">
{Array.from({ length: 196 }).map((_, i) => (
<div
key={i}
className="bg-primary rounded-sm transition-all group-hover:bg-primary/90"
style={{
opacity: 0.5 + (Math.random() * 0.4),
transform: `scale(0.7 + Math.random() * 0.3)`
}}
/>
))}
</div>
{/* Tooltip */}
<div className="absolute -bottom-20 left-1/2 -translate-x-1/2 bg-white/95 backdrop-blur-sm rounded-lg p-3 border border-border shadow-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-10">
<p className="text-xs font-bold text-foreground">Ciudad</p>
<p className="text-lg font-bold text-primary">$13,800</p>
<p className="text-xs text-muted-foreground">+2.2% vs estándar</p>
</div>
</div>
{/* Legend */}
<div className="absolute bottom-6 right-6 bg-white/95 backdrop-blur-sm rounded-lg p-4 border border-border shadow-lg">
<p className="text-xs font-bold text-foreground mb-3">Varianza de Precio</p>
<div className="flex items-center gap-3">
<div className="flex flex-col gap-1">
<div className="w-6 h-2 rounded-sm" style={{ backgroundColor: '#C43A00' }}></div>
<div className="w-6 h-2 rounded-sm bg-primary"></div>
<div className="w-6 h-2 rounded-sm bg-orange-400"></div>
<div className="w-6 h-2 rounded-sm bg-orange-300"></div>
<div className="w-6 h-2 rounded-sm bg-orange-200"></div>
</div>
<div className="flex flex-col justify-between text-xs">
<span className="text-muted-foreground">+5%</span>
<span className="text-muted-foreground">+2%</span>
<span className="text-muted-foreground">0%</span>
<span className="text-muted-foreground">-2%</span>
<span className="text-muted-foreground">-5%</span>
</div>
</div>
</div>
</div>
</div>
```
---
## ✨ Efectos Visuales
### Border Radius
```css
--radius-sm: 8px /* rounded-lg - Cards pequeños, inputs */
--radius-md: 10px /* rounded-xl - Cards medianos */
--radius-lg: 12px /* rounded-xl - Cards grandes */
--radius-full: 9999px /* rounded-full - Círculos, pills */
```
### Shadows
```tsx
// Small Shadow (Hover states)
shadow-sm
// Medium Shadow (Cards elevados)
shadow-md
// Large Shadow (Modals, dropdowns)
shadow-lg
// Primary Shadow (CTAs hover)
hover:shadow-lg hover:shadow-primary/20
```
### Glassmorphism
```tsx
// Glassmorphism Card
<div className="bg-white/95 backdrop-blur-sm rounded-lg border border-border">
{/* Content */}
</div>
// Glassmorphism Overlay
<div className="backdrop-blur-sm bg-white/10 rounded-xl">
{/* Content */}
</div>
```
### Gradientes
```tsx
// Primary Gradient
bg-gradient-to-r from-primary to-secondary
// Sidebar Gradient
bg-gradient-to-br from-sidebar to-sidebar-accent
// Avatar Gradient
bg-gradient-to-br from-primary to-secondary
// Card Icon Gradient
bg-gradient-to-br from-primary/10 to-secondary/10
```
---
## 🎬 Animaciones
### Transiciones Estándar
```tsx
// Default Transition
transition-all
// Color Transition
transition-colors
// Transform Transition
transition-transform
// Opacity Transition
transition-opacity
// Shadow Transition
transition-shadow
```
### Duraciones
```css
duration-150 /* Hover rápido - 150ms */
duration-200 /* Hover medio - 200ms */
duration-300 /* Default - 300ms */
duration-500 /* Lento - 500ms */
```
### Hover Effects Comunes
```tsx
// Button Hover
hover:shadow-lg hover:scale-[1.02] transition-all
// Card Hover
hover:shadow-md hover:border-primary/30 transition-all
// Icon Hover
group-hover:scale-110 transition-transform
// Text Link Hover
hover:underline hover:text-primary transition-colors
```
### Estados Interactivos
```tsx
// Active State
className={isActive
? "bg-sidebar-primary text-sidebar-primary-foreground shadow-lg"
: "text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-foreground"
}
// Group Hover
<div className="group">
<Icon className="group-hover:scale-110 transition-transform" />
<div className="opacity-0 group-hover:opacity-100 transition-opacity">
Tooltip
</div>
</div>
```
---
## 📱 Responsive Design
### Layout Patterns
```tsx
// Stack on Mobile, Grid on Desktop
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
// Hide on Mobile
<div className="hidden lg:flex">
// Show only on Mobile
<div className="flex lg:hidden">
// Responsive Padding
<div className="p-4 md:p-6 lg:p-8">
// Responsive Text Size
<h1 className="text-2xl md:text-3xl lg:text-4xl">
```
### Breakpoint Strategy
- **Mobile First**: Diseñar primero para móvil, luego escalar
- **Tablet**: `md:` breakpoint para ajustes de tablet
- **Desktop**: `lg:` breakpoint para vista completa
- **XL Desktop**: `xl:` breakpoint para pantallas grandes (opcional)
---
## 🏷️ Naming Conventions
### Componentes
- **PascalCase** para nombres de componentes: `KPICard`, `HeatmapViz`, `DataTable`
- **Sufijos descriptivos**:
- `Page` para páginas completas: `DashboardPage`, `LoginPage`
- `Card` para tarjetas: `MetricCard`, `BrandCard`
- `Modal` para modales: `ConfirmModal`
- `Item` para items de lista: `AgentItem`, `MenuItem`
### Props
- **camelCase** para props: `onNavigate`, `brandName`, `isActive`
- Prefijos semánticos:
- `on` para callbacks: `onClick`, `onSubmit`, `onNavigate`
- `is` / `has` para booleans: `isActive`, `hasError`, `isLoading`
- `show` para visibility: `showModal`, `showTooltip`
### CSS Classes
- Usar **Tailwind utility classes** como estándar
- Para componentes custom complejos, usar **CSS Modules** con BEM simplificado
---
## 📊 Charts & Data Visualization
### Librería: Recharts
#### Colores para Gráficas
```tsx
// Line/Area Charts
stroke="#E74504" // Primary
stroke="#585757" // Muted
stroke="#FC68A0A" // Secondary
// Gradient Fills
<defs>
<linearGradient id="colorPrice" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#E74504" stopOpacity={0.3}/>
<stop offset="95%" stopColor="#E74504" stopOpacity={0}/>
</linearGradient>
</defs>
```
#### Estilos de Tooltip
```tsx
<Tooltip
contentStyle={{
backgroundColor: '#fff',
border: '1px solid #e5e5e5',
borderRadius: '8px',
fontSize: '12px'
}}
/>
```
---
## 🎯 Tokens de Diseño (Resumen)
### Design Tokens Export (JSON)
```json
{
"colors": {
"primary": "#E74504",
"secondary": "#FC68A0A",
"background": "#FEFDFB",
"foreground": "#292929",
"sidebar": "#52525B",
"muted": "#F5ECE4"
},
"typography": {
"fontFamily": "Outfit",
"fontSize": {
"xs": "0.75rem",
"sm": "0.875rem",
"base": "1rem",
"lg": "1.125rem",
"xl": "1.25rem",
"2xl": "1.5rem",
"3xl": "1.875rem"
},
"fontWeight": {
"normal": 400,
"medium": 500,
"semibold": 600,
"bold": 700
}
},
"spacing": {
"xs": "0.25rem",
"sm": "0.5rem",
"md": "1rem",
"lg": "1.5rem",
"xl": "2rem",
"2xl": "3rem"
},
"borderRadius": {
"sm": "0.5rem",
"md": "0.75rem",
"lg": "1rem",
"xl": "1.5rem",
"full": "9999px"
},
"shadows": {
"sm": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
"md": "0 4px 6px -1px rgb(0 0 0 / 0.1)",
"lg": "0 10px 15px -3px rgb(0 0 0 / 0.1)"
}
}
```
---
## 🚀 Implementación Práctica
### Estructura de Carpetas Recomendada
```
/src
/app
/components
/atoms
- Button.tsx
- Icon.tsx
- Badge.tsx
- Avatar.tsx
/molecules
- KPICardMini.tsx
- InputField.tsx
- TabNav.tsx
- Slider.tsx
/organisms
- KPICard.tsx
- DataCard.tsx
- ChartCard.tsx
- Sidebar.tsx
- HeatmapViz.tsx
- DataTable.tsx
/templates
- DashboardLayout.tsx
- AuthLayout.tsx
/pages
- Dashboard.tsx
- CategoriesPage.tsx
- BrandDetailPage.tsx
/styles
- theme.css
- fonts.css
```
---
## 🎨 Inspiración y Referencias
### Estilo Visual
- **WeTransfer**: Infografías limpias con tipografía bold y espacios generosos
- **Stripe Dashboard**: Jerarquía visual clara con KPIs destacados
- **Linear**: Diseño premium-tech con glassmorphism sutil
- **James Bond Aesthetic**: Elegancia minimalista sin elementos infantiles
### Paleta de Color
- **BAT Colombia**: Naranjas corporativos (#E74504, #FC68A0A)
- **Neutros Cálidos**: Beiges y grises para balance
- **Heatmaps**: Gradientes de naranja para visualización de datos
---
## ✅ Checklist de Implementación
### Al crear un nuevo componente:
- [ ] ¿Usa los colores del design system?
- [ ] ¿Aplica la tipografía correcta (Outfit)?
- [ ] ¿Respeta el espaciado estándar?
- [ ] ¿Tiene estados hover/active/disabled apropiados?
- [ ] ¿Es responsive (mobile-first)?
- [ ] ¿Usa los border-radius consistentes?
- [ ] ¿Las transiciones son suaves (300ms)?
- [ ] ¿Los iconos son del tamaño correcto?
- [ ] ¿El contraste de texto es accesible?
- [ ] ¿Sigue el naming convention?
---
## 📝 Notas Finales
Este design system está diseñado para ser:
- **Escalable**: Fácil de extender con nuevos componentes
- **Consistente**: Todos los componentes siguen las mismas reglas
- **Performante**: Uso eficiente de CSS y animaciones
- **Accesible**: Contraste y jerarquía visual apropiados
- **Premium**: Estética profesional y moderna
**Versión**: 1.0
**Última actualización**: Febrero 2026
**Mantenedor**: Equipo BondiiAnaliza y optimiza requerimientos de software
A partir del input del usuario analiza y pregunta si tienes dudas antes, genera un listado de especificaciones