Elementos básicos de identificación.
Usar una marca parece sencillo.
Usar una marca parece algo sencillo, y sin embargo se transforma en una tarea muy delicada: su uso correcto influye decisivamente en el carácter y el estilo que el emprendimiento proyecta.
Acá están los elementos básicos: las marcas, los colores, la tipografía y cómo se usan.
- Manual
- EBI, 2021
- Tipografía
- Centra Nº2, Sharp Type
- Colores
- Uva y Lavanda
- Sitio
- quantikgroup.com
Logo
El logotipo es la dimensión visual del nombre de la marca.
Lockups
Uva, sobre fondo claroLa versión principal. Sobre blanco y sobre grises del 0 al 50 por ciento. Blanco, sobre fondo oscuroSobre grises del 50 al 100 por ciento, sobre color institucional y sobre imágenes oscuras. LavandaPara cuando el fondo es Uva y el logotipo necesita separarse sin recurrir al blanco. 
Quantik GroupEl lockup del grupo, apilado: Quantik en Uva sobre Group en Lavanda.
Clear space
El manual define el módulo como la contraforma de la Q, el hueco cuadrado dentro de la letra, y calcula el marco de protección a partir de él. Ese módulo es una medida del dibujo y no se puede tomar de un archivo de mapa de bits, así que el diagrama de abajo aproxima la zona con la altura de la marca. Para artes finales, tomar la medida del vector original. Tamaño mínimo de impresión: 12 mm de base para Quantik y para Quantik Group, 18 mm para QuantikLab.
- Clear space
- 1 × the height of the mark, all four sides
- Measured from
- The height of the supplied file. A bitmap carries no cap height, so nothing inside the letterforms is measured here.
- At a 64px-tall mark
- 64 px on every side
Misuse
No usar el logotipo sobre fondos de contraste medio sin elegir la versión correcta.
El manual fija el corte en el 50 por ciento: de 0 a 50 por ciento va la versión oscura, de 50 a 100 por ciento va la blanca. Lo mismo vale sobre colores no institucionales e imágenes.
No colocar ningún elemento gráfico dentro del espacio libre.
El marco de protección existe para mantener la integridad visual de la marca. Nada entra en esa zona.
No reconstruir la marca en vectores a partir de estos archivos.
No se encontró un master en SVG, AI o EPS. Un calco hereda los errores del mapa de bits y deja de coincidir con el original.
No imprimir por debajo del tamaño mínimo.
12 mm de base para Quantik, 18 mm para QuantikLab. Por debajo, la contraforma de la Q se cierra.
Colour
Dos colores: Quantik Uva y Quantik Lavanda.
Paleta primaria
Quantik Uva
Role: accent
Pantone 2627 C. El color de la marca y el de los links.
Light field
- RGB
- HSL
- CMYK
- approx.
- Type on it
- at 13.82:1, AAA
Dark field
- RGB
- HSL
- CMYK
- approx.
- Type on it
- at 6.46:1, AA
Quantik Lavanda
Role: signal
Pantone 2572 C. Relleno y acento. No es un color de texto sobre papel.
Light field
- RGB
- HSL
- CMYK
- approx.
- Type on it
- at 6.46:1, AA
Dark field
- RGB
- HSL
- CMYK
- approx.
- Type on it
- at 8.91:1, AAA
Papel y tinta
Papel
Role: background
El fondo del manual.
Light field
- RGB
- HSL
- CMYK
- approx.
- Type on it
- at 18.87:1, AAA
Dark field
- RGB
- HSL
- CMYK
- approx.
- Type on it
- at 17.81:1, AAA
Papel suave
Role: surface
Lavanda al 10%. Para paneles que necesitan separarse sin una línea.
Light field
- RGB
- HSL
- CMYK
- approx.
- Type on it
- at 17.09:1, AAA
Dark field
- RGB
- HSL
- CMYK
- approx.
- Type on it
- at 16.87:1, AAA
Tinta
Role: ink
Texto. Casi negro, con una vuelta de violeta.
Light field
- RGB
- HSL
- CMYK
- approx.
- Type on it
- at 16.64:1, AAA
Dark field
- RGB
- HSL
- CMYK
- approx.
- Type on it
- at 16.64:1, AAA
Gris
Role: neutral
Texto secundario.
Light field
- RGB
- HSL
- CMYK
- approx.
- Type on it
- at 6.52:1, AA
Dark field
- RGB
- HSL
- CMYK
- approx.
- Type on it
- at 6.75:1, AA
CMYK is converted from RGB with no colour profile, so it is an approximation. A print value needs a profile and a proof.
Proportions
- Papel64%
- Tinta18%
- Quantik Uva9%
- Gris6%
- Quantik Lavanda3%
Rules
- Uva y Lavanda son los dos colores institucionales: Pantone 2627 C y Pantone 2572 C.
- Sobre fondo claro la marca va en Uva; sobre fondo oscuro, en blanco.
- Sobre papel, Lavanda no se usa para texto: mide 2,92:1. Es relleno y acento.
- Sobre fondo oscuro el acento pasa a Lavanda, porque Uva no se ve.
- El EBI define escalas de tinte del 90 al 10% para ambos colores.
Typography
Centra Nº2 es la tipografía corporativa. La familia tiene ocho pesos más sus itálicas; Book es la variante principal de toda comunicación masiva.
The family
Centra No2
- Foundry
- Sharp Type
- Source
- Local files
- Fallback
- system-ui, sans-serif
- Licence
- The full family is eight weights plus italics. Five are held in production: Light, Book, Book Italic, Medium and Bold. Hairline, Thin, Extra Bold and Black are named in the manual but are not in the web kit.
- Uppercase
- ABCDEFGHIJKLMNOPQRSTUVWXYZ
- Lowercase
- abcdefghijklmnopqrstuvwxyz
- Numerals
- 0123456789
- Punctuation
- . , : ; ! ? ‘ ’ “ ” ( ) [ ] – — … / & @ # % + = < >
Roles
| Role | Weight | Optical size | Tracking | Size | Usage |
|---|---|---|---|---|---|
| Display | 500 | not set | −0.02em | Títulos y aperturas | Centra Medium, tracking cerrado. Es lo que usa el sitio para los titulares. |
| Book | 400 | not set | 0em | 16px, medida de lectura 62ch | La variante principal según el manual: campaña gráfica, vía pública y auspicios. |
| Etiqueta | 500 | not set | +0.01em | 11–12px | Rótulos, contadores y datos. El único lugar donde el tracking se abre. |
The scale
Usar una marca parece sencillo.
Usar una marca parece sencillo.
Usar una marca parece sencillo.
Usar una marca parece sencillo.
Usar una marca parece sencillo.
Usar una marca parece sencillo.
Usar una marca parece sencillo.
Usar una marca parece sencillo.
Usar una marca parece sencillo.
Usar una marca parece sencillo.
Optical corrections
Centra Nº2 viene en pesos estáticos, sin eje óptico.
| Plane | Ground | Weight | Tracking | Calibrated |
|---|---|---|---|---|
| Fondo oscuro — el sitioMedium para titulares, Book para texto. Sin corrección óptica: la familia no tiene eje. |
| 500 | −0.02em | no date |
| UvaSin calibrar. El manual no define ajustes por plano. |
| not calibrated | no date | |
| LavandaSin calibrar. |
| not calibrated | no date | |
Caja baja, salvo la marca.
Movimiento
Todo arranca fuerte, frena tarde y queda quieto.
En movimiento
Mover
Botones, flechas y líneas que se desplazan.
450ms
Entrar
Lo que aparece y se acomoda.
400ms
Color
Color y opacidad en los links.
150ms
En uso
Menú
Líneas del menú
Riel de logos
Aviso de cookies
La curva
Mover
Entrar
Color
Una curva mueve casi todo: botones, flechas, líneas y paneles.
El riel de logos es el único bucle. Con reduced-motion se apaga y las marcas se acomodan en filas.
Imágenes
El EBI no define fotografía, así que todo lo que sigue está leído del sitio: de lo que ya hace con sus propias imágenes.
Las imágenes de esta página son material propio de Quantik: la foto del equipo y los heroes del sitio. No hay ninguna imagen de trabajo de clientes, porque el espacio de trabajo es confidencial y cualquier afirmación pública sobre un cliente se verifica primero en su fuente original. La foto del equipo muestra personas identificables. La serie escultórica está en la biblioteca de imágenes del sitio y hoy ninguna página la usa.
Tratamiento
- Recorte
- Las fotos van a sangre con object-fit: cover. El hero de página además escala la imagen un 2 por ciento, con transform: scale(1.02), y la foto del equipo se ancla en center 78%, así el grupo queda en el tercio inferior del encuadre.
- Velo
- Ninguna foto lleva texto encima sin velo. El de las fotos a sangre son dos degradados sobre rgba(10, 0, 18): de abajo hacia arriba 62 por ciento, 28 por ciento a la altura del 26 por ciento y 0 al 52 por ciento; y de izquierda a derecha 34 por ciento hasta llegar a 0 al 55 por ciento. Arriba se suma una banda de 130 px que baja de rgba(8, 0, 14, 0.5) a 0.
- Proporción
- El frame de las tarjetas de caso fija aspect-ratio 4 / 3, 6 px de radio y Fondo suave detrás mientras carga, con un velo que va de 82 por ciento abajo a 0 al 58 por ciento de altura. Los heroes no fijan proporción: toman el alto del bloque.
- El hover no hace zoom
- La imagen nunca se agranda al pasar el mouse. Se mueve la tarjeta, 5 px hacia arriba; el velo se profundiza a 92 por ciento en 0,5 s; una línea de 1 px se dibuja sobre el epígrafe; y la marca del cliente aparece arriba a la derecha.
- Las marcas ajenas van planas
- Los logos de terceros se aplanan a blanco con filter: brightness(0) invert(1). En la cinta de clientes van al 72 por ciento de opacidad y llegan al 100 al pasar el mouse; en la de partners quedan al 55 por ciento.
- Paralaje lento
- Las secciones de foto llevan data-parallax entre 14 y 16, con la imagen desbordada 8 o 9 por ciento arriba y abajo, para que el desplazamiento no descubra el borde.
- El texto sobre foto lleva sombra
- Titular y párrafo: 0 2px 28px rgba(0, 0, 0, 0.38). Volanta: 0 1px 14px rgba(0, 0, 0, 0.45). Es corrección de legibilidad, no efecto.
- Acá van sin nada
- En esta página las imágenes se muestran sin velo, sin recorte y sin marco, a su proporción real. El velo y el recorte son de la composición del sitio, no del archivo, y un manual que los repitiera dejaría de servir para comparar contra el original.
El material
Accessibility
Medido con WCAG 2.1 sobre los colores de esta página.
Commitments
- La marca se elige por luminosidad del fondo
- De 0 a 50% va la oscura; de 50 a 100%, la blanca.
- Lavanda no es color de texto
- Sobre papel mide 2,92:1. Sobre Uva llega a 5,37:1.
Contrast
1 of 7 pairs falls short: Lavanda sobre papel measures 2.92:1 against a required 4.5:1.
| Pair | Specimen | Foreground | Background | Measured | Required | Result |
|---|---|---|---|---|---|---|
| Lavanda sobre papel | Visual sample | #B978FF | #FFFFFF | 2.92:1 | 4.5:1 | Fail |
| Tinta sobre papel | Visual sample | #1A0A24 | #FFFFFF | 18.87:1 | 4.5:1 | PassAAA |
| Gris sobre papel | Visual sample | #5F5069 | #FFFFFF | 7.40:1 | 4.5:1 | PassAAA |
| Uva sobre papel | Visual sample | #3C005A | #FFFFFF | 15.67:1 | 4.5:1 | PassAAA |
| Blanco sobre Uva | Visual sample | #FFFFFF | #3C005A | 15.67:1 | 4.5:1 | PassAAA |
| Uva sobre Lavanda | Visual sample | #3C005A | #B978FF | 5.37:1 | 4.5:1 | PassAA |
| Texto claro sobre fondo oscuro | Visual sample | #F5EEFC | #120019 | 17.81:1 | 4.5:1 | PassAAA |
Ratios use the WCAG 2.1 relative-luminance formula and are computed from the hex values on this page, so they move the moment a colour does. A required 3:1 applies to large display type and non-text marks; everything else is held to 4.5:1.
Focus
Press Tab. The outline that lands on the control below is the focus-visible style the whole system uses: 2px of the accent colour, offset 3px, on a 1px radius. This section does not restyle it.
Assets
Los archivos.
Centra Nº2 es una tipografía licenciada de Sharp Type. Los archivos no se redistribuyen: no se copian a una presentación, a una entrega ni a otro sitio.
Marcas
Mapas de bits en alta resolución. No hay master vectorial en este kit.
- Quantik Uva
- quantik_uva.png — 3808 × 735
- Quantik Lavanda
- quantik_lavanda.png — 3808 × 735
- Quantik blanco
- quantik_white.png — 3808 × 735
- Quantik Group
- quantik_group_2tone.png — 3212 × 1251
Tipografía
Centra Nº2, Sharp Type. Cinco cortes en producción.
- Light
- CentraNo2-Light.woff2 — 300
- Book
- CentraNo2-Book.woff2 — 400, precargada
- Book Italic
- CentraNo2-BookItalic.woff2 — 400 itálica
- Medium
- CentraNo2-Medium.woff2 — 500
- Bold
- CentraNo2-Bold.woff2 — 700