Criterio · Brandbook de trabajo · 13 de octubre de 2026
La marca, tal y como está decidida hoy.
Reúne lo aprobado en el paquete de identidad (logo, color y tipografía) y lo que se ha ido construyendo en la landing: T-NO, sus estados, y las piezas de interfaz. Cada apartado dice si está aprobado, en trabajo o si es una propuesta.
AprobadoEn trabajoPropuesta
01 · Logo Aprobado · versión 26
Un wordmark con una «o» de píxeles.
El logo es Archivo 600 con una última «o» propia: silueta pixelada, hueco transparente y un cuadrado naranja arriba a la derecha. Esa «o» es también el ojo de T-NO.
Fondos claros · logo.svg
Fondos oscuros · logo-reverse.svg
Isotipo
Isotipo cian
Icono de app
Ojo
- Usa siempre el SVG. El wordmark ya está trazado.
- Escálalo en proporción: no cambies grosor, espaciado ni la posición del cuadrado.
- En espacios pequeños, el isotipo o el icono de app; comprueba que se lee al tamaño real.
- No escribas «criterio» con una fuente esperando el mismo resultado.
- No redibujes la «o» ni le pongas pupila.
- No sustituyas el wordmark por Oxanium ni por Bricolage Grotesque.
02 · Color Aprobado
Tinta, un naranja y dos azules. Sin cremas.
Los fondos son blanco, el gris neutro del lienzo o el oscuro de la app. El naranja es el acento; el cian es el ojo de T-NO. El antiguo papel crema queda fuera.
#1A1A1A#FF6A00#A8C7EB#8EDFE4#080A08#FAFAF8#F5F6F7#55624FContraste de cada pareja
Medido con la fórmula de WCAG. El texto normal necesita 4,5 o más; el texto grande y los bordes de un control, 3.
- Texto blanco sobre naranja y texto naranja sobre el lienzo no llegan al mínimo: el naranja se usa como relleno con tinta encima, o como marca gráfica.
03 · Tipografía Archivo: aprobada Söhne: en prueba
Archivo para leer, Söhne para titular.
Archivo 400 para lectura e interfaz y 600 para énfasis. El fichero variable y su licencia abierta van en el paquete.
Archivo 600
Un papel en blanco
Pesos en uso
Titulares: Söhne
De las doce candidatas de Klim que se probaron en la landing, Andoni se quedó con Söhne. Es la que llevan los titulares de la landing y de este documento.
Söhne Halbfett · de prueba
Un papel en blanco
Para que vuestro criterio no se pierda y esté siempre disponible.
- La versión de prueba no trae tildes, eñes ni signos de apertura: en «esté» o «invitación» esas letras caen a Archivo. Se nota de cerca. Se arregla al comprar la licencia.
- La licencia de prueba es de uso interno: no se puede publicar ni distribuir. La carpeta queda fuera del despliegue, así que en la web pública los titulares saldrían en Archivo hasta tener la licencia.
04 · T-NO En trabajo
T-NO, el que guarda tus referencias.
Un monitor pequeño que flota. Lleva encima lo que vas guardando, mira con un solo ojo (el anillo de píxeles del logo) y tiene el nombre grabado en una placa del costado.
Curioso, juguetón sin ser infantil, cuidado y flexible. Su nombre viene de «tener tino». Está dibujado en isométrico, pieza a pieza, y se mueve con calma.
En vivo
La primera fila de botones cambia de estado y la segunda lo gira. Te sigue con la mirada.
Trece vistas
De frente a lado en nueve pasos, más dos hacia arriba y dos hacia abajo. Al girar las recorre como un folioscopio; aquí se ven siete. En la última casilla va en espejo: T-NO mira siempre hacia el contenido, y el ojo se compensa para que una flecha siga apuntando a donde debe.
Ocho estados
El ojo es una rejilla de 14 × 8 píxeles. Al cambiar de estado, cada píxel encendido viaja hasta su sitio en el dibujo nuevo.
| Estado | Ojo | Cuerpo | Cuándo |
|---|---|---|---|
| Reposo | Anillo; pasea la mirada, te sigue, parpadea | Flota | Por defecto |
| Dormido | Una raya que respira | Baja; salen zetas de píxeles | Sin actividad |
| Curioso | Unas gafas | Se inclina hacia el cursor | Mientras examinas o votas |
| Pensando | El anillo gira con estela | Vibran las antenas, parpadea la luz | Mientras trabaja |
| Aprueba | Giro rápido y marca de visto | Salta y se estira | Algo se queda |
| Descarta | Se cierra en un punto y estalla en equis | Se ladea, suelta una nota | Algo sale |
| Señala | Flecha en cuatro direcciones | Empuja hacia ese lado | Para guiar la mirada |
| Error | Triángulo de aviso que parpadea | Sacudida y un poco de humo | Algo ha fallado |
Por dentro
Con el costado quitado y la tapa levantada se ve lo que hace con lo que guardas: cada referencia entra por la ranura de la tapa, un carro la lleva por el carril y la baja a la casilla de su área. Hay ocho casillas, una por área del sistema, y un cajón para las archivadas.
- El ojo va en cian sobre pantalla oscura, sin pupila.
- El naranja es para lo que se pulsa o sujeta: botón, pinza y mando.
- Mira hacia el contenido. Si está a la derecha de la pantalla, va en espejo.
- Se mueve con calma: llega y se para, sin rebotes gratuitos.
- No cambies sus proporciones ni le añadas cara: el ojo es todo el gesto.
- No lo uses como adorno repetido en una misma pantalla: uno solo, que acompaña.
- No lo dejes moviéndose si la persona pidió menos movimiento: cambia de dibujo, quieto.
05 · Componentes Propuesta
Un guiño al 2000: teclas con canto.
El paquete de identidad no aprueba radios, sombras ni componentes. Estas piezas vienen de la lámina anterior de componentes y de lo construido en la landing; quedan como propuesta.
Botones
Borde de tinta de 1,5 px, luz arriba a la izquierda y sombra abajo a la derecha. Al pasar el cursor baja; al pulsar toca fondo.
Teclas y votos
Un punto por persona del equipo: conserva, olvida o aún no ha votado.
Bocadillo de T-NO
Baja conmigo. Te lo enseño paso a paso.Comentarios y cursores del equipo
06 · Voz y tono En trabajo
Cálida, en segunda persona y sin prisa.
Habla de tú, con calma y un punto en contra de la productividad ruidosa. Sin jerga ni grandes promesas: registro llano y directo, el del texto que el equipo ya ha escrito.
Así suena
«Un papel en blanco. Esto es lo que ves cada vez que empiezas un proyecto.»
«Y funciona. Hasta que deja de funcionar.»
Así no
- «No es X, es Y»: se dice la cosa.
- Arranques que prometen una revelación.
- Potenciar, impulsar, optimizar, revolucionar, llevar al siguiente nivel.
- Cierres que quieren sonar profundos.
07 · Estado
Qué está decidido y qué no.
| Pieza | Estado | De dónde sale | Qué falta |
|---|---|---|---|
| Logo | Aprobado | Paquete de identidad, versión 26 | Nada |
| Color | Aprobado | Paquete de identidad | La aplicación sigue con la paleta anterior (papel crema y otro naranja) |
| Archivo | Aprobado | Paquete de identidad | La aplicación usa Satoshi |
| Titulares | En trabajo | Söhne, elegida entre doce de Klim | Comprar la licencia: la de prueba no trae tildes y no se puede publicar |
| T-NO | En trabajo | Imagen de Andoni, dibujado en cinco rondas | Aprobarlo como mascota. Sustituye al conejo con visor de la identidad anterior |
| Ojo de T-NO | En trabajo | Rejilla de píxeles enteros | Calcarlo al anillo del logo, que es algo más grueso |
| Componentes | Propuesta | Lámina anterior y la landing | Aprobar radios, bisel y estados |
| Voz | En trabajo | El texto de lista de espera y el sistema del proyecto | Confirmar el área en el sistema |