Guía de estilo · tokens vivos desde @theme
Guía de estilo
Todo lo que ves aquí se renderiza con las mismas utilidades Tailwind del sitio. Si un token cambia ensrc/styles/global.css, esta página se actualiza sola. La referencia escrita está en docs/DESIGN.md.
Colores / 01
Paleta 2 tokens
--color-ink
#000000
bg-ink · text-ink · border-ink
Fondo de la página y del slider
--color-paper
#ffffff
bg-paper · text-paper · border-paper
Texto y fondo de botones (CTA)
Texto atenuado: text-white/70 (copyright) · etiquetas text-white/50.
Tipografía / 02
Fuente Verdana (local)
--font-sans · Verdana
AaBbCc 0123 · importación, exportación y distribución.
Pesos disponibles: 400 (normal) · 700 (bold) · cursivas. Formato woff2, self-hosted en public/fonts/verdana/.
| Elemento | Clase | Tamaño | Peso | Muestra |
|---|---|---|---|---|
| Descripción / cuerpo | text-base | 16px | 400 | Grupo integrado por diferentes líneas de negocio, mirando el futuro de la mano de nuestros clientes. |
| Botón (CTA) | text-sm font-semibold | 14px | 600 → 700 | Visitar Web |
| Email del footer | text-lg | 18px | 400 | hola@grupoworldtarget.com |
| Copyright | text-sm text-white/70 | 14px | 400 | Copyright © 2025 Grupo World Target. |
Componentes / 03
Piezas reutilizables
Slide (sección)
Cada slide ocupa la altura del viewport; el slider las mueve con translateY(-fila · 100svh).
Layout two-column
grid md:grid-cols-2 · en móvil (menos de 768px) apila en columna.
Espaciado y layout / 04
Reglas del sistema
| Token / regla | Valor | Uso |
|---|---|---|
| Radio de botones | rounded-full | CTA "Visitar Web" y LinkedIn |
| Transición del slider | 1500ms ease-in-out | Cambio de slide; respeta motion-reduce |
| Padding del botón | px-6 py-3 (24/12px) | CTA |
| Grid gap | gap-10 (40px) | Columnas del layout two-column |
Breakpoint
md
768px
md:
default
mobile-first
base
Animaciones / 05
Movimiento del sistema
float-scale
scale(.9) rotateZ(3deg) ↔ normal · 5s ease-in-out
float-up
translateY(-10%) scale(.9) rotateZ(3deg) ↔ normal
float-rotate
rotateZ(-5deg) ↔ normal · 5s ease-in-out
breathe
scale(.97) translateY(-1%) ↔ normal · 10s
Reveal de collages: las piezas pasan de opacity-0 a opacity-100 al activarse el slide (group-data-[active]), con transition-opacity + delay-*. Slide-ins (WTI/WTS) y reveal del logo grid usan translate-* / scale-*. Todo respeta motion-reduce.