Criterio · Brandbook · 2026-11-04 · landing en curso · versiones · brandbook de octubre
Tus referencias,
escritas como decisiones.
La marca es un personaje tranquilo sobre un fondo que se calla: papel, tinta y una sola cosa cálida por pantalla. Esta página recoge lo que usa la landing en curso: Geist Serif, el marco retro, Tino y la ventana que se maximiza.
01 · Logo
El conejo y el nombre.
Tino en plano, con sus orejas cortas, junto a «criterio» en Geist Serif engordada, con −6,5 % de interletrado y las letras casi tocándose, a prueba. El conejo mide φ veces la altura de la palabra y la línea base cae en su barriga. Sola, la marca aguanta hasta 16 px; el favicon es solo el conejo, sin cuadro.
Isotipo y palabra
El isotipo mide φ veces la altura de la palabra. El hueco mide esa altura entre φ.
Sobre papel: conejo y nombre en tinta.
Sobre el tablero del producto: en claro.
Sobre ascua: todo en tinta.
Tamaños de la marca plana
Icono de app
Asomando desde el borde inferior.
02 · Color
Papel, tinta y una sola cosa cálida.
Dos fondos: papel para marketing, tablero para el producto. El ascua es la acción principal y nada más; la mantequilla es la voz de la mascota.
03 · Tipografía
Una serif tranquila y un texto que calla.
Geist Serif para titulares, en un solo peso. Satoshi para todo lo demás. La mono queda para rótulos, nombres de archivo y la terminal. «criterio» es la única palabra engordada y apretada.
Geist Serif 400 · −5 %
Tus referencias, escritas como decisiones.
Satoshi 400 · 500
Guárdalas, decididlas en equipo y pasádselas a vuestro agente.
Mono del sistema
por-que-existe.md
Geist Serif engordada · −6,5 % · solo la palabra
criterio
04 · Mascota
Dos orejas, un visor. Peluche blanco.
Tino tiene un cuerpo macizo, orejas cortas y un visor rehundido en la cara. Solo mueve las orejas y el visor, así cada gesto se lee igual a tamaño de icono. En toda la web es de peluche blanco; aquí puedes probar otros materiales.
Pásale el cursor: se le mueve el pelo
Material
Color
Fondo
Estado
Ángulo
El peluche blanco es el aprobado. Los demás son pruebas.
❯ /criterio:setup
Leí criterio.md y 1 carpeta
●Tipografía: serif grande en titulares
●Motion: sin decidir. Os pregunto.
✻ Baked for 15s
Tino en pixel art
El mismo conejo, en la terminal.
Es el sprite del plugin /criterio:setup: 22 × 20 píxeles, un solo color y sin antialias. Solo aparece donde se habla con el agente.
Lo que hace en la web
- Lee. Un haz recorre cada referencia y dice qué se queda.
- Presenta. Al pasar por una foto del equipo, anda hasta ella y habla.
- Duerme. En el pie cierra el visor del todo. Al pasar el ratón se despierta de un salto.
05 · Componentes
Un guiño al año 2000, nunca un disfraz.
Controles gruesos con borde de tinta de 1,5 px y bisel. Todo lo que es un objeto va dentro de un marco retro. La mascota habla en bocadillos de mantequilla.
Una sola acción principal por pantalla. Viven dentro del menú, abajo a la derecha.
Vota cada una. No se mueve hasta que vota todo el equipo.
Siempre pegado a Tino. Uno cada vez.
Tino se apoya encima del campo del correo en la cabecera.
Marcos de las referencias
Todas con el mismo alto. Cambian el ancho y el marco.
R12 · ohnotype.co
El equipo, en marco
En gris. Pasan a color y el marco a brasa cuando Tino presenta. Una pista en pantalla avisa del gesto.
Comentarios con cara
La serifa y el look de Granola.
Esto, para los titulares.
Siempre la foto real de quien comenta, no una inicial.
06 · Movimiento
Cada sección es una ventana que se maximiza.
El color no se funde ni se tapa. La sección nueva llega como una ventana retro, con su barra y su nombre de archivo, y crece a saltos hasta llenar la pantalla. Tres rectángulos de zoom van por delante, como en los Mac antiguos. Todo depende del scroll: al subir se deshace.
- Una pieza fuerte por pantalla. Lo demás se calla mientras se mueve.
- Atado al scroll lo que cuenta: el manifiesto se escribe y se borra al bajar y subir.
- En bucle solo las piezas del bento, y paradas si no se ven.
- Con movimiento reducido no hay ventana ni bucles: la sección aparece y el contenido queda quieto.
07 · Voz
Frases cortas. La mascota habla poco.
- El producto habla de tú. La mascota habla en primera persona y con pocas palabras.
- La mascota solo se refiere a lo que ya guardaste. No inventa gusto, no halaga, no insiste.
- Mayúscula solo al principio. Los botones empiezan por un verbo.
- Sin emojis. Las únicas ilustraciones son la mascota y las referencias de la gente.
- Las referencias de muestra son las de criterio.design. No se inventan.
08 · Estado
Qué está decidido y qué no.
- Aprobado para la landing en curso: titular, ventana que se maximiza, marco retro, Tino de peluche blanco y pixel art de la terminal.
- En uso, sin cerrar: La palabra «criterio», y Geist Serif y Satoshi frente al sistema anterior (Bricolage y Archivo), y si el conejo sustituye del todo a la criatura de tres ojos.
- Descartado para cambiar de color: tramado, píxel a píxel, hoja encima, bajar la luz y entrar por el visor.
- Anterior: brandbook de octubre, logo de píxeles y robot T-NO.