VOLUMA · sistema

Tokens y componentes

La fuente única de verdad. Todo lo que se ve en VOLUMA sale de esta página: la landing, el lab visual y las nueve superficies del venue. Si una pantalla usa un valor que no está aquí, la pantalla está mal. Los tokens viven como variables CSS en el :root de este archivo, así que esta página no documenta el sistema: es el sistema.

Marca

Un tetraedro visto por un vértice, con las tres caras separadas. No es un adorno geométrico: es el primer volumen posible, cuatro caras y cuatro vértices, y nada puede ser más simple y seguir siendo un cuerpo. Encaja con el nombre porque VOLUMA es volumen. Mueve el cursor: la nariz te sigue.

sobre negro
sobre papel
una sola tinta

La pose
Sale de una cuenta, no de girar hasta que se vea bien: rx 45° anula la componente Y del vértice (1,1,1), ry −35.264° manda el resto al eje Z, y rz −90° deja el canto plano arriba y la punta abajo. Esos tres números la reconstruyen si alguien la mueve.
El hueco crece al achicarse
20% en general, 22% en las versiones chicas, y el corte está en 64 px. No es un valor fijo porque abajo de cierto tamaño se vuelve subpíxel, las tres caras se fusionan y la marca pierde justo lo que la hace un volumen: medido contando islas de tinta, el piso a tamaño de favicon es 18%, así que el 22% va con margen. El módulo lo resuelve solo por tamaño y lo recalcula al cambiar la ventana.
El tope de inclinación
En esta pose las tres caras cercanas quedan apenas del lado visible. Pasando 25° en horizontal o 15° en vertical una se voltea, la silueta pasa de triángulo a cuadrilátero y la marca se rompe. Todo el movimiento del sistema vive dentro de ese límite.
Nunca se mueve sola dos veces
Varios isotipos en una página no son copias: cada uno mide el cursor desde su propio centro, así que el de arriba mira hacia abajo y el de abajo hacia arriba. Se monta con <canvas class="vl-marca"> y marca.js. Ver varios a la vez.
Nunca
El isotipo en wireframe: abajo de 32 px las aristas se vuelven ruido antes que forma. Sombrear las tres caras con tonos distintos: el volumen lo cuenta la costura, no la luz, y sombreado deja de leerse como gráfico. Girarlo más allá del tope. Y el favicon animado, que solo se mueve en Firefox y en la barra de pestañas se lee como notificación.

Color

Un fondo, tres tintas, un acento. El acento no decora, marca, y nunca hay dos acentos en la misma pieza.

Superficie

negro#0A0A0AEl fondo de todo. No es negro puro a propósito: el #000 aplasta el grano y en LED se lee como un hueco en la pantalla.
carbón#141417Superficie elevada: tarjetas, celdas, cualquier cosa que se apoye sobre el fondo.
línea#232326Bordes y divisiones. Nunca como relleno.
grafito#3A3A44Relleno secundario y estados apagados. Lleva un sesgo azul, que ahora trabaja doblemente a favor: es el frío que necesita el naranja enfrente para no verse solo.

Tinta

hueso#F2F2F2Tinta principal. No es blanco puro: a 100% vibra sobre negro y cansa en textos largos.
plomo#8E8E8EDatos, metadatos, todo lo que se consulta pero no se lee de corrido.
ceniza#5A5A5FTerciaria. Placeholders y texto que está presente pero no pide atención.

Acento

acento · brasa#FF5A1FEl único. Naranja con rojo adentro, para que lea a incandescencia y no a cono de obra, que es donde caen los naranjas puros. 6.35:1 sobre el negro, así que aguanta texto chico y también negro encima en botón.
acento sordo#D4501AEl acento apagado, para estados no activos. Calibrado a 4.68:1 para que siga aguantando texto chico. Evita usar opacidad sobre el acento: se ensucia contra el fondo.
Nunca
El acento como texto chico sobre papel. Medido: ningún naranja de esta familia pasa de 3:1 contra #F4F2EC. En fondo claro el acento sirve para rellenos y para la marca, y el texto va en negro.
Dónde vive
El acento marca lo que está vivo: el cue al aire, el estado conectado, el link. Es constante y se aprende como "VOLUMA", no como alarma.
Nunca
Dos acentos en la misma pieza. Acento como fondo de un bloque grande. Degradados de acento a otro color. Rojo o verde semántico: este sistema no tiene estados de error visual, porque no es una app, es un show.

Espacio

Escala de 4. No hay valores entre estos. Si algo pide 14px está mal medido y debe ser 12 o 16.

Tipografía

Dos familias. Geist para lo que se lee, Geist Mono para lo que se consulta: datos, cues, medidas, tiempos. Los tamaños grandes cierran el tracking y los chicos lo abren, porque el ojo lee distinto a cada escala.

titán · 76px
VOLUMA Solo el wordmark. Ningún otro texto usa este tamaño, y siempre lleva kerning óptico por pares.
alto · 34px
Títulos de sección Peso 500, no 700: el bold se reserva al wordmark.
medio · 20px
Subtítulos El escalón entre título y prosa.
base · 15px
Prosa en peso 300. El texto largo va ligero: sobre fondo negro, el peso normal se engorda ópticamente. Interlínea 1.6, máximo 70 caracteres por renglón.
dato · 13px mono
CUE 05 · LENTE ONDA · 124 BPM Todo lo que es medida, tiempo o identificador.
micro · 11px mono
VOLUMA · SISTEMA Ojos de sección y etiquetas. Tracking muy abierto, siempre en mayúsculas.
Kerning
El wordmark lleva kerning óptico por pares, idéntico en la landing, en el venue y aquí: VO −.022 · OL −.006 · LU −.014 · UM −.003 · MA −.020
Nunca
Más de dos pesos en la misma pieza. Cursivas. Mayúsculas en prosa. Mono para textos de más de una línea.

Componentes

Los pocos que hay. El sistema es deliberadamente pobre en componentes: es un show, no una aplicación, y cada control nuevo es una cosa más que puede fallar en vivo.

Botón
Estado
En vivo En espera Detenido
Campo
Dato
Tempo
124 BPM
Superficies
9
Campo
13733 × 1000 u

Reglas

Profundidad
Sale de la geometría, nunca del relleno. Ninguna forma es un degradado en sí misma: el volumen viene de proyección, oclusión y escorzo.
Movimiento
Nada gira en loop completo salvo que el giro signifique algo. Se prefiere el vaivén, que mantiene lo importante siempre a la vista.
Formato
Toda pieza tiene que sobrevivir en 1:6, la proporción de los banners del venue. Si solo funciona en 16:9, no entra al sistema.
Grano
Va grueso a propósito. En LED de 2.5 mm el grano fino desaparece y solo cuesta rendimiento.
Nunca
Sombras suaves. Glow como recurso. Degradados de arcoíris. Bordes redondeados grandes en piezas de pantalla. Emoji.