🎨 Design System

Rutas de Solidaridad — Guía de Estilos y Componentes

v1.0 · Emergencia Venezuela · 2024

1 Colores

Colores Principales

Rojo Emergencia
#EF4444
🔴 Primario — Botones, alertas críticas
Rojo Oscuro
#B91C1C
🔴 Hover de botones primarios
Rojo Claro
#FCA5A5
🔴 Fondos de alerta, highlights
Verde Éxito
#10B981
🟢 Entregas completadas, éxito
Amarillo Advertencia
#F59E0B
🟡 Alertas medias, advertencias
Azul Info
#3B82F6
🔵 Información, enlaces
Gris Oscuro
#1F2937
⬛ Texto principal
Gris Fondo
#F3F4F6
⬜ Fondo de páginas

Paletas por Categoría

🔴 Emergencia (Rojo)
🟢 Éxito (Verde)
🟡 Advertencia (Amarillo)
🔵 Información (Azul)

2 Tipografía

Fuentes

Aa
Inter
font-family: 'Inter', sans-serif
📝 Principal — textos, títulos, UI
{}
JetBrains Mono
font-family: 'JetBrains Mono', monospace
💻 Código, datos técnicos

Jerarquía Tipográfica

H1 · 32px · Bold · Inter
Título Principal
H2 · 24px · Semibold · Inter
Título de Sección
H3 · 20px · Semibold · Inter
Subtítulo de Tarjeta
H4 · 18px · Medium · Inter
Título de Tarjeta
Body · 16px · Regular · Inter
Texto general de párrafo para el contenido de la aplicación. Se usa para descripciones, detalles, y contenido informativo.
Small · 14px · Regular · Inter
Texto pequeño para descripciones, metadatos, notas al pie.
Label · 14px · Medium · Inter
Etiquetas de formularios
Caption · 12px · Regular · Inter
Texto muy pequeño, notas, timestamps

3 Botones

Variantes

4 Formularios

Inputs

Ingresa tu nombre completo
📧
⚠️ Este campo es requerido

Select & Checkbox

Disponible para entregas

Formulario Completo (Mockup)

┌─────────────────────────────────────────────┐ │ 📝 REGISTRAR AFECTADO │ ├─────────────────────────────────────────────┤ │ 📋 Datos Personales │ │ Nombre * [Juan Pérez______________] │ │ Cédula * [V-12345678____________] │ │ Teléfono [0412-3456789__________] │ │ │ │ 📍 Ubicación │ │ [📍 Obtener ubicación automática] │ │ Dirección [Calle Principal, Catia___] │ │ │ │ 👨‍👩‍👧‍👦 Familia │ │ Adultos:[2] Niños:[1] Mayores:[0] │ │ │ │ 🆘 Necesidades │ │ ☑ Agua ☑ Alimentos ☐ Medicinas │ │ ☐ Ropa ☐ Pañales ☐ Leche │ │ │ │ [💾 REGISTRAR AFECTADO] [✕ CANCELAR] │ └─────────────────────────────────────────────┘

5 Tablas

#NombreCédulaPrioridadEstadoAcciones
1María RodríguezV-12345678🔴 Alta⏳ Pendiente
2Carlos MéndezV-87654321🟡 Media✅ Atendido
3Ana TorresV-11223344🟢 Baja📋 En Proceso

Tabla con Búsqueda (Mockup)

┌──────────────────────────────────────────────────────────────┐ │ 🔍 Buscar: [__________________] Filtrar: [Todos ▼] [Buscar]│ ├──────────────────────────────────────────────────────────────┤ │ # │ Nombre │ Cédula │ Prioridad │ Estado │ │ 1 │ María Rodríguez │ V-12345678 │ 🔴 Alta │ ⏳ Pendiente │ │ 2 │ Carlos Méndez │ V-87654321 │ 🟡 Media │ ✅ Atendido │ │ 3 │ Ana Torres │ V-11223344 │ 🟢 Baja │ 📋 En Proceso│ ├──────────────────────────────────────────────────────────────┤ │ Mostrando 1-3 de 156 resultados [<] [1] [2] [3] [4] [>] │ └──────────────────────────────────────────────────────────────┘

6 Tarjetas (Cards)

Dashboard Stats

👨‍👩‍👧‍👦
156
Afectados Registrados
📦
48
Donaciones Recibidas
🚀
23
Voluntarios Activos
⏳
89
Pendientes

Card de Afectado

Familia Rodríguez

🔴 Alta

👨‍👩‍👧‍👦 Integrantes: 4 (2 adultos, 2 niños)

🆘 Necesidades: Agua, Alimentos, Medicinas

📍 Ubicación: Catia La Mar

📅 Registro: 26/06/2024

35%
Progreso de atención

Centro de Acopio Catia

🟢 Activo

📍 Dirección: Catia La Mar, La Guaira

📦 Stock Total: 1,450 kg

🥫 Alimentos: 850 kg 85%

85%

💧 Agua: 400 L 40%

40%

7 Modales

8 Alertas y Notificaciones

Alertas

✅ ¡Donación registrada exitosamente!
❌ Error: No se pudo registrar la donación. Stock insuficiente.
⚠️ Stock bajo de leche (12L disponibles en Catia La Mar)
ℹ️ Nuevo centro de acopio activado en Maiquetía

Banner de Emergencia

Toast Notifications

10 Barras de Progreso

Stock de Productos

🥫 Arroz850kg / 1000kg
85%
💧 Agua400L / 1000L
40%
🥛 Leche12L / 200L
6%

Entregas del Día

🚚 Progreso15/20 entregas
75%

Prioridad de Afectados

🔴 Alta45 familias
45%
🟡 Media32 familias
32%
🟢 Baja23 familias
23%

11 Badges y Etiquetas

Badges de Estado

Nuevo Completado Pendiente Urgente En Proceso Archivado

Prioridades

🔴 Alta 🟡 Media 🟢 Baja

Categorías de Productos

🥫 Alimentos 💧 Agua 💊 Medicinas 👕 Ropa 🧴 Higiene 🍼 Bebés

Tipos de Donación

💰 Dinero 📦 Insumos 🔒 Anónimo

12 Loaders y Estados de Carga

Spinners

Skeleton Loader

Pantalla de Carga

Cargando datos...

Por favor espera

60%

13 Mapas y Geolocalización

Mapa de Necesidades

🔴
🟡
🟢
📦
🔴 45 Alta 🟡 32 Media 🟢 23 Baja
👨‍👩‍👧‍👦 Familia Rodríguez 📍 Catia La Mar · 🔴 Alta
Ver Asignar

Leyenda y Controles

🔴 Alta Prioridad
Atención inmediata requerida
🟡 Media Prioridad
Puede esperar 24-48 horas
🟢 Baja Prioridad
Ya recibió asistencia
📦 Centro de Acopio
Punto de distribución

14 Diseño Responsive

Breakpoints

📱
< 640px
Móvil · 1 columna
📱
640-1024px
Tablet · 2 columnas
🖥️
> 1024px
Desktop · 3-4 columnas
🖥️
> 1280px
Wide · 4-6 columnas
📱 Mobile First: Todos los componentes se diseñan primero para móvil y se expanden usando min-width media queries. Los botones, inputs y cards tienen padding generoso para interacción táctil.

15 Dashboard Completo (Mockup)

┌────────────────────────────────────────────────────────────────────┐ │ 🆘 RUTAS DE SOLIDARIDAD 🔔 👤 Juan Pérez │ ├────────────────────────────────────────────────────────────────────┤ │ 📊 Dashboard de Emergencia — La Guaira, Venezuela │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ 👥 156 │ │ 📦 48 │ │ 🚀 23 │ │ ⏳ 89 │ │ │ │Afectados │ │Donaciones│ │Voluntarios│ │Pendientes│ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ 🚨 ALERTAS CRÍTICAS │ │ ┌────────────────────────────────────────────────────────────┐ │ │ │ 🔴 STOCK CRÍTICO: Leche — Catia La Mar (12L) │ │ │ │ 🔴 5 familias sin agua — Maiquetía │ │ │ │ 🟡 2 adultos mayores sin medicinas — Caraballeda │ │ │ └────────────────────────────────────────────────────────────┘ │ │ │ │ 📍 MAPA DE NECESIDADES │ │ ┌────────────────────────────────────────────────────────────┐ │ │ │ [Mapa con 🔴45 alta · 🟡32 media · 🟢23 baja] │ │ │ └────────────────────────────────────────────────────────────┘ │ │ │ │ 📦 INVENTARIO EN TIEMPO REAL │ │ ┌────────────────────────────────────────────────────────────┐ │ │ │ 🥫 Alimentos ████████████░░ 85% 1,450kg │ │ │ │ 💧 Agua ████████░░░░░░ 60% 2,800L │ │ │ │ 💊 Medicinas ████████░░░░░░ 40% 340u │ │ │ │ 👕 Ropa ██████░░░░░░░░ 55% 890 prendas │ │ │ └────────────────────────────────────────────────────────────┘ │ │ │ │ 📊 ACTIVIDAD RECIENTE │ │ ┌────────────────────────────────────────────────────────────┐ │ │ │ 10:30 — 🚚 Juan entregó ayuda a Familia Rodríguez │ │ │ │ 10:15 — 👤 Nuevo afectado registrado en Caraballeda │ │ │ │ 10:00 — 📦 Donación 100kg arroz en Catia La Mar │ │ │ │ 09:45 — 🔴 Alerta stock crítico: Leche │ │ │ └────────────────────────────────────────────────────────────┘ │ │ │ │ [Dashboard] [Afectados] [Inventario] [Donaciones] [Voluntarios] │ │ [Mapa] [Reportes] │ └────────────────────────────────────────────────────────────────────┘

★ Resumen — Propuesta Ganadora

🎯 Decisiones de Estilo

🔴 Rojo #EF4444 como color primario
Comunica urgencia, acción, emergencia. Perfecto para el contexto humanitario.
🟢 Verde #10B981 para acciones exitosas
Refuerza visualmente lo completado, contrasta bien con el rojo.
Aa
📝 Inter como tipografía única
Excelente legibilidad, buena en pantallas pequeñas, peso visual equilibrado.
8px
📐 Border-radius: 8px en todo
Consistencia visual, UI amigable sin ser demasiado redondeado.

✅ Por qué funciona para emergencias

🎯 Contraste Alto: Rojo sobre blanco — máxima legibilidad incluso con luz solar directa en terreno.

📱 Touch-Friendly: Botones de 44px+ altura mínima, padding generoso, targets táctiles de 48x48px.

⚡ Claridad Visual: Una sola fuente (Inter) con pesos claros (400/500/600/700) — jerarquía sin ambigüedad.

♿ Accesibilidad: Ratio de contraste WCAG AA en todos los componentes. Estados hover/focus visibles.

📱 Responsive: Mobile-First — el 80% de los voluntarios usará la app desde su teléfono.

🔴 Emergencia = Rojo: El color comunica urgencia sin necesidad de leer. Los voluntarios identifican prioridades al instante.

📋 Quick Reference

🔤 Fuente: Inter
🔴 Primario: #EF4444
🟢 Éxito: #10B981
🟡 Alerta: #F59E0B
📐 Radius: 8px
📏 Base: 4px (spacing)
📱 Input: 44px min height
🖱️ Hover: 10% darker