Saltar al contenido
Gataca Sites

GATACA / PÁGINA

Orbital Pricing

Precios con profundidad y formas orbitales

Orbital Pricing plantea una dirección visual completamente distinta a Ritmo Pricing y Obsidian Pricing. El fondo oscuro se construye con grandes círculos desenfocados, halos de color y transparencias controladas que generan sensación de profundidad sin sacrificar legibilidad.

Los tres planes combinan paneles translúcidos con grandes medallones circulares para los precios y una jerarquía visual muy marcada. El plan central gana protagonismo mediante escala, luz y color, mientras los laterales mantienen un carácter más sobrio. La composición se adapta a servicios digitales, membresías, estudios creativos o productos premium.

La implementación utiliza HTML semántico, CSS compacto y no necesita JavaScript para funcionar. En móvil los planes se apilan y los fondos circulares se simplifican. También respeta prefers-reduced-motion y evita animaciones continuas de alto coste.

GATACA / PÁGINA

Obsidian Pricing

Precios oscuros con estructura horizontal

Obsidian Pricing cambia por completo el lenguaje visual de una tabla de precios tradicional. En lugar de tarjetas verticales, organiza cada plan como una franja horizontal de gran formato sobre un fondo negro carbón, con una rejilla técnica muy sutil y acentos violeta y naranja.

El plan recomendado rompe la secuencia con un bloque violeta de alto contraste, mientras los demás niveles permanecen integrados en el fondo mediante líneas finas. La información se distribuye por columnas: nombre, descripción, precio, beneficios y CTA, facilitando una lectura rápida sin recurrir a cajas repetitivas.

El selector mensual/anual actualiza los importes con JavaScript mínimo y accesible. La sección es completamente responsive, conserva el estado mensual si JavaScript falla y respeta prefers-reduced-motion.

GATACA / PÁGINA

Ritmo Pricing

Precios con jerarquía editorial

Ritmo Pricing evita la apariencia de una tabla SaaS genérica mediante una composición editorial de alto contraste, líneas finas, tipografía contundente y una paleta marfil, negro y verde ácido. La sección presenta tres niveles con una jerarquía clara y destaca el plan intermedio sin recurrir a sombras o efectos excesivos.

El selector mensual/anual modifica los precios de forma inmediata y accesible, manteniendo la interfaz ligera y comprensible. Cada plan incluye beneficios concretos, CTA propio y una estructura fácil de adaptar a servicios, software, membresías o productos digitales.

La implementación usa HTML semántico, CSS responsive y JavaScript mínimo, sin dependencias externas aparte de las tipografías. En móvil los planes se apilan sin perder jerarquía, y prefers-reduced-motion desactiva las transiciones no esenciales.