Marca & logo

Identidad

Dos modos de marca conviven en el ecosistema: el logo gráfico (uso principal) y la marca tipográfica (fallback / favicon). El punto rojo —el "punto de salud"— ancla la identidad.

Logo gráfico #

Logotipo a 28px de alto + subtítulo de sub-marca separado por border-left. Se adapta a fondo claro y oscuro.

.brand--logo · sobre fondo claro

Salud Mental

Ver código

<a class="brand brand--logo">
  <img class="brand__img" src="logo-on-light.png" alt="Workmed">
  <span class="brand__sub">Salud Mental</span>
</a>

<!-- sobre fondo oscuro: usar logo-on-dark.png -->

Elemento	Spec
Alto del logo	`28px` (header), `26px` en barra densa
Subtítulo	`10.5px`, weight 500, `0.15em` tracking, UPPER
Separador	`border-left: 1px var(--line)` + `padding-left: 12px`
Sobre oscuro	sub en blanco 55%, borde blanco 15%

Marca tipográfica #

Fallback cuando no se puede usar el logotipo (favicon, espacios mínimos, apps). Cuadrado azul oscuro con la W y el punto rojo.

.brand · marca tipográfica

Workmed

Salud Mental

Workmed

Producción

Ver código

<div class="brand">
  <div class="brand__mark">W</div>
  <div>
    <div class="brand__word">Workmed</div>
    <span class="brand__sub">Salud Mental</span>
  </div>
</div>

El punto de salud #

El punto rojo en la esquina inferior derecha del .brand__mark (12×12, border: 2px solid --bg) es el elemento que ancla la identidad. Es el único rojo permitido en la marca.

El detalle

Usos & descargas #

Logo · fondo claro

Para headers, documentos y superficies blancas.

logo-on-light.png ↓

Logo · fondo oscuro

Para footers, paneles oscuros y sidebars de app.

logo-on-dark.png ↓

Qué no hacer #

Reglas

✗ No recolorear el logotipo ni el punto rojo.
✗ No usar el logo claro sobre fondos oscuros (usar la versión on-dark).
✗ No agregar sombras, contornos ni efectos al logo.
✗ No multiplicar el rojo: máximo un elemento rojo prominente por pantalla.
✓ Sí mantener el subtítulo de sub-marca para distinguir plataformas.

Fuente completa: design_system.md §8.