Design System
Summers Tours guía de estilo
Referencia viva del sistema de diseño del tema: colores, tipografía, escala, espaciado y componentes base. Todos los valores provienen de theme.json.
01
Colores
Paleta de la marca con su propósito. Disponibles como var(--wp--preset--color--slug) en CSS.
Navy
#0D2B4E
Texto principal, header/footer, fondo del hero.
Navy medio
#123A63
Paso intermedio del degradado del hero.
Teal primario
#13A4B8
Botones, acentos, iconos, títulos con color.
Teal oscuro
#0E8697
Hover de botones y color de enlaces.
Teal claro
#38C6D8
Iconos y cursiva del hero. Slug sky.
Teal profundo
#0A6D7A
Antetítulos sobre fondo claro (contraste AA 5.6:1). Slug sky-deep.
Teal apagado
#7FB6C4
Antetítulos sobre navy (hero). Slug sky-muted.
Amarillo oferta
#F4C020
Banners de oferta y el guion del antetítulo.
#25D366
CTAs y badges de WhatsApp (conversión).
Fondo página
#F5F7F9
Fondo base del sitio.
Superficie
#FFFFFF
Fondo de tarjetas y contenedores.
Borde
#E3E8EE
Bordes y separadores sutiles.
Texto suave
#5B6B7B
Párrafos secundarios y descripciones. Cumple AA.
Texto tenue
#647587
Metadatos y notas. Oscurecido para cumplir AA (~4.5:1).
Bruma
#C7D6E3
Texto sobre navy (hero, footer). Slug mist.
Tinte teal
#E8F6F9
Fondo de los círculos de icono. Slug tint.
Tinte frío
#EEF3F8
Hovers suaves. Slug tint-cool.
Banda de sección
#E7EEF6
Fondo de bandas (equipo). Slug band.
Estados
Pares fondo + tinta para mensajes y pills de estado. Disponibles como var(--wp--custom--status--success-bg) y su -ink. Cada tinta cumple AA sobre su fondo.
Éxito
#E6F6EC · #1A7F45
Confirmaciones y pills afirmativos («Respuesta en minutos»).
Aviso
#FCECDF · #C26A16
Condiciones y matices («Sin intereses»).
Error
#FDEAEA · #B3261E
Validación de formularios: borde del campo inválido y su mensaje.
Fuera del sistema (documentados aparte): los colores de logos de pago (Visa/Mastercard/Amex) son de terceros.
02
Degradados
120deg · #0d2b4e → #123a63 → #155a7a90deg · #f4c020 → #f7cf3f90deg · #13a4b8 → #0e869703
Tipografía
Poppins
Todo el cuerpo, títulos y UI. Self-hosted (woff2). Pesos 400–800.
AaBbCcDdEe 0123456789
comienza aquí
Pacifico (cursiva). Solo para acentos del hero y CTAs. Peso 400.
04
Escala tipográfica
Tamaños fluidos (se adaptan al ancho). Line-height: cuerpo 1.6, títulos 1.1.
- Herohero
- Título H2h2
- Subtítulo H3h3
- Cuerpo de textobody / M
- Texto pequeño / botonessm / S
- Etiqueta · legalxs / XS
Pesos disponibles:
05
Espaciado
Escala base para paddings, gaps y márgenes. var(--wp--preset--spacing--N)
- 4 · 0.25rem · 4px
- 8 · 0.5rem · 8px
- 12 · 0.75rem · 12px
- 16 · 1rem · 16px
- 24 · 1.5rem · 24px (blockGap por defecto)
- 32 · 2rem · 32px
- 48 · 3rem · 48px
- 64 · 4rem · 64px
Ritmo vertical de sección — fluido, escala con el viewport (min → max). var(--wp--custom--space--flow-*)
- flow-xs · clamp(1rem, 3vw, 2.25rem) · 16→36px (conectores)
- flow-sm · clamp(2.5rem, 6vw, 4.5rem) · 40→72px (sección compacta)
- flow · clamp(3rem, 7vw, 5.5rem) · 48→88px (sección estándar)
- flow-lg · clamp(3.5rem, 8vw, 6rem) · 56→96px (sección grande)
- flow-xl · clamp(4rem, 8vw, 6.5rem) · 64→104px (hero informativo)
06
Radios y sombras
Radios de esquina
Sombras
reposo · 8%
sutil · 6%
tarjeta hover · 12%
alto · 18%
07
Botones
Radio 12px · peso 600 · padding 0.85rem 1.5rem · tamaño S (13px).
08
Iconografía
Font Awesome Free (solid) inline como SVG (sin webfont ni CDN). Se recolorean con color: (currentColor). Cuatro iconos custom conservan acento de marca.
Font Awesome (monocromáticos, teal)
Custom con acento (se conservan)
09
Elementos de marca
Antetítulo con guion
Lo que nos mueve
Teal en mayúsculas + guion amarillo (#f4c020). Encabeza todas las secciones.
Cursiva de acento + sol
comienza aquí ☀
Pacifico en teal, acompañada del sol, para el remate emocional de hero y CTAs.
Summers Tours · Design System · valores desde theme.json