Sistema de Diseño

Guía de Diseño Green Hill

Documentación completa del sistema visual, colores, tipografía y componentes para mantener consistencia en todo el website

Paleta de Colores

Colores Principales

Verde Principal

#264653

Títulos principales, texto principal

Verde Secundario

#176930

Botones, enlaces, acentos

Verde Hover

#145427

Estados hover de botones

Verde Claro

#F8FDF9

Fondos suaves, hover de enlaces

Colores Neutros

Blanco

#FFFFFF

Fondos principales, texto en botones

Gris Claro

#E5E7EB

Bordes, separadores

Gris Oscuro

#4B5563

Texto secundario

Colores Especiales

WhatsApp

#25D366

Botón WhatsApp principal

WhatsApp Hover

#128C7E

Hover estado WhatsApp

Gradiente Principal

from-[#176930] to-[#145427]

Banners destacados, CTAs especiales

Tipografía

Títulos

Título H1

text-4xl lg:text-6xl font-bold text-[#264653]

Título H2

text-3xl font-bold text-[#264653]

Título H3

text-xl font-bold text-[#264653]

Texto de Cuerpo

Párrafo Principal - Subtítulos importantes

text-xl text-[#264653]/80

Párrafo Regular - Texto principal del contenido

text-[#264653] leading-relaxed

Texto Pequeño - Descripciones complementarias

text-sm text-[#264653]/80

Componentes

Botones

bg-[#176930] text-white px-6 py-2.5 rounded-full hover:bg-[#145427] hover:shadow-lg transition-all duration-300 font-medium transform hover:scale-105
bg-[#25D366] text-white px-6 py-2.5 rounded-full hover:bg-[#128C7E] hover:shadow-lg transition-all duration-300 font-medium transform hover:scale-105
border-2 border-[#176930] text-[#176930] px-6 py-2.5 rounded-full hover:bg-[#176930] hover:text-white transition-all duration-300 font-medium

Tarjetas

Tarjeta Estándar

Descripción del contenido de la tarjeta con información relevante.

Tarjeta Destacada

Tarjeta con fondo gradiente para contenido especial o promocional.

Estándar: bg-white rounded-2xl shadow-lg p-6 border border-gray-100 hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1
Destacada: bg-gradient-to-br from-[#176930] to-[#145427] rounded-2xl p-6 text-white shadow-lg

Badges y Etiquetas

Badge Principal Badge Oscuro Badge Outline
bg-[#176930]/10 text-[#176930] px-4 py-2 rounded-full text-sm font-medium

Estructura y Layout

Espaciado

Secciones

  • • Padding vertical: py-16 lg:py-20
  • • Máximo ancho: max-w-7xl mx-auto
  • • Padding horizontal: px-4 sm:px-6 lg:px-8

Componentes

  • • Espacio entre elementos: space-y-4 a space-y-8
  • • Gaps en grid: gap-4 a gap-12
  • • Margin bottom títulos: mb-6 a mb-8

Sistemas de Grid

Grid 2 Columnas

grid md:grid-cols-2 gap-6 lg:gap-8

Grid 3 Columnas

grid md:grid-cols-2 lg:grid-cols-3 gap-6

Grid 4 Columnas

grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6

Fondos y Efectos

Gradiente Principal

bg-gradient-to-br from-[#F8FDF9] to-white

Header Fijo

bg-white/95 backdrop-blur-md fixed top-0 left-0 right-0 z-50

Sombras

shadow-lg, shadow-xl, hover:shadow-2xl

Directrices de Uso

Consistencia Visual

  • Usar siempre los colores definidos en la paleta
  • Mantener espaciado consistente entre secciones
  • Aplicar transiciones suaves en todos los elementos interactivos
  • Usar iconos de Font Awesome consistentemente

Responsive Design

  • Mobile-first: diseñar primero para móvil
  • Breakpoint sm: 640px (tablet)
  • Breakpoint lg: 1024px (desktop)
  • Breakpoint xl: 1280px (desktop grande)