Identidad Visual

Cómo se ve
claritia.

Terapia Clínica Online

Sistema visual confirmado por focus group y construido en Adobe Illustrator. Esta página es la referencia rápida de uso diario — colores, tipografía, logo, gradiente e iconografía. Para el sistema completo ver el storyboard.

JRZ Consulting Solutions  ×  claritia
Storyboard visual completo disponible — exploración detallada de todos los componentes, variantes de logo, dirección de imágenes y aplicaciones web.
Ver storyboard completo →
01 El Gradiente Signature

El elemento más reconocible de claritia

El gradiente diagonal lavanda→sage es la firma visual de claritia. Aparece en cada superficie de alto impacto — hero sections, portadas, cards destacadas. Fue el elemento más reconocido y preferido en el estudio de focus group.

claritia
Terapia Clínica Online
Gradiente — focus group tested
linear-gradient(130deg, #C4C0DC 0%, #B8B4D4 40%, #9AABA0 100%)
Siempre 130° diagonal. Nunca horizontal ni vertical.
  • Siempre en ángulo 130 grados — nunca horizontal, nunca vertical
  • Los círculos flotantes (12–15% opacidad) siempre acompañan al gradiente
  • Funciona en hero sections, cards destacadas y portadas
  • La variante oscura usa #3D3860 → #5A566E para cards de citas
02 Paleta de Color

Los únicos colores que claritia usa

Lavanda y sage son los pilares. El carbón reemplaza al negro. Nunca verde hospitalario, nunca azul corporativo frío, nunca negro puro #000.

Lavanda
#B8B4D4
Primario — UI, bordes, acentos, círculos
Lavanda Claro
#D4D1E8
Gradiente start, fondos suaves
Lavanda Xlight
#ECEAF6
Cards, callouts, tags, badges
Lavanda Deep
#534AB7
CTAs, labels activos, énfasis
Sage
#8FA89A
Secundario — gradiente end, dividers
Sage Dark
#6B8C7D
Taglines, texto sobre sage claro
Púrpura Oscuro
#3D3860
Dark cards, headers, nav activo
Carbón
#2C2C2C
Texto principal — nunca negro puro
Off-White
#F8F8FA
Fondo principal — espacio para respirar
03 Tipografía

Apax Medium + Poppins

Dos fuentes. Roles estrictamente separados. Nunca intercambiar. Apax Medium (web: DM Serif Display) solo para títulos y logo. Poppins 300–500 para todo lo demás.

Display / Logo
Apax Medium
Web: DM Serif Display
Peso: 400
Uso: Hero, logo, títulos
claritia
El bienestar mental
no es un lujo.
Citas / Callouts
DM Serif Display
Italic 400
Uso: Frases destacadas
"Convertir no es vender una sesión.
Es iniciar un proceso."
Cuerpo de texto
Poppins 300
Tamaño: 14px
Line-height: 1.80
La gente no busca terapia. Busca dejar de sentirse así. Todo el copy parte de este lenguaje emocional — nunca del lenguaje clínico ni del lenguaje de servicio.
Labels / UI
Poppins 600
Todo caps, tracking
Uso: Etiquetas, tags
Terapia Clínica Online  —  Documento Base
06 — Identidad Visual
Tamaños mínimos
Digital: 14px
Impreso: 11pt
Nunca más pequeño
14px — mínimo digital ✓
12px — solo para notas y metadata
10px — solo labels en mayúsculas con tracking
04 Logo

El wordmark y sus variantes

El logo es siempre "claritia" en minúsculas, con el cluster de tres círculos a la izquierda. Cuatro variantes de uso según el fondo.

Sobre fondo blanco / off-white
claritia
Terapia Clínica Online
Uso estándar — documentos, website, materiales impresos en blanco.
Sobre fondo oscuro / púrpura
claritia
Terapia Clínica Online
Cards oscuras, hero sections con fondo púrpura.
Sobre gradiente
claritia
Hero sections. Texto y círculos siempre blancos.
Compacto — versión horizontal
claritia
Terapia
Clínica
Online
Headers compactos, topbar, favicon context.

"claritia" — siempre en minúsculas. Nunca CLARITIA, nunca Claritia.

05 Sistema de Iconografía

Los tres círculos — firma visual de claritia

El sistema de íconos es un cluster de tres círculos con íconos interiores. Siempre van juntos en grupos de 2–3, en diferentes tamaños, con 10–20% de opacidad. Nunca solos. Nunca sólidos.

Los tres íconos
Keyhole
Privacidad
Focus
Atención / Claridad
Señal
Conexión digital
Escala
52px
36px
24px
16px
Clusters en contexto
Sobre gradiente
Sobre blanco
Sobre oscuro
Regla: siempre 2–3 círculos juntos, en tamaños distintos, opacidad 10–20%. Nunca un solo círculo suelto. Nunca relleno sólido.
06 Dirección de Imágenes

Qué tipo de imágenes usa claritia

Las imágenes del PDF de estrategia confirman la dirección visual: cotidiano, real, suave. Lo opuesto a lo clínico. Lo opuesto a lo aspiracional.

CategoríaDescripciónEjemplos del PDF
Personas reales Cotidianas, en reposo o movimiento natural. Sin posado ni actuación. Diversidad real de América Latina. Mujer con hoodie lavanda, sonriendo naturalmente
Naturaleza / calma Cielos, nubes, elementos orgánicos suaves. Transmiten apertura y tranquilidad. Sin connotación clínica. Cielo azul con nubes blancas a través de espejo ovalado
Ilustración / whimsy Elementos ilustrados en colores de la paleta. Suaves, accesibles, confirman que la marca no es solemne. Ovejas ilustradas en blanco sobre cielo azul
Abstracto Formas orgánicas, sombras suaves, texturas que evocan calma. Siempre en paleta lavanda/sage. Gradientes, círculos superpuestos, luz difusa

Nunca usar

  • Stock genérico de "personas felices posando" con sonrisa forzada
  • Imágenes que asocien salud mental con hospitales, clínicas, o instrumental médico
  • Personas en actitud de crisis dramatizada (cabeza entre manos, lágrimas)
  • Fondos blancos asépticos con iluminación de estudio clínico
  • Imágenes de cerebros, anatomía, o iconografía médica
07 Do / Don't

Reglas absolutas de identidad visual

Estas reglas no tienen excepciones. Cualquier pieza visual — web, social, impreso — debe cumplirlas antes de publicarse.

✓ claritia siempre
Gradiente 130° lavanda → sage en superficies de alto impacto
Círculos flotantes en clusters de 2–3, opacidad 10–20%
DM Serif Display / Apax Medium solo para títulos y logo
Espacio en blanco generoso — el diseño respira
Texto principal en carbón #2C2C2C, nunca negro puro
"claritia" en minúsculas siempre
Personas reales, cotidianas, diversas
Bordes y divisores en lavanda, nunca en negro o gris oscuro
✗ claritia nunca
Verde hospitalario, azul corporativo frío, blanco aséptico
Negro puro #000 en ningún texto ni elemento
Arial, Roboto, Inter o system fonts como fuente display
Diseño denso sin espacio en blanco
CLARITIA en mayúsculas ni Claritia con inicial
Stock genérico ni imágenes de clínica / hospital
Un solo círculo decorativo suelto — siempre cluster
Serif en cuerpo de texto — solo display y citas

"El diseño de claritia respira. No llenamos cada centímetro."