Paleta de marca
Cada muestra lee su valor directo de los tokens. Toca el botón para copiar el hex. El verde de marca es el ancla; el texto siempre va en musgo, nunca en negro puro.
Proporción por pantalla
Un solo color de acción
Terracota rosada, texto blanco en mayúsculas, Source Sans 3 700 con espaciado de 0,06 em y borde blanco de 1 px. Va directo sobre cualquier fondo y no se usa en nada más.
Texto blanco sobre #A6493A: 5,78:1 (AA). En hover, #8F3F32: 7,18:1. Sobre verde marca, el botón contra el fondo da 2,24:1 y lo separa el borde blanco; queda para validar con Cris.
Acentos por protocolo
Núcleo fijo de marca más un acento por tratamiento. El acento vive en la etiqueta del hero, el fondo de empatía y método, los tintes de la ilustración didáctica y detalles menores. Nunca en CTA, logo, párrafos, oferta ni credenciales.
Tipografía
Títulos en minúscula de oración y en musgo profundo. La palabra destacada va en DM Serif Display Italic.
Ya probaste de todo. Ahora, el diagnóstico
Tu piel, vista con dermatoscopio
Un plan claro antes del primer tratamiento
Antes de recomendarte un protocolo, la doctora revisa tu piel con dermatoscopio para entender qué está pasando debajo de la superficie. Con eso define qué tratamiento tiene sentido para ti y cuál no.
Evaluación presencial en la clínica
Por primera vez alguien me explicó qué tenía mi piel antes de venderme algo.
Contraste de los pares de uso
Calculado en vivo desde los tokens (WCAG 2.1). AA pide 4,5:1 para texto normal y 3:1 para texto grande o elementos de interfaz.
| Muestra | Texto | Fondo | Uso | Ratio | Resultado |
|---|
Vista previa
Cómo se combinan los tokens en las secciones principales. Es una referencia de tema, no la landing: la estructura final sale de la Biblioteca de Componentes en D10.
Manchas que vuelven aunque las cubras: entiende primero por qué
Evaluación con dermatoscopio y un plan claro antes de cualquier tratamiento.
Quiero mi diagnósticoSi ya probaste de todo, no es tu culpa
- “Gasté en cremas que me recomendaron y no vi cambios.”
- “Me hicieron un tratamiento sin revisarme la piel.”
- “Mejoró un tiempo y después volvió igual.”
Tecnología al servicio del diagnóstico
Equipo uno
Qué hace, en una línea, y qué gana la paciente.
Equipo dos
Qué hace, en una línea, y qué gana la paciente.
Equipo tres
Qué hace, en una línea, y qué gana la paciente.
Estrellas en miel
Cifras en musgo (dato real pendiente)
Cifras en musgo (dato real pendiente)
Agenda tu evaluación con dermatoscopio
Fondo verde marca con texto musgo. El botón va directo en terracota.
Evitar
Lo que el moodboard dejó fuera del tema.
- Que el rosa domine una sección grande
- Marrón como color principal
- Frialdad clínica u hospitalaria
- Vanidad superficial
- Tecnicismo sin traducir a beneficio
- CTA transparente
- Salmón #FFB5A2 como color de marca
- GIFs de urgencia
- Texto blanco sobre verde marca
- Negro puro
Los valores de la Firma TSF (escala, espaciado y medida) son provisorios hasta incorporar el tokens.css del Design System Base v3. Colores, fuentes y radios son definitivos.