---
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.