IRIS · 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/iris/. LA MARCA Sigilo: La que sostiene la luz. Como en la figura de la diosa: los brazos en alto forman una media luna, la cabeza es un círculo y el cuerpo es el eje. Iris sostiene la luz sobre su cabeza, dentro del círculo de la familia. Construcción: Círculo R₀; brazos: arco de R₁ con el mismo centro que la cabeza (círculo R₃), abierto hacia arriba; el cuerpo baja por el eje hasta R₀; el punto R₄ sobre la cabeza. 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). - 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. - iris-avatar-color.png: Avatar cuadrado de 1080 px: sigilo en el vacío sobre su color (el acento). - iris-avatar-color.svg: Avatar cuadrado de 1080 px: sigilo en el vacío sobre su color (el acento). - iris-avatar-light.png: Avatar cuadrado de 1080 px: sigilo en el vacío sobre blanco. - iris-avatar-light.svg: Avatar cuadrado de 1080 px: sigilo en el vacío sobre blanco. - iris-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. - iris-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. - iris-logo-header-void.svg: Cabecera monocroma vacío, para fondos claros y su color. - iris-logo-header-void@2x.png: La cabecera monocroma vacío en PNG al doble, para fondos claros y su color. - iris-logo-header.svg: Cabecera: el sigilo y IRIS 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. - iris-logo-header@2x.png: La cabecera blanca en PNG al doble, para fondos oscuros. - iris-logo-horizontal-on-color.png: El logotipo horizontal sobre su color en PNG de 2400 px de ancho, con el área de respeto. - iris-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. - iris-logo-horizontal-on-light.png: El logotipo horizontal sobre el blanco en PNG de 2400 px de ancho, con el área de respeto. - iris-logo-horizontal-on-light.svg: Logotipo horizontal monocromo vacío sobre el blanco, con el área de respeto; para portadas, documentos y piezas propias. - iris-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. - iris-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. - iris-logo-horizontal-void.svg: Logotipo horizontal monocromo vacío (#07080d), SVG, fondo transparente, para fondos claros y su color. Incluye el área de respeto. - iris-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. - iris-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. - iris-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. - iris-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. - iris-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. - iris-logo-vertical-on-color.png: El logotipo vertical sobre su color en PNG de 1200 px de ancho, con el área de respeto. - iris-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. - iris-logo-vertical-on-light.png: El logotipo vertical sobre el blanco en PNG de 1200 px de ancho, con el área de respeto. - iris-logo-vertical-on-light.svg: Logotipo vertical monocromo vacío sobre el blanco, con el área de respeto; para portadas, documentos y piezas propias. - iris-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. - iris-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. - iris-logo-vertical-void.svg: Logotipo vertical monocromo vacío (#07080d), SVG, fondo transparente, para fondos claros y su color. Incluye el área de respeto. - iris-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. - iris-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. - iris-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. - iris-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. - iris-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. - iris-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. - iris-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. - iris-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. - iris-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. - iris-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. - iris-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. - iris-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. - iris-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. - iris-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. - iris-og.png: Imagen para compartir enlaces (Open Graph), 1200 × 630 px: el logotipo horizontal blanco centrado sobre el vacío. 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, 10,78: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, 11,32:1 / 21,00:1. - Sobre el blanco (#ffffff): versión monocroma vacío. 20,01:1 / 20,01:1. - Sobre su color (#cdb2f8): versión monocroma vacío. 10,78:1 / 10,78: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 65 % (sigilo 3,48: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,86:1, no llega a 3:1. - La palabra blanca sobre su color: 1,86:1, no llega a 3:1. COLORES - Marca (rol brand): #cdb2f8, el acento normalizado de la semilla #cdb2f8. - 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 72 × 33 px. - Logotipo vertical: isotipo a 40 px, el archivo a 57 × 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.