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/. 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 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.