🎨 Sistema de diseño y estándares de desarrollo de CatalogQR
Este documento establece las directrices obligatorias para el diseño y desarrollo del ecosistema CatalogQR. Garantiza una estética premium y una arquitectura escalable para cualquier tipo de negocio.
1. Identidad Visual (Universal Performance)
El sistema se basa en una estética de alta densidad y limpieza visual (no-line aesthetic), optimizada para la visualización de inventarios y datos complejos.
A. Paleta de Colores (Slate & Cobalt)
| Elemento | Color / Código | Uso |
|---|---|---|
| Fondo de Aplicación | #f8fafc | Slate 50 (Fondo limpio) |
| Superficies (Cards/Modales) | #ffffff | Blanco Puro |
| Bordes Principales | #e2e8f0 | Slate 200 (Separación sutil) |
| Acción Primaria / Acento | #2563eb | Blue 600 (Confianza y acción) |
B. Tipografía y Geometría
- Fuente:
Inter(Sans-serif). Optimizada para lectura rápida en catálogos. - Radio de Curvatura (Cards):
16px. Este es el estándar visual del proyecto. - Radio de Componentes:
10pxpara botones e inputs.
2. Estándares Técnicos
A. Reactividad B2B
CatalogQR utiliza Svelte 5 y TypeScript para manejar lógica multi-tenant compleja:
- Gestión de Catálogos: Uso de
$statepara carritos y filtrado dinámico. - Validación de Datos: Zod + TypeScript para asegurar integridad en pedidos.
B. Arquitectura SaaS (3 Niveles)
- Platform Staff: Gestión global del ecosistema y suscripciones.
- Business Admin: Panel de control del comerciante (Inventario, Órdenes, QR).
- Customer UI: La experiencia final del usuario al escanear el QR.
🔗 Documentación Relacionada
- index
- catalogqr-proyecto-saas
- documentacin-de-procesos-catalogqr
- modelo-entidad-relacin-mer-catalogqr