Sistema de Diseño
Documentación oficial de los elementos visuales, tipografía, colores y componentes compositivos que forman la identidad digital de Transwarrants.
1. Logotipo y Aplicaciones
Sobre fondo claro (Light Mode)
Sobre fondo oscuro (Dark Mode)
2. Paleta de Colores
Primary (Amarillo)
Acentos, botones, highlights
var(--primary)
Background (Navy/White)
Fondo principal del sitio
var(--background)
Card / Surface
Fondo de tarjetas y modales
var(--card)
Secondary / Muted
Fondos secundarios y separadores
var(--secondary)
3. Tipografía
Poppins
Inter
Large (18px): Este es el texto utilizado para introducciones y bajadas importantes. Ofrece excelente legibilidad para párrafos largos.
Base (16px): El tamaño estándar para el cuerpo de texto, descripciones de tarjetas y contenido general del sitio web.
Small (14px): Utilizado para microcopy, notas al pie, etiquetas secundarias y metadatos.
4. Elementos Compositivos
Eyebrows y Resaltados (Highlights)
Destacamos palabras clave en color amarillo para guiar la lectura.
El eyebrow (píldora superior) establece el contexto, mientras que el highlight en el título dirige la atención al beneficio principal.
Tarjetas y Contenedores
Tarjeta Estándar
Utilizada para beneficios, características y pasos. Incluye un hover state que ilumina el borde y hace crecer el icono.
Tarjeta Glassmorphism
Utilizada sobre fondos complejos o imágenes para mantener la legibilidad aportando un toque premium mediante backdrop-blur.