Solaray · Vuelve a tu ritmo

Guía de estilo

Colores, tipografías y medidas de la landing del Pack Energía y Foco. Sirve para crear los estilos en Figma y para mantener el mismo lenguaje en las landings de Vuelta al gym y Calma y dormir.

Color

Azul marino#11153A
Texto y fondos oscuros

Azul marino 2#3B3F5C
Texto secundario

Gris texto#707486
Etiquetas y notas

Fondo#F4F5F7
Fondo general

Fondo 2#E6EAF0
Cajas y miniaturas

Blanco#FFFFFF
Tarjetas

Amarillo etiqueta#F4C44E
Precios y acentos

Amarillo suave#FBE3A0
Barra superior

Amarillo pálido#FFF7E0
Opción elegida

Azul Omega#1F56A0
Cursivas y gráficos

Verde ahorro#2E7A55
Solo textos de ahorro

Verde rayo#76CC51
Icono de la etiqueta RINDE

Escala para gráficos (barras, tabla y duración): #11153A · #1F56A0 · #6F93C8 · #C3D2E8. Líneas: negro al 12 % y al 24 %. Tarjetas de «Qué lleva»: solo grises (#1A1A1A, #4D4D4D, #737373, #F2F2F2).

Tipografía

Energía y foco

Archivo · ancho 116 % · peso 830 · 50–104 px · interlineado 0,9 · mayúsculas

Beneficios

Títulos de sección · Archivo · ancho 116 % · peso 800 · 34–72 px

Vuelve a tu ritmo

Instrument Serif · cursiva · 26–34 px

Opti-5 Magnesium Complex

Títulos de tarjeta · Archivo · ancho 110 % · peso 780 · 20–21 px

Texto corrido de la página. Magnesio en 5 formas, vitamina C liposomal y omega 3 con EPA y DHA.

Archivo · peso 400 · 15–17 px · interlineado 1,55

Qué hace · Duración · Aporta

Etiquetas · Archivo · peso 600 · 10,5–12 px · espaciado entre letras 0,16–0,22 em · mayúsculas

Medidas

Elemento	Valor
Ancho máximo de contenido	1280 px (gráfico del sol y rutina: 1100 px)
Margen lateral	16 px en móvil · 56 px en ordenador
Alto de la cabecera fija	66 px
Aire entre secciones	72–136 px arriba y abajo
Redondeos	Tarjetas 14–24 px · Fotos grandes 22–28 px · Botones y etiquetas, redondeo completo
Botones	Alto 48 px (15 px arriba y abajo, 24 px a los lados) · texto 12,5 px con 0,14 em de espaciado
Etiqueta RINDE	Alto 58 px · círculo 50 px · texto 28 px (móvil: 48 / 40 / 23 px)
Sombras	Tarjetas: 0 12 px 28 px −14 px de azul marino al 28 % · Botón: 0 12 px 26 px −16 px al 70 %
Paneles de beneficios	Cerrado 1 parte · abierto 4,6 partes · alto 480–600 px · velo oscuro arriba (40 %) y abajo (74 %)

Componentes

Consigue el pack 78,26 € Añadir pack al carrito Solo este · 36,51 € Rinde

Imágenes

Archivo	Uso
hero-pack-energia-y-foco.jpg	Foto de portada (1231 × 1278)
panel-energia · foco · metabolismo · defensas · musculo · corazon .webp	Fotos de los seis paneles de «Qué hace» (1254 × 1254)
cielo.webp	Cielo del gráfico del sol
bote-vitamina-c · bote-opti-5 .webp	Botes sin fondo
kv-activate · kv-descansa .webp	Fotos de los otros dos packs

El bote del Omega 3 450/300 se carga desde la web de Solaray-KAL. Tipografías: Archivo e Instrument Serif, las dos gratuitas de Google Fonts.