ARCHE · 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/arche/<archivo>.

LA MARCA

Sigilo: Sucesión doble, un punto.
Dos sucesiones y un solo punto de luz en el centro, donde se cruzan: el origen entre lo que baja y lo que sube.
Construcción: Dos sucesiones de R₁ y R₂, tangentes por dentro de R₀: una baja desde arriba y otra sube desde abajo. Los dos R₁ se cruzan en el centro de R₀, donde está el punto R₄, dentro de la lente que forman.

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.

ARCHIVOS

- LEEME.txt: Este archivo.
- apple-touch-icon.png: Ícono de iOS, 180 px, cuadrado sobre el vacío (iOS aplica su máscara).
- arche-avatar-color.png: Avatar cuadrado de 1080 px: sigilo en el vacío sobre su color. En Arche su color es el blanco: es igual al avatar sobre blanco.
- arche-avatar-color.svg: Avatar cuadrado de 1080 px: sigilo en el vacío sobre su color. En Arche su color es el blanco: es igual al avatar sobre blanco.
- arche-avatar-light.png: Avatar cuadrado de 1080 px: sigilo en el vacío sobre blanco.
- arche-avatar-light.svg: Avatar cuadrado de 1080 px: sigilo en el vacío sobre blanco.
- arche-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.
- arche-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.
- arche-logo-header-void.svg: Cabecera monocroma vacío, para fondos claros.
- arche-logo-header-void@2x.png: La cabecera monocroma vacío en PNG al doble, para fondos claros.
- arche-logo-header.svg: Cabecera: el sigilo y ARCHE en blanco, como en la interfaz (sigilo de 20 px, palabra de 17 px), para fondos oscuros. Sobre fondos claros va la -void. Para otros tamaños, escalar este vector.
- arche-logo-header@2x.png: La cabecera blanca en PNG al doble, para fondos oscuros.
- arche-logo-horizontal-on-color.png: El logotipo horizontal sobre su color en PNG de 2400 px de ancho, con el área de respeto.
- arche-logo-horizontal-on-color.svg: Logotipo horizontal monocromo vacío sobre su color, que en Arche es el blanco (igual al de sobre blanco), con el área de respeto; para portadas, documentos y piezas propias.
- arche-logo-horizontal-on-light.png: El logotipo horizontal sobre el blanco en PNG de 2400 px de ancho, con el área de respeto.
- arche-logo-horizontal-on-light.svg: Logotipo horizontal monocromo vacío sobre el blanco, con el área de respeto; para portadas, documentos y piezas propias.
- arche-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.
- arche-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.
- arche-logo-horizontal-void.svg: Logotipo horizontal monocromo vacío (#07080d), SVG, fondo transparente, para fondos claros. Incluye el área de respeto.
- arche-logo-horizontal-void@2x.png: Logotipo horizontal monocromo vacío (#07080d), PNG al doble de su tamaño natural, fondo transparente, para fondos claros. Incluye el área de respeto.
- arche-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.
- arche-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.
- arche-logo-horizontal.svg: Logotipo horizontal de color (el blanco es el color de Arche: igual al blanco), SVG, fondo transparente, para fondos oscuros. Incluye el área de respeto.
- arche-logo-horizontal@2x.png: Logotipo horizontal de color (el blanco es el color de Arche: igual al blanco), PNG al doble de su tamaño natural, fondo transparente, para fondos oscuros. Incluye el área de respeto.
- arche-logo-vertical-on-color.png: El logotipo vertical sobre su color en PNG de 1200 px de ancho, con el área de respeto.
- arche-logo-vertical-on-color.svg: Logotipo vertical monocromo vacío sobre su color, que en Arche es el blanco (igual al de sobre blanco), con el área de respeto; para portadas, documentos y piezas propias.
- arche-logo-vertical-on-light.png: El logotipo vertical sobre el blanco en PNG de 1200 px de ancho, con el área de respeto.
- arche-logo-vertical-on-light.svg: Logotipo vertical monocromo vacío sobre el blanco, con el área de respeto; para portadas, documentos y piezas propias.
- arche-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.
- arche-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.
- arche-logo-vertical-void.svg: Logotipo vertical monocromo vacío (#07080d), SVG, fondo transparente, para fondos claros. Incluye el área de respeto.
- arche-logo-vertical-void@2x.png: Logotipo vertical monocromo vacío (#07080d), PNG al doble de su tamaño natural, fondo transparente, para fondos claros. Incluye el área de respeto.
- arche-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.
- arche-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.
- arche-logo-vertical.svg: Logotipo vertical de color (el blanco es el color de Arche: igual al blanco), SVG, fondo transparente, para fondos oscuros. Incluye el área de respeto.
- arche-logo-vertical@2x.png: Logotipo vertical de color (el blanco es el color de Arche: igual al blanco), PNG al doble de su tamaño natural, fondo transparente, para fondos oscuros. Incluye el área de respeto.
- arche-logomark-1024.png: Isotipo de color (el blanco es el color de Arche: igual al blanco), PNG transparente de 1024 px, para fondos oscuros. Baldosa de 1,764·D centrada en la tinta.
- arche-logomark-512.png: Isotipo de color (el blanco es el color de Arche: igual al blanco), PNG transparente de 512 px, para fondos oscuros. Baldosa de 1,764·D centrada en la tinta.
- arche-logomark-void-1024.png: Isotipo monocromo vacío (#07080d), PNG transparente de 1024 px, para fondos claros. Baldosa de 1,764·D centrada en la tinta.
- arche-logomark-void-512.png: Isotipo monocromo vacío (#07080d), PNG transparente de 512 px, para fondos claros. Baldosa de 1,764·D centrada en la tinta.
- arche-logomark-void.svg: Isotipo monocromo vacío (#07080d), SVG transparente, para fondos claros. Baldosa de 1,764·D centrada en la tinta.
- arche-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.
- arche-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.
- arche-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.
- arche-logomark.svg: Isotipo de color (el blanco es el color de Arche: igual al blanco), SVG transparente, para fondos oscuros. Baldosa de 1,764·D centrada en la tinta.
- arche-og.png: Imagen para compartir enlaces (Open Graph), 1200 × 630 px: el logotipo horizontal blanco centrado sobre el vacío.
- 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.
- 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.
- Sobre el negro puro (#000000): versión blanca (sigilo y palabra en blanco). 21,00:1 / 21,00:1.
- Sobre el blanco (#ffffff): versión monocroma vacío. 20,01:1 / 20,01:1.
- Sobre su color (#ffffff): versión monocroma vacío. 20,01:1 / 20,01:1.
  En Arche el color de marca es el blanco: la versión de color es la blanca, y «su color»
  es el blanco, donde va la monocroma vacío, como sobre cualquier blanco.
  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.
- 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,00:1, no llega a 3:1.
- La palabra blanca sobre su color: 1,00:1, no llega a 3:1.

COLORES

- Marca (rol brand): #ffffff. En Arche el acento es el blanco.
- 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.
  Deja D/φ² libres alrededor del círculo de la familia, que es toda su tinta.
- 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 93 × 33 px.
- Logotipo vertical: isotipo a 40 px, el archivo a 79 × 73 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.
