Mi Sitio Genesis
Creando experiencias web excepcionales con WordPress
Bienvenido a Nuestro Sitio
Creando experiencias digitales únicas con diseño profesional y funcionalidad excepcional
Guía de Diseño Genesis
Paleta de Colores
Fondo Negro
#0D0D0D
Header, Hero, Footer
Blanco Marfil
#FFFEF5
Contenido Principal
Verde Lima
#99a948
Color Principal
Amarillo Dorado
#f2c94e
Color Acento
Texto Oscuro
#1A1A1A
Texto Principal
Variaciones de Color sobre Fondos
Sobre Fondo Negro (#0D0D0D)
Texto Blanco Marfil – Alta Legibilidad
Texto Verde Claro – Para Enlaces
Texto Amarillo – Para Acentos
Sobre Fondo Blanco Marfil (#FFFEF5)
Texto Oscuro – Contenido Principal
Texto Verde – Enlaces y Títulos
Texto Amarillo Oscuro – Call to Action
Sobre Fondo Verde (#99a948)
Texto Blanco – Máxima Legibilidad
Texto Amarillo Claro – Destacados
Sobre Fondo Amarillo (#f2c94e)
Texto Negro – Alta Visibilidad
Texto Verde Oscuro – Contraste Fuerte
Guía Tipográfica
Bebas Neue
Display / Títulos
Usado en: H1, H2, H3, Título del sitio, Títulos hero
Raleway
Sans-serif / Contenido
Usado en: H4, H5, H6, Párrafos, Navegación, Botones
Jerarquía de Encabezados
Título Principal del Sitio
Para títulos de página principales y contenido más importante
Subtítulos de Sección Importantes
Para títulos de secciones principales y artículos destacados
Encabezados de Sección y Widgets
Para títulos de artículos, widgets del sidebar y subsecciones
Subtítulos Dentro de Contenido
Para subsecciones dentro de artículos y contenido estructurado
Títulos de Párrafos Destacados
Para destacar secciones menores y puntos clave
ETIQUETAS Y CATEGORÍAS
Para metadatos, etiquetas y texto auxiliar
Este es el texto del cuerpo principal. Optimizado para legibilidad con un tamaño de 17px y altura de línea de 1.8. Perfecto para párrafos largos y contenido extenso que requiere una lectura cómoda y prolongada.
Estilos de Botones
Guía de Espaciado
Biblioteca de Componentes de Contenido
Ejemplos listos para usar con especificaciones técnicas completas
COMPONENTE TARJETA
Este es un contenedor de texto con borde verde prominente. Perfecto para destacar contenido importante, testimonios o información clave que necesita llamar la atención del usuario.
Especificaciones Técnicas
- Fondo: #FFFFFF
- Borde: 3px solid #99a948
- Border Radius: 8px
- Padding: 35px
- Box Shadow: 0 4px 12px rgba(153, 169, 72, 0.15)
- Título: Bebas Neue • 32px • #99a948 • Letter-spacing: 1.5px
- Texto: Raleway • 17px • #1A1A1A • Line-height: 1.7
DESTACADO PRINCIPAL
Contenedor con gradiente verde para contenido premium. El contraste alto asegura máxima legibilidad y atención inmediata.
Especificaciones Técnicas
- Fondo: linear-gradient(135deg, #99a948 0%, #7a8739 100%)
- Border Radius: 12px
- Padding: 40px
- Box Shadow: 0 6px 20px rgba(0, 0, 0, 0.2)
- Título: Bebas Neue • 36px • #FFFEF5 • Letter-spacing: 2px
- Texto: Raleway • 18px • #FFFEF5 • Line-height: 1.8
- Botón: #f2c94e • Color: #0D0D0D • Padding: 12px 28px • Border-radius: 5px
Especificaciones Técnicas
- Fondo: #FFFEF5
- Borde: 1px solid #E0E0E0
- Border Radius: 10px
- Layout: Grid • 200px 1fr
- Área Imagen: linear-gradient(180deg, #f2c94e 0%, #d9b23d 100%)
- Padding Contenido: 30px
- Box Shadow: 0 3px 10px rgba(0, 0, 0, 0.08)
- Título: Raleway • 24px • 600 • #1A1A1A
- Texto: Raleway • 16px • #5A5A5A • Line-height: 1.7
ARTÍCULO DESTACADO
Card con borde superior amarillo y etiqueta. Ideal para artículos de blog, noticias o contenido categorizado que necesita identificación visual rápida.
Leer más →Especificaciones Técnicas
- Fondo: #FFFFFF
- Border Top: 5px solid #f2c94e
- Border Radius: 6px
- Padding: 35px 30px
- Box Shadow: 0 2px 8px rgba(0, 0, 0, 0.1)
- Etiqueta: #f2c94e • Color: #0D0D0D • Padding: 4px 12px • Border-radius: 4px • 12px • Uppercase
- Título: Bebas Neue • 28px • #1A1A1A • Letter-spacing: 1.2px
- Texto: Raleway • 16px • #5A5A5A • Line-height: 1.7
- Link: Raleway • 15px • 600 • #d9b23d
CONSEJO IMPORTANTE
Callout box con alto contraste para tips, advertencias o información crítica. El borde verde añade un elemento distintivo que refuerza la marca.
Especificaciones Técnicas
- Fondo: #f2c94e
- Border Left: 8px solid #7a8739
- Border Radius: 8px
- Padding: 30px 35px
- Box Shadow: 0 4px 15px rgba(242, 201, 78, 0.25)
- Layout: Flex • Gap: 20px
- Ícono: 48px
- Título: Bebas Neue • 26px • #0D0D0D • Letter-spacing: 1.5px
- Texto: Raleway • 17px • #1A1A1A • Line-height: 1.7
La mejor plantilla que he usado para WordPress. El diseño es limpio, profesional y muy fácil de personalizar según mis necesidades.
Especificaciones Técnicas
- Fondo: #F5F5F5
- Border Left: 6px solid #99a948
- Border Radius: 0 8px 8px 0
- Padding: 30px 40px 30px 35px
- Comillas: Georgia • 72px • #99a948 • Opacity: 0.15
- Quote: Raleway • 19px • #1A1A1A • Italic • Line-height: 1.7
- Autor: Raleway • 15px • 600 • #99a948
Especificaciones Técnicas
- Fondo: #FFFFFF
- Borde: 2px solid #E0E0E0
- Border Radius: 12px
- Box Shadow: 0 4px 12px rgba(0, 0, 0, 0.08)
- Imagen: Height: 180px • Gradient: #99a948 → #b4c35e
- Padding Contenido: 35px
- Título: Bebas Neue • 30px • #1A1A1A • Letter-spacing: 1.5px
- Texto: Raleway • 16px • #5A5A5A • Line-height: 1.7
- Tags: Padding: 6px 14px • Border-radius: 20px • 13px • 600
Especificaciones Técnicas
- Fondo: #0D0D0D
- Borde: 2px solid #99a948
- Border Radius: 10px
- Padding: 35px
- Text Align: Center
- Box Shadow: 0 6px 20px rgba(153, 169, 72, 0.2)
- Número: Bebas Neue • 56px • #f2c94e • Letter-spacing: 2px
- Label: Raleway • 16px • 600 • #FFFEF5 • Uppercase • Letter-spacing: 1px
Diseño Moderno
Interfaces atractivas y funcionales que destacan tu marca y conectan con tu audiencia.
Alto Rendimiento
Optimizado para velocidad y SEO, garantizando la mejor experiencia de usuario.
Totalmente Responsive
Tu sitio se ve perfecto en cualquier dispositivo, desde móviles hasta pantallas grandes.