Design System Web - AndersenCastanedaUniAndes/proyecto-1 GitHub Wiki

📘 Design System – MediSupply

🎨 Paleta de Colores

  • Primario (Acciones principales):
    • Azul: 4682b4 (botones principales).
  • Secundario (Acciones alternativas):
    • Verde: #00c951 (confirmaciones, stock disponible).
    • Naranja: #f54a00 (advertencias, stock en reservas).
    • Rojo: #e7000b (errores, stock agotado).
  • Neutros (fondo y texto):
    • Blanco: #ffffff (fondo principal).
    • Gris claro: #f3f4f6 (tablas, secciones).
    • Gris medio: #6a7282 (texto secundario).
    • Negro: #000000 (texto principal).

🖋 Tipografía

  • Fuente base: Apple Color Emoji, Segoe UI Emoji.
  • Jerarquía de títulos:
    • h1: 2rem – títulos principales.
    • h2: 1.5rem – títulos de sección.
    • h3: 1.25rem – subtítulos y encabezados de tabla.
    • p: 1rem – texto de párrafo y formularios.
  • Peso:
    • bold (700) para títulos y botones.
    • regular (400) para párrafos.

📦 Componentes de UI

1. Botones

  • Primario: azul con texto blanco → acciones principales.
  • Secundario: gris o verde → acciones de soporte.
  • Destructivo: rojo → eliminar registros.
  • Estilo: rounded, px-4 py-2, hover:opacity-90.

2. Inputs y Formularios

  • Bordes redondeados (border rounded).
  • Espaciado uniforme (p-2).
  • Placeholder gris medio.
  • Estados:
    • Normal: borde gris claro.
    • En foco: borde azul.
    • Error: borde rojo + mensaje pequeño debajo.

3. Tablas

  • Fondo gris claro en cabecera.
  • Bordes visibles (border-collapse).
  • Filas alternadas en gris muy suave (hover:bg-gray-50).
  • Columna de acciones con botones pequeños (Inactivar, Eliminar).

4. Alertas / Mensajes

  • Verde → éxito (Pedido creado exitosamente ✅).
  • Rojo → error (Error al crear pedido ❌).
  • Amarillo → advertencia.

5. Modal

  • Fondo semi-transparente negro.
  • Caja blanca centrada con esquinas redondeadas.
  • Botón de cierre en la esquina superior derecha.

🧩 Patrones de Diseño

  • Layout:
    • Header fijo arriba.
    • Sidebar o menú (según necesidades).
  • Accesibilidad:
    • Texto alternativo en imágenes.
    • Contraste alto en botones importantes.

📱 Responsividad

  • Mobile first.
  • grid-cols-1 en pantallas pequeñas → todo en una columna.
  • md:grid-cols-2 o lg:grid-cols-3 en escritorio.
  • Botones y formularios ocupan 100% en móvil.

📊 Iconografía

  • Usar Icons (https://lucide.dev/icons/).

📑 Buenas Prácticas

  1. Mantener consistencia en colores y tamaños.
  2. Reutilizar componentes (Clientes, CrearProducto, CrearPedido).
  3. Documentar nuevos componentes en este Design System.
  4. Usar Tailwind o MUI para mantener uniformidad.