Files
MNQ-Catering-y-Evento/docs/stitch_mnq_premium_landing_page/design.md
T

3.0 KiB
Raw Blame History

name, colors, typography, rounded
name colors typography rounded
MNQ Catering y Evento
primary secondary surface on-surface error
#D4AF37 #A67C1B #FFFDF8 #1F1A17 #B3261E
body-md
fontFamily fontSize fontWeight
Inter 16px 400
sm md lg
6px 12px 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.