Banco de diseño del Sistema ABC
Un solo lugar para toda idea visual antes de decidirla: paletas, referencias, patrones, fotos. Nada de aquí está aplicado salvo que lo diga. Cuando una idea se toma, sale de esta página y entra al dibujo o a la nota; cuando se rechaza, se queda con su razón, para no proponerla dos veces. Las sesiones visuales leen este banco ANTES de dibujar.
Cada vista pequeña abre su versión completa con un clic; al lado va el enlace a la fuente. Las imágenes son trabajo de otros: material interno de referencia, nunca para una página pública ni publicada.
La paleta "Tangent", candidata para los dibujos y las notas
De este pin (el original es una animación; la imagen: versión completa). Colores MEDIDOS de la imagen, no transcritos, aproximados:
Tangent, series 047
El regalo escondidoNo es solo paleta: poleas unidas por una correa, sobre papel, con líneas finas de construcción: una máquina donde las partes se mueven juntas. La metáfora exacta de las cuatro partes movidas por el caso que las recorre. La estética de plano técnico honesto casa con "resultado verificado, nunca solo declarado".
Referencias de forma, 14-08-2026
Cada una con lo que es, para qué podría servir, y qué NO se traslada.
Cuatro círculos que se solapan
El ikigai: cuatro círculos pastel, el centro nombrado, y CADA SOLAPE entre vecinos también nombrado.
Para quéGeometría alternativa del disco: las cuatro partes como círculos que se tocan, los empalmes DICHOS en los solapes, el caso en el centro. No se traslada: las etiquetas de estados de ánimo.
Los actores en racimos
Mapa de actores en burbujas pastel, agrupadas por familias alrededor de un centro común.
Para quéLa matriz de intervinientes vuelta dibujo: los 14 actores de las cadenas, en racimos por parte. No se traslada: la densidad de texto por burbuja.
Cuatro cuadrantes con burbujas
Anillo central y cuatro cuadrantes de color, cada uno con sus piezas como burbujas; el tamaño dice la importancia.
Para quéEl disco con los módulos VISIBLES dentro de cada parte, sin perder la forma de cuatro. No se traslada: los colores corporativos duros.
El sistema entero en un círculo
Subsistemas dentro de un gran círculo, flechas de flujo, y arcos de color en el borde que nombran las dimensiones.
Para quéLos arcos del borde para el anillo exterior del disco; los flujos internos para los empalmes. No se traslada: la cantidad de flechas.
Relaciones en círculos suaves
Círculos pastel que se tocan, fichas con icono de línea, conexiones punteadas. Calma y elegancia.
Para quéEl lenguaje suave para dibujar cómo se hablan los módulos, sin flechas duras.
Pétalos con escenas
Seis pétalos alrededor de un centro, y dentro de cada uno una ESCENA ilustrada, no un icono: gente, árboles, ríos.
Para quéPiel alternativa del disco: cada parte contada con una escena del territorio, no con etiquetas.
El camino con estaciones
Una carretera naranja recorre un pueblo isométrico; cada curva es una etapa fechada de una historia.
Para quéLos recorridos por usuario: la cadena del Promotor (postularse · acreditarse · reportar · avalar) como camino.
Los bucles causales
Zonas de color con flechas de causa y efecto entre decenas de variables. Riguroso, y denso.
Para quéAviso más que modelo: así se ve el sistema cuando se dibuja TODO. Sirve para anexos técnicos, nunca para la primera página.
La voz fotográfica, 14-08-2026
Tres fotos de Frank para el ánimo de las notas: el verde profundo, la niebla, el río, la gente pequeña dentro de un paisaje grande.
La montaña con niebla
Ladera cafetera al amanecer, pueblo pequeño, camino que serpentea, niebla en los valles.
Para quéFondo de héroe de las notas: el territorio como riqueza, no como problema.
El río en la selva
El río que serpentea por la selva al atardecer; una canoa diminuta lo navega.
Para quéLa escala correcta: la persona pequeña dentro del recurso enorme. Sirve a la parte de recursos.
Las guacamayas
Biodiversidad en primer plano (guacamayas, bromelias) y el río con canoa detrás.
Para quéLa B de biodiversidad con rostro.
Qué se traslada y qué no: se toma el ÁNIMO (el verde profundo, la niebla, la persona pequeña en el paisaje grande). Los archivos mismos parecen generados o muy procesados y no tienen crédito: para páginas públicas del gobierno se usan las 36 fotos CC con crédito de la galería del proyecto, buscando ahí estas mismas escenas.
Tableros de monitoreo, 14-08-2026
Ideas de Frank para los tableros: la Sala de Situación ABC, el Tablero de Gobierno, el monitoreo de la ejecución.
El tablero claro en tarjetas
Rejilla de tarjetas blancas: salud del sistema, alertas por gravedad, series de tiempo pequeñas, estados en verde/ámbar/rojo.
Para quéEl vocabulario de la Sala de Situación ABC: una tarjeta por pregunta, el semáforo de estados, las series pequeñas. No se traslada: el tema tecnológico (aws, logs) ni el inglés.
La curva sobre el bosque
Tablero oscuro donde la serie de datos está dibujada SOBRE la fotografía de la montaña y el bosque.
Para quéLa idea grande para la pared del mapa: los datos dibujados sobre el territorio mismo, no junto a él. El pulso del recurso sobre su propia foto. No se traslada: el archivo (generado, texto sin sentido) ni el tema oscuro (la casa es tema claro).
El tablero de pared, real
Dos paneles oscuros COLGADOS en una pared de verdad: a la izquierda la lista de estados con el responsable en foto; a la derecha series, llegadas y el clima de hoy.
Para quéLa Sala de Situación como lugar físico: la propuesta de las tres paredes ya existe en el mundo. La lista con CARA del responsable sirve tal cual a "qué requiere decisión". No se traslada: el tema oscuro.
El tablero de vidrio, claro
Tema CLARO: tarjetas de vidrio esmerilado flotando en una sala luminosa, números grandes, calendario en filas, mapa del mundo en tinta.
Para quéLa respuesta en tema claro (la casa) para la Sala: tarjetas suaves, un número grande por pregunta, el calendario de compromisos. No se traslada: el ruso ni el desenfoque excesivo.
El vidrio que se toca
Pantalla transparente flotante, teal sobre oscuro, un dedo tocando la serie. Imagen generada (texto sin sentido).
Para quéSolo el ánimo del CLIC QUE BAJA: el presidente toca el dato y el dato se abre. No se traslada: el archivo, el neón, el oscuro.
El monitoreo cálido
El tablero vive en un escritorio con luces cálidas, cuaderno y café. Imagen generada.
Para quéEl tono: monitorear no es una sala de guerra, es un lugar de trabajo calmo. Ánimo para las pantallas de la autoridad ambiental, no para la Sala presidencial.
Los mejores del mundo, 23-08-2026. Dieciséis tableros capturados en vivo, con el pantallazo real de cada producto. Cada tarjeta trae qué es, la mecánica que se roba, y qué no se traslada. El espíritu que pidió Frank: Palantir, la información que baja clic a clic hasta la persona.
Palantir Foundry: la alerta que es un objeto
Aplicación real de Foundry en tema claro. Filtros con su cuenta a la izquierda (abiertas 230, escaladas 1, resueltas 69), la tabla de alertas en medio, la ficha del objeto a la derecha.
La mecánicaLa fila no es una fila, es un objeto. Su ficha abre Propiedades y, debajo, Enlaces: el vuelo, el aeropuerto de salida, el de llegada, cada uno clicable. Se sigue el hilo sin cambiar de pantalla. Y arriba hay un botón que actúa (escalar, desescalar): el tablero no termina en un gráfico, termina en una decisión tomada por alguien.
No se trasladaEl inglés y el vocabulario de aviación. Nuestros objetos son el caso, el predio, el trámite, el promotor, la autorización.
Palantir: el estante de los objetos
La pantalla de entrada de Object Explorer. Antes de cualquier gráfico, la lista de los tipos de cosa que existen, cada uno con cuántos hay: aeronaves 7,28 mil, comerciantes 2,47 mil, reservas 25,51 mil.
La mecánicaEl sistema empieza por decir de qué está hecho el mundo y cuánto hay de cada cosa. El usuario elige la cosa, no el reporte. Para el ABC: predios, cadenas, promotores, autorizaciones, cada uno con su cifra, como puerta de entrada de todos los tableros.
No se trasladaEl agrupamiento por familias de plataforma. El nuestro se agrupa por las cuatro partes del sistema.
Centro de Operaciones de Río: la ciudad en un número
El centro de control que IBM montó para el alcalde de Río, el precedente latinoamericano más conocido. Su página pública abre con dos placas: CIUDAD EN ESTADIO 1, en verde, y CALOR 1, en azul.
La mecánicaLa ciudad entera cabe en un número del 1 al 5, con su color, y al lado un botón que explica qué significa cada estadio. Cualquiera sabe en un segundo si hay que preocuparse. Debajo, los avisos con la hora exacta.
No se trasladaLa escala es de emergencias (lluvia, calor). La nuestra diría el estado de la ejecución, y esa escala hay que definirla y publicarla antes de encender la placa.
TerriData: el municipio con cara
La ficha territorial del DNP. Se escoge una de 1.135 entidades y se abre su página: foto del lugar, mapa localizador con el punto rojo, código DANE, región.
La mecánicaEl territorio recibe una cara antes que una cifra. La foto del río en Leticia y el punto en el mapa dicen dónde estamos parados, y eso vale más que un encabezado con el nombre.
No se trasladaLa ficha termina en tres botones de descarga (PDF, XLSX, TXT). Los indicadores no se pueden seguir en pantalla ni bajar hasta un caso. Ahí exactamente el nuestro tiene que ser mejor, y podemos citarlo.
Sinergia: el reloj del Plan Nacional
El seguimiento del Plan Nacional de Desarrollo. Un reloj con el avance total en 82%, cuatro barras por tipo de pacto, y una barra por cada sector del Estado.
La mecánicaEl país entero en un solo porcentaje, y ese porcentaje se abre en sus partes sin cambiar de página. Es la forma que un Presidente ya reconoce.
No se trasladaLa fecha de corte dice 31/12/2022 y la página avisa que el servicio no está disponible. Un tablero que deja de alimentarse deja de existir. La promesa del nuestro es el dato de ayer, y decirlo en pantalla.
Johns Hopkins: el tablero que el mundo leyó sin manual
Captura real del 25 de febrero de 2020. Confirmados en rojo gigante a la izquierda, mapa de círculos proporcionales en medio, muertes y recuperados a la derecha, la lista de países en la primera columna.
La mecánicaTres columnas y una sola pregunta por columna. El tamaño del círculo dice cuánto sin leer un número, y al tocarlo sale la ficha del país. Abajo a la izquierda, la hora exacta de la última actualización, siempre a la vista.
No se trasladaEl tema oscuro, porque la casa es tema claro. Y el rojo como color único: nuestro semáforo necesita verde y ámbar para decir que algo va bien.
fuente: captura CC0 en Wikimedia Commons, tablero CSSE de Johns Hopkins
.jpg){kind=link}
Our World in Data: el mismo dato en cuatro vistas
Un gráfico público de esperanza de vida. A la derecha, el selector de países con el valor de cada uno junto al nombre; abajo, la línea de tiempo con botón de reproducir.
La mecánicaCuatro pestañas sobre el mismo dato: Tabla, Mapa, Línea, Barras. Cambia la vista, no la información, así que nadie tiene que aprender nada. Debajo van la fuente, la fecha de la última actualización y la fecha de la próxima, que es la promesa de que seguirá vivo.
No se trasladaLa cantidad de texto explicativo bajo el gráfico. Nuestras páginas de público dicen menos.
USAFacts: el país contado en párrafos
El estado de la nación con cifras oficiales, tema por tema numerado (04 Educación, 05 Migración, 06 Defensa). Fundado por Steve Ballmer.
La mecánicaCada tema abre con un párrafo en palabras llanas que dice qué pasó, luego un gráfico con su fuente y su botón de descarga, luego una puerta para entrar más hondo. La frase manda, el gráfico confirma.
No se trasladaEl desplazamiento largo y el rosa de marca. Nuestra vista de público cabe en una pantalla.
FlightRadar24: cada punto tiene expediente
Todos los aviones del mundo en vivo. En la captura, el cielo de Colombia entre Medellín, Bogotá y la Amazonía.
La mecánicaCada punto es un objeto con expediente: se toca y salen matrícula, ruta, altitud, historia del vuelo. Y a la izquierda dos listas ordenan lo mucho en poco: los vuelos más seguidos ahora y las demoras de aeropuerto de este momento.
No se trasladaEl tema oscuro y la publicidad. La lista de "lo más seguido" sí sirve: dice barato dónde está mirando la gente.
NASA FIRMS: la alerta es un lugar y una hora
Los focos de calor que los satélites detectaron en las últimas 24 horas, dibujados sobre el mapa. En la captura, Colombia y la Amazonía en rojo.
La mecánicaLa alerta no es un renglón de tabla, es un punto en el suelo con su hora. Los botones HOY, 24 H y 7 DÍAS cambian la ventana de tiempo sin cambiar de pantalla, y cada punto lleva satélite, confianza y hora de paso, así se sabe cuánto creerle antes de mandar a alguien.
No se trasladaEl fondo satelital oscuro y el panel de capas técnicas. El promotor necesita el punto sobre un mapa claro con nombres de veredas.
Electricity Maps: del mapa al país en un clic
La red eléctrica del mundo en vivo, en tema claro, coloreada por gramos de CO2 por kWh. Al hacer clic en Colombia se abre su panel.
La mecánicaEl clic en el mapa abre el país, y el país descompone el número en su origen: 206 gCO2, 72% libre de carbono, 72% renovable, y la mezcla fuente por fuente. Abajo, una barra de tiempo cada quince minutos que se puede reproducir hacia atrás para ver cómo llegó ahí.
No se trasladaLa escala de color con siete escalones. Para el público conviene dividirla en menos.
USGS: el color es el juicio, no el valor
Las estaciones de caudal de Estados Unidos en un mapa, cada una con su punto de color, y la leyenda abierta al lado.
La mecánicaEl color no dice cuánta agua hay, dice el percentil contra la propia historia de esa estación en ese mismo día del año. Verde significa "lo normal para aquí y para hoy". Una cifra cruda se vuelve juicio sin que nadie tenga que explicar nada, y eso es lo que necesita un alcalde.
No se trasladaLa leyenda con doce categorías. Para nuestro público, tres o cinco.
Global Nature Watch: el país contado como noticia
El tablero de bosque por país, aquí Colombia, con el mapa de pérdida de cobertura al lado y las pestañas de cobertura, cambio, uso, incendios y clima. Antes se llamaba Global Forest Watch.
La mecánicaLa portada del país es una frase con las cifras en negrita dentro: en 2020 Colombia tenía 67 Mha de bosque natural, el 59% de su superficie; en 2025 perdió 140 kha. Se lee como una noticia, y arriba un desplegable de "seleccione una región" repite la misma frase para un departamento.
No se trasladaLa banda oscura de la cabecera y el inglés.
Grafana: la cifra con su historia detrás
Un tablero de negocio en Grafana, forzado a tema claro: registros 549, entradas 3.483, salidas 433, llamadas de soporte 86.
La mecánicaLa gramática que ya usa todo el mundo: número grande, la serie del mismo dato dibujada detrás en color muy suave, y el color del número dice si va bien o mal. Las 86 llamadas de soporte están en rojo y el resto en verde, así que el estado se lee antes que la cifra.
No se trasladaEl tema por defecto es oscuro (aquí forzado a claro con el parámetro de la dirección) y el vocabulario de servidores.
Performance.gov: el gobierno publica su propia nota
El gobierno federal de Estados Unidos publicando cómo lo califican sus propios usuarios: la confianza en los grandes prestadores de servicio, trimestre por trimestre.
La mecánicaLa página abre con una frase, no con un gráfico: de julio a septiembre de 2024 se preguntó a 312.014 usuarios, y en 27 de 49 servicios al menos el 75% dijo que confiaba en la entidad. La medida es la confianza de quien hizo el trámite, no la cantidad de trámites hechos.
No se trasladaEl gráfico de burbujas por servicio, que obliga a leer tres ejes a la vez.
Bloomberg Terminal: densidad para quien entra todos los días
Una terminal real fotografiada en el aeropuerto de London City: la pantalla de valoración de una acción, y debajo el teclado de teclas de colores.
La mecánicaLa densidad no molesta cuando quien mira es profesional y la pantalla siempre está en el mismo sitio. Cada vista tiene un código corto que se teclea (78 Overview, 23 Comp Sheets, 24 Markets), así el experto salta directo en vez de navegar. Para nosotros: un atajo con nombre para el funcionario que entra a diario.
No se trasladaEl negro con texto naranja y verde, y la idea de aprenderse códigos. El producto en vivo no se pudo capturar: el sitio de Bloomberg bloquea al navegador automático.
Las cinco mecánicas que se repiten. Un solo número arriba, y ese número se abre. Cada punto es un objeto con expediente. El color dice el juicio, no el valor. La frase antes que el gráfico. La hora del dato a la vista, y una acción al final. Detalle y ejemplos: knowledge/tableros-referencias.md.
A la espera de Frank
- La línea de tiempo en 9 pasos (20-08, Frank: "I put here ideas… don't look at them for the time being"). Plantilla de infografía: nueve pasos en tres filas, cada paso con su círculo de icono en degradado pastel (naranja → violeta → turquesa), título en versalitas grises y párrafo corto centrado; una serpentina de flechas muy tenue une las filas por detrás. Para qué (posible): una piel de índice por estaciones: el recorrido del territorio o el guion del disco contados como pasos con icono. Guardada sin aplicar, orden de Frank: no mirarla por ahora. Falta el archivo: llegó pegada en el chat del 20-08 y no está en el disco; pedir el arrastre si se retoma.
- Las letras ABC llenas de foto (18-08, Frank: "pon esto en los folders nuestros, vamos a ver cómo lo utilizamos"). A de agua (mar), B de biodiversidad (bosque), C de comunidades (gente saludando): el nombre del sistema contado sin palabras; candidata a cabecera de la nota o de la portada. Falta el archivo: llegó como imagen pegada en el chat y no está en el disco (buscado Desktop, Downloads y los repos de Celia); pedido a Frank arrastrarlo.
- El disco "diseño 1" de Celia (18-08, encontrado en el Desktop, copiado al proyecto). Rediseño del dibujo de cuatro cuadrantes: paleta nueva (rosa autorizaciones · verde recursos · oro apoyo · azul empresas), la ilustración del territorio dentro del cuadrante verde, rótulos rectos y curvos.
Fuente: assets/disco/sistema-abc-diseno-1-celia.svg (28 MB, con la foto incrustada). Ojo: aún dice AVAL TERRITORIAL (el léxico vigente es ADOPCIÓN Y VALIDACIÓN). Para qué: candidata a nueva cara del dibujo, verdicto de Frank pendiente. - ADOPTADO (17-08, pantallas móviles): la fusión referencia-de-Frank + gramática B. De su referencia (captura en el chat del 17-08, sin archivo aún): la foto del territorio a sangre completa, el texto blanco encima, la hoja blanca que sube con esquinas redondas, el botón amarillo único, la fila de cifras, la lista de requisitos con iconos de línea. De la gramática B: Fraunces en los títulos, DM Sans en los datos, el velo verde bosque sobre la foto, pastillas escarchadas, radios generosos. NO se toma de la referencia: la marca "Firme por la Patria" ni el tigre (ahí van las instituciones reales). Primera aplicación: p1-convocatoria. Fotos: siempre de la galería CC.
- Para el dibujo del disco (sesión visual, compuerta modern-ui) sigue abierto: recomendación del asiento, paleta Tangent + geometría de los cuatro círculos que se solapan, con los empalmes nombrados en los solapes.
Probado y rechazado, con su razón
Todavía nada. Cuando algo se pruebe y se rechace, queda aquí con la razón, para no proponerlo dos veces.
Dónde vive cada cosa
- Este banco es SOLO del Sistema ABC. Lo que sirva a todos los proyectos se muda al estudio (9 - System/ui-ux) y aquí queda una línea diciendo a dónde fue.
- El guion del disco (lo que dice el agente, parte por parte): guion-disco.md
- La nota madre aprobada: Sistema ABC 13 agosto 1439 · la Nota 2 (expresiones): nota-2.html
- El dibujo de las cuatro partes (provisional): simon-del-sistema.html · el mapa funcional: mapa-funcional.html
- La portada de todo: Sistema ABC Index · fotos CC con crédito: la galería