Vida Farmacias
Design System
Lenguaje visual, componentes y recursos para crear experiencias digitales consistentes, accesibles y escalables.
Colores
FundamentosLa paleta transmite confianza, salud y profesionalismo. Los tonos verdes son la identidad central; los acentos guían acciones específicas.
Primarios
Acentos y CTA
Paleta Extendida
Colores complementarios para campañas, ilustraciones y elementos decorativos.
Neutrales y Texto
Design Tokens — CSS Variables
Variables CSS disponibles globalmente para garantizar consistencia en todos los componentes.
| Token | Valor | Uso |
|---|---|---|
| --color-primary-dark | #2f4858 | Cabeceras, texto principal |
| --color-primary-green | #7fbc41 | Acciones primarias, links activos |
| --color-primary-button | #61ce70 | Botones secundarios, suscripción |
| --color-accent-orange | #e88727 | CTA de producto, compra |
| --color-accent-red | #e82e2e | Alertas, badges, notificaciones |
| --color-accent-teal | #006666 | Subtítulos de sección, énfasis |
Tipografía
FundamentosPoppins para jerarquía y fuerza en títulos; Lexend para legibilidad óptima en texto corrido.
Display · Headings
Poppins
Body · UI Text
Lexend
Iconografía
FundamentosEl sistema usa tres librerías de íconos según el contexto de uso.
Line Awesome — UI General
Íconos de línea para la interfaz principal. Uso prioritario.
Material Icons — Mi Cuenta y Funcional
Íconos de Google Material para páginas de usuario y contextos funcionales.
Logos y Recursos
BrandActivos gráficos oficiales. No modificar proporciones, colores ni tipografía del isologo.
Botones
ComponentesJerarquía de acciones clara. El naranja reservado para CTAs de compra; el verde para acciones generales.
CTA de Producto — Compra
Acción prioritaria en páginas de producto. Color naranja para máxima visibilidad.
<button class="bg-accent-orange hover:bg-opacity-80 text-white
font-bold py-2 px-6 rounded-md transition-all shadow-md">
Comprar ahora
</button>Primario General
Acciones importantes fuera del flujo de compra: explorar, navegar, confirmar.
Secundario y Outline
Para acciones complementarias o de menor jerarquía.
Formularios
ComponentesInputs limpios con feedback visual claro. El foco siempre usa el verde primario.
Barra de Búsqueda
Componente central del header. Presente en todas las páginas.
Selector de Cantidad
Campos de Formulario — Checkout
Tarjetas
ComponentesContenedores modulares para productos, vínculos de navegación y contenido agrupado.
Tarjeta de Producto
Usada en páginas de categoría, búsqueda y recomendaciones.
Tiaminal B12 Trivalente AP 5000 mcg / 200 mg
MXN $283.00
MXN $566.00
Vitamina C 1000mg con Zinc y Equinácea
MXN $149.00
Tarjeta de Enlace con Ícono
Usada en "Mi Cuenta" para acceder a secciones del dashboard de usuario.
Layouts y Patrones
PatronesEstructuras de página completas que combinan múltiples componentes en vistas funcionales.
Layout — Página de Producto
Grid 50/50 en desktop. Galería izquierda, detalles y CTAs a la derecha.
SKU: TBT-5000
Tiaminal B12 Trivalente AP 5000 mcg
MXN $283.00
MXN $566.00
Layout — Mi Cuenta
Grid de tarjetas de ícono para acceso rápido a secciones del usuario.