Sistema visual basado en los assets del estudio estrategia.pdf — focus-group tested. Referencia de identidad para diseño de website y producción de materiales.
Fuente
claritia_estrategia.pdf Adobe Illustrator 30.3
Assets confirmados por focus group
01 — El Gradiente Signature
El elemento visual más reconocible de claritia
El gradiente diagonal lavanda→sage es el fondo de cada superficie de alto impacto — portadas, hero sections, cards destacadas. Confirmado como el elemento visual principal del estudio.
Terapia Clínica Online
El bienestar mental no es un lujo.
Conectamos personas que necesitan apoyo con psicólogos verificados — a través de una experiencia 100% digital, fluida y accesible.
Empieza cuando quieras →
claritia × JRZ
Hero principal — gradient 130° con círculos flotantes
Card destacada
Cuidador Moderno + Everyman
Card oscura — mismo gradiente
Variante oscura
"Convertir no es vender una sesión."
Variante dark purple — para citas
02 — Logo e Iconografía
El sistema de marca — wordmark + ícono circular
El logo usa Apax Medium (DM Serif Display en web) siempre en minúsculas. El sistema de tres círculos — keyhole, focus bracket, señal — son la firma visual decorativa que aparece en clusters junto al logo y en fondos.
Versión clara — sobre fondo blanco / off-white
claritia
Terapia Clínica Online
Versión compacta — horizontal
claritia
Terapia Clínica Online
Versión oscura — sobre fondos gradient / purple
claritia
Terapia Clínica Online
Logo — tres variantes confirmadas del PDF
Sistema de iconos circulares — firma visual
Cluster decorativo
Keyhole — privacidad
Focus — atención, claridad
Señal — conexión digital
Escala de tamaños
56px
40px
28px
20px
Los círculos siempre van en clusters de 2–3. Nunca solos. Opacidad entre 10–20%. Nunca sólidos.
Sistema de ícono circular — extraído del PDF
03 — Paleta de Color
Los únicos colores que claritia usa
Lavanda y sage son los pilares. El gradiente los une. El carbón reemplaza al negro. Nunca verde hospitalario, nunca azul corporativo frío, nunca negro puro.
Lavanda
#B8B4D4
Primario — UI, bordes, acentos, círculos
Lav. Claro
#D4D1E8
Gradient start, fondos suaves
Lav. Xlight
#ECEAF6
Cards, callouts, tags
Lav. Deep
#534AB7
CTAs, labels, énfasis
Sage
#8FA89A
Secundario — gradient end
Sage Dark
#6B8C7D
Taglines, dividers
Púrpura
#3D3860
Dark cards, headers
Carbón
#2C2C2C
Texto — nunca negro puro
Off-White
#F8F8FA
Fondo principal
El gradiente — linear-gradient(130deg, #C4C0DC → #B8B4D4 → #9AABA0)
Paleta completa — extraída directamente de la estrategia.pdf
04 — Tipografía
Apax Medium + Poppins — la pareja de fuentes
Apax Medium para display y logo. Poppins 300–500 para todo el cuerpo. La jerarquía es deliberada — nunca intercambiar roles.
DM Serif Display400Hero / Display
claritia
No estás solo/a en esto.
DM Serif Display Italic400 italicCitas / callouts
"Convertir no es vender una sesión. Es iniciar un proceso."
Poppins300Body copy
La gente no busca terapia. Busca dejar de sentirse así. Todo el copy parte de este lenguaje emocional — nunca de lenguaje clínico.
Poppins600Labels / UI
Terapia Clínica Online × Documento Base
Escala tipográfica — uso correcto de cada nivel
Nunca usar
✗ Demasiado clínico
Arial / Roboto / Inter como fuente display. Sans-serif sin pareja serif. Texto en negro puro (#000).
✗ Jerarquía incorrecta
Serif en cuerpo de texto — solo es para títulos y citas.
POPPINS BOLD EN HERO
✓ Siempre
Mínimo 14px digital. Mínimo 11pt impreso. Texto principal siempre en carbón #2C2C2C.
Reglas de aplicación tipográfica
05 — Componentes de UI
Cards, callouts y mensajería — el sistema de componentes
Cada componente refleja los mismos principios: espacio generoso, borde lavanda sutil, acento gradiente en la parte superior, tipografía clara.
Card estándar — light
02 — Audiencia
Perfil de Cliente Ideal
Segmentos de entrada, contextos emocionales y búsquedas reales de la audiencia.
04 — Proceso
Journey del Cliente
Las cuatro fases del proceso de conversión — de awareness a retención.
Card oscura — cita / callout
Principio rector
"La gente no busca terapia. Busca dejar de sentirse así."
Todo el copy parte de este insight — nunca del lenguaje clínico.
Cards — variante clara y oscura
D
Dani · claritia
En línea · LETI platform
Me siento muy mal últimamente.
10:42 am
D
Gracias por escribir. Lo que sientes importa. ¿Quieres contarme un poco más?
10:42 am
No sé si esto es para mí, nunca fui a terapia.
10:43 am
D
No tienes que tener todo claro para empezar. Muchas personas que hoy están en proceso sintieron exactamente eso.
10:43 am
Componente de chat — Dani / LETI platform
Escala de tono — posicionamiento de claritia
Lenguaje
Casual
Profesional
Estética
Exclusivo
Accesible
Complejidad
Simple
Técnico
Rol
Experto
Acompañante
Actitud
Irreal
Realismo
Posicionamiento de tono — visual del PDF estrategia
✓ claritia sí usa
Gradiente 130° lavanda → sage
Círculos flotantes en clusters de 2–3
DM Serif Display en títulos únicamente
Espacio en blanco generoso
Personas reales, cotidianas
Texto en carbón #2C2C2C
"claritia" siempre en minúsculas
✗ claritia nunca usa
Verde hospitalario o azul corporativo
Negro puro #000 en texto
Stock de personas felices posando
Arial / Roboto / Inter como display
CLARITIA en mayúsculas
Diseño denso sin espacio en blanco
Fondos blancos + texto negro sin acento
Do / Don't — reglas absolutas de identidad visual
06 — Dirección de Imágenes
Qué tipo de imágenes usa claritia
Las imágenes del PDF cuentan la historia visual: personas reales en momentos cotidianos, nubes, ovejas ilustradas — suave, no clínico, no aspiracional. Lo que le pasa al que nos necesita, no lo que quiere ser.
Naturaleza / calma
Cielos, nubes, elementos naturales suaves. Transmiten apertura y tranquilidad sin connotación clínica.
nubes
cielo
apertura
Imágenes de naturaleza — del PDF
Personas reales
Cotidianas, en reposo, en movimiento natural. Como la mujer con hoodie lavanda del PDF — no posada, real.
casual
real
cotidiano
Personas — cotidianas, no aspiracionales
Ilustración / whimsy
Elementos ilustrados suaves. Ovejas, formas orgánicas — accesible y cálido. Confirma que la marca no es solemne.
ilustración
suave
accesible
Ilustración — ovejas y formas orgánicas del PDF
"La terapia no debería ser un lujo."
claritia — Estrategia Fase 1
Cita sobre gradiente — tratamiento del PDF
"Convertir no es vender una sesión. Es iniciar un proceso."
Principio rector — claritia
Cita sobre dark purple — tratamiento del PDF
07 — Dirección del Website
Cómo el sistema visual se aplica al website
El website será el hub central de conversión. Cuando la CEO encuentre una referencia de estructura que le guste, se extrae el código base y se aplica este sistema visual encima. Estos son los principios de aplicación.