Documento oficial de marca
Brand Guidelines
Versión 1.0 · Earthing.es
Guía visual práctica para una marca que cuida, conecta y da confianza.
00 El logotipo
Logo con árbol
Logo completo
Con árbol, nombre y tagline. Versión principal para cabeceras, packaging y presentaciones.
Logo sin árbol — fondo blanco
Versión wordmark
Solo nombre y tagline. Para espacios horizontales estrechos: firmas de email, cabeceras de documentos.
Icono árbol
Icono / Símbolo
Solo el árbol. Para favicon, avatar de redes sociales, sello en packaging, espacios muy pequeños.
Logo centrado
Logo centrado / cuadrado
Árbol sobre el texto, formato más cuadrado. Para ocasiones puntuales donde el espacio exige una proporción menos alargada que el logo horizontal (ej. sellos, iconos de app, espacios cuadrados).
✔ Usos correctos
Sobre fondo blanco sin modificaciones. Sobre fondo oscuro (#333333) en blanco. Tamaño mínimo: 120px de ancho para el logo completo, 32px para el icono solo.
✗ Usos prohibidos
Nunca distorsiones ni estiramiento. Nunca sobre fondos de color que reduzcan el contraste. Nunca con efectos de sombra o bisel. Nunca cambiar los colores originales del logo.
✔ Espacio de protección
Mantener siempre un espacio libre alrededor del logo equivalente a la altura de la «E» de Earthing. Ningún elemento visual debe invadir ese área.
✗ Nunca recrear el logo
El logo es un archivo gráfico, no texto. Nunca lo reescribas con Lora u otra fuente. Usa siempre los archivos SVG o PNG originales proporcionados.
01 Concepto visual general

Earthing.es no es una tienda online más de bienestar: es una mano que te tiende contacto directo con la tierra. El concepto visual se construye sobre la idea de calma orgánica con presencia humana. Todo debe transmitir que hay una persona real detrás, que conoce el producto y que se preocupa por el bienestar de quien lo recibe.

Visualmente esto se traduce en fondos blancos que respiran, tipografía con cuerpo y carácter (serif para los momentos importantes, sans-serif limpio para el texto funcional), toques de verde tierra que evocan naturaleza sin caer en el cliché ecológico, y fotografía real, sin filtros artificiales. La regla de oro: si algo parece de un e-commerce genérico, no va.

NaturalSeguroHonestaCercaníaBienestarTrato humano
02 Paleta de colores
Color oscuro · Texto principal
Negro Suave
#333333
Títulos H1, textos clave, fondo de portadas. Más cálido que el negro puro.
Color claro · Fondo principal
Blanco Puro
#FFFFFF
El fondo único de toda la marca. Da limpieza, fiabilidad y espacio para respirar.
Gris neutro principal
Crema Suave
#FAF8F4
Solo para recuadros de notas, avisos o bloques a resaltar sobre el blanco. Nunca como fondo general.
Gris neutro secundario
Gris Carbón
#4F4F4F
Cuerpo de texto en párrafos. Seriedad sin dureza.
Acento principal · Marca
Verde Calma
#5F6B5E
H2, H3, precios, iconos, bordes. Naturaleza sin estridencia.
Acento secundario · Acción
Tierra Orgánico
#8D735B
Botones CTA exclusivamente. Texto blanco siempre. Uso puntual y limitado.
Acento terciario · Logo
Marrón Árbol
#605040
Solo el icono del árbol del logo. No usar en ningún otro contexto.
03 Cuándo usar cada color
Blanco (#FFFFFF) — El fondo único de la marca. Toda web, PDF y presentación se construye sobre blanco.
Crema Suave (#FAF8F4) — Exclusivo para recuadros de notas, avisos o bloques a resaltar. Nunca como fondo de página o sección.
Negro Suave (#333333) — Solo H1 y textos muy importantes. Nunca para párrafos corrientes.
Gris Carbón (#4F4F4F) — Todo el cuerpo de texto: párrafos, descripciones, correos, PDFs.
Verde Calma (#5F6B5E) — H2, H3, subtítulos, precios, iconos, bordes decorativos. El color de la marca por excelencia.
Tierra Orgánico (#8D735B) — Solo botones CTA y links activos. El texto dentro siempre en blanco. Uso puntual.
Marrón Árbol (#605040) — Uso exclusivo del icono del árbol en el logo. No usar en ningún otro elemento.
04 Tipografías recomendadas
Fuente principal · Titulares y momentos de impacto
Lora — Conexión con la tierra
Lora (Google Fonts, gratuita) · Bold (700) para H1, Semibold (600) para H2/H3, Italic para citas.
Serif con personalidad orgánica y cálida. Evoca confianza y artesanía.
Fuente secundaria · Texto corriente y UI
Montserrat — Dispositivos para conectar con la naturaleza y mejorar tu descanso de forma natural.
Montserrat (Google Fonts, gratuita) · Light (300) para párrafos, Regular (400) para UI, Semibold (600) para precios.
Sans-serif humanista que complementa Lora sin competir.
Fuente alternativa · Fallback cuando las anteriores no están disponibles
Georgia + Arial
Georgia (serif del sistema) + Arial (sans-serif del sistema).
Para correos de texto plano, documentos Word sin fuentes instaladas, o envíos donde Google Fonts no carga.
⚠ Nota sobre Desyrel
Desyrel solo para el logo como imagen. No usar en texto corriente de web o documentos — no es una web font y genera inconsistencias. Lora + Montserrat cubren el 100% de las necesidades fuera del logo.
05 Jerarquía de texto
Nivel
Vista previa
Especificación
H1 · Título
Reconecta con la tierra
Lora Bold
#333333
28–36px
H2 · Subtítulo
Mejora tu descanso de forma natural
Lora Italic
#5F6B5E
20–24px
H3 · Sección
¿Cómo funciona el earthing?
Lora Semibold
#333333
16–18px
Cuerpo
La conexión con la tierra tiene efectos documentados sobre la inflamación, el estrés y la calidad del sueño.
Montserrat Light
#4F4F4F
14–16px · 1.7
CTA · Botón
Ver dispositivos
Montserrat SB
#FFF / #8D735B
12–14px CAPS
06 Estilo de imágenes
✔ Qué buscar

Fotografía real de personas usando los productos en casa. Tonos cálidos naturales (luz de tarde, madera, jardín). Manos sobre césped, pies descalzos, personas durmiendo bien. Skin tones reales, sin sobreexposición.

✗ Qué evitar

Imágenes de banco de aspecto genérico. Colores saturados o filtros Instagram. Modelos con aspecto irreal. Imágenes de IA con aspecto artificial (dedos raros, texturas plásticas).

✔ IA generativa (uso limitado)

Solo si pasa el "test de realismo". Herramientas como Midjourney con prompts realistas pueden funcionar para ilustraciones de naturaleza (hojas, tierra, luz). Nunca para personas.

✔ Composición

Regla de los tercios. Espacio en blanco generoso. El producto siempre en contexto de uso real. Para Instagram: fondo blanco con el producto y un toque de naturaleza.

07 Reglas de aplicación por canal
Instagram / Redes sociales: Fondo blanco para posts de producto. Fondo foto real para contenido de valor. Logo siempre en esquina inferior derecha. Máximo 2 fuentes por post.
Web: H1 Lora Bold negro. Navegación Montserrat Regular verde. CTA siempre Tierra Orgánico con texto blanco. Margen lateral mínimo 5%. Un solo CTA principal por sección.
Presentaciones y PDFs: Portada con fondo negro, logo en blanco. Contenido en Montserrat. Headers de sección en Verde Calma. Máximo 3 colores por diapositiva.
Correos electrónicos: Sin fondos de color. Texto en Montserrat o Arial (fallback). CTA como botón Tierra Orgánico. Firma con logo, nombre completo y web. Asunto en lenguaje cercano, nunca en mayúsculas.
Facturas y documentos: Logo en encabezado. Datos en Montserrat Regular Gris Carbón. Totales en Negro Suave o Verde Calma. Sin fondos de color llamativos.
Packaging: Fondo blanco. Logo prominente. Texto de producto en Lora. Instrucciones en Montserrat Light pequeño.
08 Errores visuales que debes evitar
Demasiadas fuentes

Usar Desyrel, Lora, Montserrat y otra en el mismo documento. Regla: máximo 2 fuentes por pieza (Lora + Montserrat).

Botones sin consistencia

CTA de diferentes colores en distintos canales. Siempre: fondo Tierra Orgánico, texto blanco, esquinas redondeadas 3px.

Verde sobre verde

Texto Verde Calma sobre fondo verde. Verifica siempre el contraste (mínimo WCAG AA: 4.5:1 para texto normal).

Logo distorsionado

Nunca estires el logo para adaptarlo a un espacio. Si no cabe, usa la versión sin texto o solo el icono árbol.

Mayúsculas excesivas

Solo para labels pequeños y botones CTA. Nunca en párrafos ni títulos completos. Resulta agresivo e impersonal.

Imágenes de stock genérico

Personas sonriendo perfectamente frente a un ordenador destruyen la autenticidad que diferencia a Earthing.es.

Texto alineado a la derecha

Usa alineación izquierda para texto largo. Solo centrado para títulos cortos y CTA. Nunca a la derecha en bloques de párrafo.

Falta de espacio en blanco

Intentar meter todo en el mínimo espacio posible. El espacio vacío no es "espacio perdido": da elegancia y claridad.

09 Checklist · Antes de publicar cualquier pieza

Comprueba estos puntos antes de publicar o enviar

¿El logo está en el lugar correcto, sin distorsión y con su espacio de protección?
¿Estoy usando solo Lora + Montserrat (o Georgia + Arial como fallback)?
¿El fondo es siempre blanco (#FFF), reservando el crema (#FAF8F4) solo para recuadros de notas o avisos?
¿Los H1 están en Negro Suave (#333333) y los H2/H3 en Verde Calma (#5F6B5E)?
¿Los botones CTA son Tierra Orgánico (#8D735B) con texto blanco?
¿El cuerpo de texto está en Gris Carbón (#4F4F4F) con interlineado mínimo 1.7?
¿Las imágenes son reales y contextualizadas (no genéricas de stock)?
¿Hay suficiente espacio en blanco? ¿La pieza "respira"?
¿El tono del texto es cercano, honesto y humano? (sin jerga corporativa)
¿Esta pieza podría confundirse con otra marca? Si la respuesta es sí, revisa.