Manuel
71 lines
3.0 KiB
Markdown
71 lines
3.0 KiB
Markdown
---
|
||
name: MNQ Catering y Evento
|
||
colors:
|
||
primary: "#D4AF37"
|
||
secondary: "#A67C1B"
|
||
surface: "#FFFDF8"
|
||
on-surface: "#1F1A17"
|
||
error: "#B3261E"
|
||
typography:
|
||
body-md:
|
||
fontFamily: "Inter"
|
||
fontSize: "16px"
|
||
fontWeight: 400
|
||
rounded:
|
||
sm: 6px
|
||
md: 12px
|
||
lg: 20px
|
||
---
|
||
|
||
# Design System
|
||
|
||
## Overview
|
||
|
||
MNQ debe sentirse como una marca de eventos premium contemporánea: clara, refinada, editorial y aspiracional. La experiencia visual tiene que transmitir elegancia sin pesadez, con una base marfil/blanca, acentos dorados y un ritmo visual aireado.
|
||
|
||
## Colors
|
||
|
||
- **Primary** (`#D4AF37`): dorado premium para detalles de marca, botones principales, subrayados y acentos de jerarquía.
|
||
- **Secondary** (`#A67C1B`): dorado más profundo para hover states, bordes destacados y variaciones sofisticadas del acento principal.
|
||
- **Surface** (`#FFFDF8`): fondo general claro, cálido y editorial; debe sostener una sensación premium, no clínica.
|
||
- **On-surface** (`#1F1A17`): texto principal, títulos y elementos de contraste sobre superficies claras.
|
||
- **Error** (`#B3261E`): validaciones y feedback crítico en formularios.
|
||
|
||
## Typography
|
||
|
||
- **Headlines**: combinación editorial elegante; títulos con alta presencia visual y espaciado generoso.
|
||
- **Body**: `Inter`, peso 400–500, con tamaño base de `16px` y line-height cómodo para lectura prolongada.
|
||
- **Labels**: `Inter`, peso 500–600, tamaño entre `12px` y `14px`, con uso moderado de letter spacing para sensación premium.
|
||
|
||
## Components
|
||
|
||
- **Buttons**: jerarquía clara, relleno oscuro o acento dorado controlado; radio medio, padding generoso y estados hover sobrios.
|
||
- **Inputs**: fondos claros, bordes suaves, foco visible y limpio; nunca pesados ni visualmente toscos.
|
||
- **Cards**: superficies claras con borde fino o sombra suave; composición editorial con mucho aire interior.
|
||
|
||
## Layout & Responsive
|
||
|
||
- Enfoque **mobile-first** desde el primer breakpoint.
|
||
- Usar variables CSS para spacing, tipografía y color semántico.
|
||
- Layouts con `grid` y `flex` según contexto, evitando widths rígidos.
|
||
- Escalar tipografía y espacios de forma fluida o progresiva, no abrupta.
|
||
- Priorizar touch targets cómodos y CTA visibles en mobile.
|
||
|
||
## Conversión
|
||
|
||
- WhatsApp es el CTA primario en todo el sitio.
|
||
- Cada servicio debe tener CTA contextual propio.
|
||
- La página de contacto debe priorizar acción inmediata sobre lectura extensa.
|
||
- Las galerías deben ser específicas por servicio para reforzar relevancia comercial.
|
||
|
||
## Do's and Don'ts
|
||
|
||
- Do usar fondo claro cálido y mucha respiración visual.
|
||
- Do usar el dorado como acento de lujo, no como color dominante de masas.
|
||
- Do mantener narrativa visual editorial y limpia.
|
||
- Do diseñar primero para mobile y escalar hacia desktop.
|
||
- Don't recargar la interfaz con ornamentos innecesarios.
|
||
- Don't usar colores chillones o combinaciones que rompan el posicionamiento premium.
|
||
- Don't diseñar CTAs genéricos cuando el contexto del servicio permite mayor intención.
|
||
- Don't separar una galería general si las imágenes venden mejor dentro de cada servicio.
|