HEKATE · KIT DE MARCA

Generado por npm run marks desde @archeblack/ui (src/lib/marks). No se edita a mano.
Los mismos archivos están en el paquete: @archeblack/ui/marks/hekate/<archivo>.

LA MARCA

Sigilo: La cuadratura del círculo.
El triángulo, el círculo y el cuadrado: la cuadratura del círculo. Su círculo es el origen del canon: mide R₀, y de él salen todos los demás radios de la familia.
Construcción: Triángulo equilátero de 20,4 de lado; círculo en el baricentro de radio R₀ = 8,481 (el 72 % del circunscrito); cuadrado de 9,17 sobre la base.

Logotipo: solo latino, en Archivo 800 al 75 % de ancho, en mayúsculas y con tracking de
0,1 em. La palabra va en trazos: no hace falta tener la fuente instalada.

Hekate conserva su forma, que es el origen del canon: las puntas del triángulo salen del
círculo de la familia. En los logotipos la separación y el respeto se miden desde las
puntas; en el isotipo, los avatares y los íconos el sigilo se centra por su tinta, y en el
favicon va al 95 % para que las puntas guarden un trazo de estructura hasta el borde.

ARCHIVOS

- LEEME.txt: Este archivo.
- apple-touch-icon.png: Ícono de iOS, 180 px, cuadrado sobre el vacío (iOS aplica su máscara).
- favicon.ico: Favicon para navegadores y Windows: PNG de 16, 32 y 48 px dentro de un ICO.
- favicon.svg: Favicon vectorial: el sigilo en color a sangre sobre el vacío, con radio de 2 px a 16 px. El sigilo va al 95 % para que las puntas guarden un trazo de aire hasta el borde.
- hekate-avatar-color.png: Avatar cuadrado de 1080 px: sigilo en el vacío sobre su color (el acento).
- hekate-avatar-color.svg: Avatar cuadrado de 1080 px: sigilo en el vacío sobre su color (el acento).
- hekate-avatar-light.png: Avatar cuadrado de 1080 px: sigilo en el vacío sobre blanco.
- hekate-avatar-light.svg: Avatar cuadrado de 1080 px: sigilo en el vacío sobre blanco.
- hekate-avatar-void.png: Avatar cuadrado de 1080 px: sigilo en el color de marca sobre el vacío. Va en color, como el favicon y los íconos de app.
- hekate-avatar-void.svg: Avatar cuadrado de 1080 px: sigilo en el color de marca sobre el vacío. Va en color, como el favicon y los íconos de app.
- hekate-logo-header-void.svg: Cabecera monocroma vacío, para fondos claros y su color.
- hekate-logo-header-void@2x.png: La cabecera monocroma vacío en PNG al doble, para fondos claros y su color.
- hekate-logo-header.svg: Cabecera: el sigilo y HEKATE en blanco, como en la interfaz (sigilo de 20 px, palabra de 17 px), para fondos oscuros. Sobre fondos claros o su color va la -void. Para otros tamaños, escalar este vector.
- hekate-logo-header@2x.png: La cabecera blanca en PNG al doble, para fondos oscuros.
- hekate-logo-horizontal-on-color.png: El logotipo horizontal sobre su color en PNG de 2400 px de ancho, con el área de respeto.
- hekate-logo-horizontal-on-color.svg: Logotipo horizontal monocromo vacío sobre su color (el acento), con el área de respeto; para portadas, documentos y piezas propias.
- hekate-logo-horizontal-on-light.png: El logotipo horizontal sobre el blanco en PNG de 2400 px de ancho, con el área de respeto.
- hekate-logo-horizontal-on-light.svg: Logotipo horizontal monocromo vacío sobre el blanco, con el área de respeto; para portadas, documentos y piezas propias.
- hekate-logo-horizontal-on-void.svg: Logotipo horizontal blanco, ya sobre el vacío, SVG, para colocar sin preparar el fondo. Incluye el área de respeto.
- hekate-logo-horizontal-on-void@2x.png: Logotipo horizontal blanco, ya sobre el vacío, PNG al doble de su tamaño natural, para colocar sin preparar el fondo. Incluye el área de respeto.
- hekate-logo-horizontal-void.svg: Logotipo horizontal monocromo vacío (#07080d), SVG, fondo transparente, para fondos claros y su color. Incluye el área de respeto.
- hekate-logo-horizontal-void@2x.png: Logotipo horizontal monocromo vacío (#07080d), PNG al doble de su tamaño natural, fondo transparente, para fondos claros y su color. Incluye el área de respeto.
- hekate-logo-horizontal-white.svg: Logotipo horizontal monocromo blanco, SVG, fondo transparente, para fondos oscuros: la versión de siempre sobre el vacío, el negro y una foto con velo. Incluye el área de respeto.
- hekate-logo-horizontal-white@2x.png: Logotipo horizontal monocromo blanco, PNG al doble de su tamaño natural, fondo transparente, para fondos oscuros: la versión de siempre sobre el vacío, el negro y una foto con velo. Incluye el área de respeto.
- hekate-logo-horizontal.svg: Logotipo horizontal de color (sigilo en el color de marca, palabra blanca), SVG, fondo transparente, para fondos oscuros en casos excepcionales (la de siempre es la blanca). Incluye el área de respeto.
- hekate-logo-horizontal@2x.png: Logotipo horizontal de color (sigilo en el color de marca, palabra blanca), PNG al doble de su tamaño natural, fondo transparente, para fondos oscuros en casos excepcionales (la de siempre es la blanca). Incluye el área de respeto.
- hekate-logo-vertical-on-color.png: El logotipo vertical sobre su color en PNG de 1200 px de ancho, con el área de respeto.
- hekate-logo-vertical-on-color.svg: Logotipo vertical monocromo vacío sobre su color (el acento), con el área de respeto; para portadas, documentos y piezas propias.
- hekate-logo-vertical-on-light.png: El logotipo vertical sobre el blanco en PNG de 1200 px de ancho, con el área de respeto.
- hekate-logo-vertical-on-light.svg: Logotipo vertical monocromo vacío sobre el blanco, con el área de respeto; para portadas, documentos y piezas propias.
- hekate-logo-vertical-on-void.svg: Logotipo vertical blanco, ya sobre el vacío, SVG, para colocar sin preparar el fondo. Incluye el área de respeto.
- hekate-logo-vertical-on-void@2x.png: Logotipo vertical blanco, ya sobre el vacío, PNG al doble de su tamaño natural, para colocar sin preparar el fondo. Incluye el área de respeto.
- hekate-logo-vertical-void.svg: Logotipo vertical monocromo vacío (#07080d), SVG, fondo transparente, para fondos claros y su color. Incluye el área de respeto.
- hekate-logo-vertical-void@2x.png: Logotipo vertical monocromo vacío (#07080d), PNG al doble de su tamaño natural, fondo transparente, para fondos claros y su color. Incluye el área de respeto.
- hekate-logo-vertical-white.svg: Logotipo vertical monocromo blanco, SVG, fondo transparente, para fondos oscuros: la versión de siempre sobre el vacío, el negro y una foto con velo. Incluye el área de respeto.
- hekate-logo-vertical-white@2x.png: Logotipo vertical monocromo blanco, PNG al doble de su tamaño natural, fondo transparente, para fondos oscuros: la versión de siempre sobre el vacío, el negro y una foto con velo. Incluye el área de respeto.
- hekate-logo-vertical.svg: Logotipo vertical de color (sigilo en el color de marca, palabra blanca), SVG, fondo transparente, para fondos oscuros en casos excepcionales (la de siempre es la blanca). Incluye el área de respeto.
- hekate-logo-vertical@2x.png: Logotipo vertical de color (sigilo en el color de marca, palabra blanca), PNG al doble de su tamaño natural, fondo transparente, para fondos oscuros en casos excepcionales (la de siempre es la blanca). Incluye el área de respeto.
- hekate-logomark-1024.png: Isotipo de color (sigilo en el color de marca), PNG transparente de 1024 px, para fondos oscuros en casos excepcionales (la de siempre es la blanca). Baldosa de 1,764·D centrada en la tinta.
- hekate-logomark-512.png: Isotipo de color (sigilo en el color de marca), PNG transparente de 512 px, para fondos oscuros en casos excepcionales (la de siempre es la blanca). Baldosa de 1,764·D centrada en la tinta.
- hekate-logomark-void-1024.png: Isotipo monocromo vacío (#07080d), PNG transparente de 1024 px, para fondos claros y su color. Baldosa de 1,764·D centrada en la tinta.
- hekate-logomark-void-512.png: Isotipo monocromo vacío (#07080d), PNG transparente de 512 px, para fondos claros y su color. Baldosa de 1,764·D centrada en la tinta.
- hekate-logomark-void.svg: Isotipo monocromo vacío (#07080d), SVG transparente, para fondos claros y su color. Baldosa de 1,764·D centrada en la tinta.
- hekate-logomark-white-1024.png: Isotipo monocromo blanco, PNG transparente de 1024 px, para fondos oscuros: la versión de siempre sobre el vacío, el negro y una foto con velo. Baldosa de 1,764·D centrada en la tinta.
- hekate-logomark-white-512.png: Isotipo monocromo blanco, PNG transparente de 512 px, para fondos oscuros: la versión de siempre sobre el vacío, el negro y una foto con velo. Baldosa de 1,764·D centrada en la tinta.
- hekate-logomark-white.svg: Isotipo monocromo blanco, SVG transparente, para fondos oscuros: la versión de siempre sobre el vacío, el negro y una foto con velo. Baldosa de 1,764·D centrada en la tinta.
- hekate-logomark.svg: Isotipo de color (sigilo en el color de marca), SVG transparente, para fondos oscuros en casos excepcionales (la de siempre es la blanca). Baldosa de 1,764·D centrada en la tinta.
- hekate-og.png: Imagen para compartir enlaces (Open Graph), 1200 × 630 px: el logotipo horizontal blanco centrado sobre el vacío.
- icon-192.png: Ícono de app (manifiesto web), con radio de 0,22 del lado.
- icon-512.png: Ícono de app (manifiesto web), con radio de 0,22 del lado.
- icon-maskable-512.png: Ícono enmascarable (purpose "maskable"): la marca y su respeto dentro del 80 % central.

APLICACIONES SOBRE FONDOS

Regla fija, la misma que el contraste de la interfaz: el sigilo es un gráfico y necesita 3:1
contra su fondo. Sobre fondos oscuros la versión de siempre es la blanca; la de color queda para
casos excepcionales. Contraste medido (sigilo / palabra):
- Sobre el vacío (#07080d): versión blanca (sigilo y palabra en blanco). 20,01:1 / 20,01:1.
  Excepcional: la de color, 11,62:1 / 20,01:1.
- Sobre el negro puro (#000000): versión blanca (sigilo y palabra en blanco). 21,00:1 / 21,00:1.
  Excepcional: la de color, 12,19:1 / 21,00:1.
- Sobre el blanco (#ffffff): versión monocroma vacío. 20,01:1 / 20,01:1.
- Sobre su color (#45dbc5): versión monocroma vacío. 11,62:1 / 11,62:1.
  Archivos listos con fondo: -on-void (la blanca sobre el vacío), -on-light (el blanco) y
  -on-color (su color).
- Sobre fotos: siempre con un velo del vacío (#07080d) debajo de la marca, al 45 % como
  mínimo, y encima la versión blanca. Con ese velo, aun sobre el blanco puro, el sigilo y la
  palabra dan 3,20:1. Nunca la marca directo sobre una foto.
  La de color, excepcional, pide un velo del 60 % (sigilo 3,09:1).
- Otros fondos: decide la luminancia relativa del fondo (WCAG, de 0 el negro a 1 el blanco).
  Hasta 0,300, la versión blanca (gris de referencia: #949494 o más oscuro).
  Desde 0,108, la monocroma vacío (gris de referencia: #5d5d5d o más claro).
  Entre 0,108 y 0,300 sirven las dos: la blanca hasta 0,185 y la
  monocroma vacío desde ahí, donde da más contraste. La regla es la misma en las cuatro marcas.
- El favicon, los íconos de app y los avatares van en color: distinguen los productos en las
  pestañas, el teléfono y las redes.

Lo que la regla descarta, con su contraste:
- El color de marca sobre blanco: 1,72:1, no llega a 3:1.
- La palabra blanca sobre su color: 1,72:1, no llega a 3:1.

COLORES

- Marca (rol brand): #45dbc5, el acento normalizado de la semilla #45dbc5.
- Palabra (text-strong): #ffffff.
- Vacío (fondo y versión monocroma): #07080d.
- Blanco (fondo claro de los avatares): #ffffff.
La interfaz es siempre oscura y en ella la marca va en blanco, también en la cabecera: el
color de marca queda para el favicon, los íconos de app y casos excepcionales. La versión
monocroma vacío es para aplicaciones fuera de la interfaz (fondos claros, su propio color,
papel, documentos de terceros).

PROPORCIONES

D es el diámetro visible del círculo de la familia (18,199 unidades de la grilla de 24).
- Horizontal: altura de mayúscula D/φ (11,25), separación D/φ² desde la tinta del sigilo;
  la palabra, centrada en el eje del círculo.
- Vertical: altura de mayúscula D/φ² (6,95), separación D/φ³; todo centrado.
- En los dos, la separación es la altura de mayúscula dividida por φ.

ÁREA DE RESPETO

D/φ² (6,95 unidades, 0,382·D) libres.
- Isotipo: la baldosa de 1,764·D (D + 2·D/φ²), centrada en la tinta del sigilo.
  En Hekate las puntas del triángulo salen del círculo: la tinta queda con 5,03 unidades
  a los costados y 5,14 arriba y abajo (más que D/φ³, 4,3), y el círculo de la
  familia, con 5,14 abajo, 6,95 a los costados y 8,77 arriba.
- Logotipos: alrededor de todo el bloque (sigilo y palabra), medidos desde la tinta.
Los SVG y PNG ya la incluyen: se colocan sin margen extra.

TAMAÑOS MÍNIMOS (PANTALLA)

- Isotipo: 16 px de caja (la grilla de 24); el favicon es esa medida.
- Logotipo horizontal: isotipo a 24 px, el archivo a 105 × 36 px.
- Logotipo vertical: isotipo a 40 px, el archivo a 87 × 79 px.
- Cabecera: sigilo a 20 px, su tamaño natural.

FAVICON

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

En el manifiesto web: icon-192.png e icon-512.png con purpose "any", e
icon-maskable-512.png con purpose "maskable".

QUÉ NO HACER

- No cambiar los colores ni usar la semilla en lugar del acento normalizado.
- No agregar sombras, brillos, degradados, contornos ni filtros. El brillo de la interfaz lo
  pone el componente; los archivos de marca son planos.
- No deformar, rotar, recortar ni reordenar el sigilo y la palabra.
- No cambiar la tipografía, el peso, el ancho ni el tracking de la palabra, ni escribirla en
  minúsculas.
- No quitar el círculo de la familia ni agregar elementos al sigilo.
- No invadir el área de respeto ni usar la marca por debajo de los mínimos.
- No poner la versión de color ni la blanca sobre blanco ni sobre su propio color, ni la
  monocroma vacío sobre fondos oscuros. Vale también para la cabecera: la blanca es para la
  interfaz y los fondos oscuros; sobre fondos claros o su color va la -void.
- No poner la marca de Arche al lado de la marca de un producto derivado: cada producto
  muestra solo la suya.
- No poner el sigilo en color en la cabecera: en la interfaz la marca va en blanco.
- No usar la palabra blanca sobre su color ni el sigilo en color sobre otro acento.
- No poner la marca sobre una foto sin el velo.
