🎨 Sistema de diseño y estándares de desarrollo de MenuQR
Este documento establece las directrices obligatorias para el diseño y desarrollo del ecosistema MenuQR.
1. Sistema de Diseño (Corporate SaaS)
Estilo Linear/Stripe: denso, limpio, basado en bordes, profesional.
A. Variables CSS (src/app.css)
| Variable | Valor | Uso |
|---|---|---|
--bg-app | #fafafa | Fondo de la aplicación |
--bg-surface | #ffffff | Superficies/cards |
--border-default | #e2e8f0 | Bordes principales |
--text-primary | #111827 | Texto principal |
--text-secondary | #6b7280 | Texto secundario |
--text-tertiary | #9ca3af | Texto terciario/placeholders |
--brand-600 | #2563eb | Acento/brand |
--danger | #ef4444 | Errores/peligro |
--radius-sm | 6px | Badges, chips |
--radius-md | 8px | Cards, inputs, botones |
--radius-lg | 10px | Modales, contenedores |
B. Tipografía (Inter)
| Elemento | Tamaño | Weight | Letter-spacing |
|---|---|---|---|
| Base (html) | 15px | - | - |
| H1 | 1.5rem | 600 | -0.02em |
| H2 | 1.25rem | 600 | -0.015em |
| H3 | 1.1rem | 600 | -0.01em |
| Body | 0.95rem | 500 | - |
| Labels | 0.7rem | 600 | 0.05em (uppercase) |
Regla: Máximo font-weight 600. NUNCA usar 700/800/900.
C. Geometría
- Bordes:
1px soliden lugar de sombras pesadas - Radios máximos:
10px(—radius-lg). NUNCA > 12px - Sombras: mínimas o inexistentes. Preferir bordes
- Padding: compacto (0.75rem - 1.25rem)
- Iconografía:
@lucide/svelteexclusivamente
D. Clases Globales (app.css)
| Clase | Propósito |
|---|---|
.btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-icon | Botones |
.badge, .badge-gray, .badge-green, .badge-red, .badge-blue, .badge-yellow | Badges semánticos |
.card | Contenedor card con borde |
.page-container, .page-header | Layout de página |
.table-container | Contenedor de tabla |
.empty-state, .loading-state | Estados |
.modal-overlay, .modal | Modales |
2. Estándares Técnicos
A. Reactividad
MenuQR utiliza Svelte 5 y TypeScript:
- Runes:
$statey$derived(no stores de Svelte 4) - Stores de negocio:
src/lib/store/(business, cart, notifications) - Transiciones:
fade,slide,flyde Svelte - Notificaciones sonoras: Web Audio API (
AudioContext), no<audio>tag
B. Arquitectura SaaS (3 Niveles)
- Staff / Super Admin (
/staff): Gestión global, merchants, planes, soporte - Merchant Admin (
/dashboard): Catálogo, pedidos (Kanban), configuración - Customer UI (
/c/[slug]): Menú público, carrito, checkout
C. Package Manager y Comandos
- Package manager:
pnpm@11.1.2(obligatorio) - Node:
>=20 - Verificación:
pnpm checkantes de cualquier commit
3. Reglas para Agentes de IA
- NUNCA usar font-weight 700, 800 o 900. Usar 500 o 600.
- NUNCA usar border-radius mayor a 12px. Preferir —radius-sm/md/lg.
- NUNCA usar sombras grandes. Preferir bordes
1px solid. - SIEMPRE usar las clases globales de
app.cssantes de crear estilos inline. - SIEMPRE mantener la lógica de
<script>intacta al rediseñar templates. - SIEMPRE ejecutar
pnpm checkdespués de cambios.