Este documento aplica un sistema que no es suyo.La estructura y el comportamiento los define Ontikos · Sistema de funcionamiento — 28 reglas, ninguna nombra el negocio. Aquí van los valores: fichas, tipografía, estados, piezas y pantallas de RetiCash.
Reconciliación con Ontikos · 4 sep 2026
Al escribir el sistema de funcionamiento aparecieron seis contradicciones
con este documento. Cinco se resolvieron a favor de Ontikos y una en contra — y esa última es la
que importa, porque prueba que la regla de entrada funciona en las dos direcciones.
Regla
Decía
Qué pasó
03.1
«las cifras suben a la cabecera»
Corregida. La barra queda limpia; las cifras bajan al contenido. La medición de reversibilidad a 375 px sigue valiendo.
03.2
«si el alto baja de ~700 px el armazón se relaja y deja scrollear», y una tabla de tres gramáticas
Ambas derogadas por 01 y 17. La tabla se deja tachada: legitimaba la tierra de nadie de 256 px.
03.3
reparto «cabecera · raíl de señales · trabajo»
Reemplazado por «lista · trabajo · contexto». Sobrevive el desempate: si se puede pulsar, no es señal.
08.0
«las celdas vienen de ahí» · IB y thinkorswim por igual
Corregida. thinkorswim se descarta: su densidad viene del scalping. Se suma el panel de contexto permanente, que es el hallazgo mayor.
08.2
«una cifra promovida no se repite»
Derogada. Sin cifras promovidas se queda sin sujeto. Existía para tapar que la composición adivinaba.
13.2
«el bloqueo no es un aviso: es una compuerta»
Ganó esta regla. La tabla de superficies de Ontikos decía «banner de la región» y estaba mal: un banner deja los controles vivos debajo. Se corrigió Ontikos.
Las demás reglas —fichas, tipografía, estados, lenguaje,
piezas, pantallas— no contradicen nada: son los valores que este producto le pone a la casa.
RETICASH
Sistema · v5
14 secciones · 3 sep 2026
Das Kapital One · sucede al Design System v4 y expande la sección de UI del documento maestro
El sistema, escrito desde lo que opera
Este documento gobierna la interfaz de RetiCash. Se diferencia de los tres que lo
preceden en dos cosas: cada regla trae la medición que la sostiene, y todo lo que
aparece dentro de un bloque de muestra está pintado con las hojas de producción,
no dibujado aquí. Si un ficha cambia, esta página cambia con él.
Cada regla lleva marcada su portabilidad. Las marcadas
Portable viajan a cualquier ERP o CRM sin traducción; las
marcadas De este producto no. Y por la regla 00.1, lo que
todavía no se puede verificar contra el producto lleva
Propuesta: es norma escrita, no norma cumplida.
00Fundamentos
Qué gobierna este documento, de dónde saca su autoridad, y bajo qué reglas
una pieza entra o no entra al sistema.
Qué manda sobre qué
Materia
Manda
Por qué
Ontología, vocabulario, estados, economía
Documento maestro de MM
Pasó la prueba de la operación real
Composición de escritorio
Design System v4 y sus wireframes (v33 · v35 · v21 · v22 · v20)
MM nunca desarrolló el escritorio: por urgencia se saltó esos wireframes
Todo lo demás
Lo verificable
Si no se mide contra el código que corre, no es norma
00.1PortableOrigen · v4 + maestro
Una regla que no se puede verificar no es una regla: es una propuesta, y entra marcada como tal.
Corrige el modo de falla de los tres documentos anteriores. El v4 manda
border-radius:0 en operador y producción sirve tres piezas con radio; manda
«Pasos» y el cliente dice «Puntos» veintiséis veces. Nada lo detectó porque ninguna regla
traía con qué comprobarse.
Verificación · 3 sep 2026
.ubtn 7px · .modal 16px y 4px · .ord-empty 18px — cuatro piezas de operador fuera de norma, medidas sobre app.css de producción.
00.2PortableOrigen · demo index · diseño ontológico aplicado
Una pieza entra al sistema por su verbo. Si no se traza a una acción, no pertenece.
Cada pantalla responde una pregunta de negocio y habilita una acción. De
ahí se sigue —no es preferencia estética— que haya exactamente una acción primaria por
estado de pantalla: si hay dos, son dos pantallas.
Verificación · 3 sep 2026
Contadas las acciones primarias visibles por pantalla, sobre las páginas
que sirve producción. Vendedor: 0 · 0 · 0 · 1 · 0. Administrador: 0 · 1 · 0 · 0 · 0.
Ninguna pantalla pasa de una. Cumple.
Muestra viva · una acción primaria, dos salidas · pintado con app.css de producción
La destructiva se confirma con la consecuencia visible · regla 4
La cadena de compromisos
El ciclo del negocio: ninguna etapa procede si la anterior no ocurrió. Toda
pieza del sistema cuelga de uno de estos cuatro actos.
Paso 1 · Admin del negocio
Publicar tipo de cambio
Costo del día y pisos de compra/venta · define los límites del vendedor
↓
Paso 2 · Vendedor
Registrar orden
Compromiso de precio con un cliente · el extra que defiende sobre el límite es su comisión
↓
Paso 3 · Cajero
Ejecutar en caja
Entrega o recepción de efectivo · puede ser parcial · produce la utilidad real
↓
Paso 4 · Cajero
Cuadrar turno
Declaración de inventario físico · cierre del día operativo
Las cinco reglas de acción
#
Regla
1
Máximo un botón primario rojo por estado de pantalla
2
Si está bloqueado, la razón está visible
3
El estado de la pantalla es inequívoco en todo momento
4
Las acciones destructivas se confirman con la consecuencia visible
5
El feedback es inmediato: nadie duda si su acción fue recibida
01Ontología aplicada
Objetos con máquina de estados. La regla de oro: el estado define qué
acción es posible ahora. La interfaz no decide qué se puede hacer — lo lee.
01.1PortableOrigen · Palantir, vía maestro
Objetos explícitos con máquina de estados. El dato deriva de la ontología, no al revés.
Cliente, orden, ejecución, centro, tipo de cambio, tesorería, turno.
Lo que la pantalla ofrece en un momento dado es función del estado, no del diseño.
Frontera declarada
Tomamos la disciplina, no el motor: es una aplicación gobernada por ontología, no un motor de ontología en tiempo de ejecución.
La cadena es una conversación para la acción donde cada acto habilita el
siguiente. Los estados terminales —cancelada, caducada, no-show— modelan los
quiebres de esa conversación, y por eso merecen tanta interfaz como el camino feliz.
Frontera declarada
Tomamos el espíritu —compromiso, quiebre, acción situada—. NO implementamos el protocolo formal de petición / promesa / cumplimiento / aceptación.
Estados de la orden · y qué habilita cada uno
Muestra viva · las insignias de estado, con las clases del producto
pendienteparcialcompletacaducadacanceladano-show
Camino
en la base
en el maestro
Qué habilita
Viva, sin ejecuciones
pending
pendiente
Ejecutar · cancelar · marcar no-show
Viva, ejecutada a medias
partial
parcial
Ejecutar el saldo · cancelar
Cerrada, cumplida
completed
completa
Solo lectura
Cerrada, venció
expired
caducada
Solo lectura · el precio se liberó
Cerrada, cancelada
cancelled
cancelada
Solo lectura · definitiva y auditable
Cerrada, no se presentó
no_show
no_presentado
Solo lectura · libera la reserva
Deriva detectada · 3 sep 2026
El maestro nombra los estados en español y la base los guarda en inglés.
Manda la base, porque es el hecho; el maestro debe actualizarse. Lo mismo con los
roles: administrador_negocios en el maestro,
business_admin en app_user.
límite — el piso por debajo del cual el vendedor no puede pactar («frontera» en código, «Límite» en interfaz) extra — el incremento que el vendedor defiende sobre el límite margen — distancia total del precio contra el costo de fondeo
utilidad = monto × margen comisión_vendedor = monto × extra × comisión_pct utilidad_negocio = utilidad − comisión_vendedor
comisión_vendedor — sale del extra defendido, no del volumen: gana más quien defiende mejor precio utilidad_negocio — lo que queda para el negocio, ya descontada la comisión
01.3De este producto
Orden y ejecución son cosas distintas, a propósito.
La orden es el compromiso de precio; la ejecución es el hecho de caja.
La brecha entre ambas es información de negocio, no un error. Lo que sí viaja a
otro ERP es la disciplina: que la interfaz no calcule nada que la ontología no defina
primero.
02Adopción de un sistema externo
Cómo entra Carbon —o cualquier otro— sin que la casa pierda su idioma. Es la
sección más portable del documento y no existía en ninguno de los tres anteriores. Cada
cláusula costó una corrección medida.
02.1PortableOrigen · esta migración
La regla de adopción, en tres cláusulas
1. Si la plataforma ya tiene la pieza, gana la plataforma. 2. El sistema externo entra solo donde la hoja de la casa no llega. 3. Si la idea del sistema externo es mejor, se construye con los materiales de la casa.
Por qué la tercera cláusula
El aviso accionable —que la alerta termine en un verbo— es idea de Carbon y es buena. El botón, en cambio, es el .ubtn de la casa. La idea se adopta; la pieza, no.
Muestra viva · la tercera cláusula: idea de Carbon, pieza de la casa
2 clientes sin sobreprecio asignado — no cotizan
Lo que entró, y qué resolvió
Pieza
Qué resolvió
Rejilla de 16 columnas
Los ejes. Nada flota, la marca cae en el mismo eje del contenido, cero desborde a cualquier ancho
UI Shell · barra global + riel
El esqueleto de escritorio: la barra cruza toda la pantalla, el riel arranca debajo, el contenido donde termina el riel
Panel lateral
El detalle entra por la derecha en vez de bloquear la estación con una caja centrada
@carbon/charts
Eje, escala, globo de datos y línea de meta. Antes eran div con altura
Esqueletos de carga
El parpadeo en blanco mientras llegan los datos
129 iconos
Recurso, no reemplazo: solo donde la casa no tiene el suyo
Mapeo de fichas--cds-*
Que sus piezas hablen el idioma de la casa, en claro y en oscuro
Lo que se devolvió — con la medición que lo devolvió
Esta tabla vale más que la anterior: es la prueba de que la regla funciona.
Adoptar un sistema entero sin devolver nada es exactamente el modo de falla que hay que evitar.
Se probó
Qué midió
Qué volvió
cds--number
Quitaba el borde del campo
RC.stepper de la casa · dos idiomas para un control es uno de más
toggletip
Salía transparente y en mayúsculas
.hlp-pop del original
c4p--page-header
Barra gris pegajosa que robaba altura
Rechazado
Iconos de navegación
Al lado, mismo glifo: equivalentes
Se quedan los del original · manda la cláusula 1
Medidas en móvil
Hacían ver la barra de pulgar débil
La barra del original, con icono y rótulo
Ritmo uniforme de 16 px
Aplastaba la jerarquía (4 · 10 · 18–22) y alargaba la página 13 %
Manda el margen que cada bloque ya trae
Las trampas · medidas, no supuestas
Muestra viva · la trampa del relleno gris · izquierda como la deja Carbon, derecha como debe verse
relleno #525252
trazo 2 px en tinta
Trampa
Síntoma
Antídoto
Fichas del tema ausentes
La mitad de las piezas no se ve: var(--cds-popover-background-color, var(--cds-layer)) no resuelve a nada
Copiar el bloque de fichas del tema al :root antes que nada
Relleno gris en la barra global
Rellena de #525252 todo icono, incluidos los de trazo de la casa
Separar por atributo: svg[stroke="currentColor"] hueco, svg[fill="currentColor"] relleno, ambos en tinta
Física contra lógica
width e inline-size se resuelven por separado: gana la suya aunque usted tenga más especificidad
Usar el mismo nombre de propiedad que declara el sistema externo
Gráficos que dependen de fotogramas
Sin requestAnimationFrame quedan dibujados y vacíos: barras con geometría correcta y opacidad 0,015
Comprobar cuerpo, no presencia: un path.bar puede existir con ancho y alto 0
Peso del catálogo
1 MB de hoja para una fracción usada
Empaquetar desde las fuentes y podar solo con medición de uso real
Nota de portabilidad
Toda esta sección viaja tal cual. Cambie «Carbon» por el sistema que sea y
las tres cláusulas, la tabla de devoluciones y las cinco trampas siguen aplicando. Es la
sección que hay que leer antes de adoptar nada.
03 · Las dos gramáticas
El mismo portal, dos idiomas
Muestra viva del vendedor a 375 px requiere la aplicación servida
375 px · documento · una región scrollea
Muestra viva del vendedor a 1440 px requiere la aplicación servida
1440 px · terminal · celdas de cifra, raíl de señales de 296, columna de trabajo con scroll propio y barra de estado
03Las dos gramáticas
Una sola página, dos idiomas. En el teléfono manda el documento; en el
escritorio, la terminal. No es el mismo diseño ensanchado: es otro idioma.
Documento · teléfono
barra · marca · reloj · acciones
barra de pulgar · 5 destinos
Terminal · escritorio
marcaTC 16.68ganadovolumenopsquién
riel
raíl de señales 280–296
columna de trabajo · scroll propio
barra de estado · qué falta para actuar
03.1PortableOrigen · wireframes v33 / v20
El operador trabaja de pie, en una estación, una operación a la vez. Lo que está bajo el pliegue no existe en el instante de decidir.
De ahí se sigue todo: la navegación es estado direccionable y no scroll, y el trabajo ocupa una sola columna. Corregido el 4 de septiembre: las cifras no suben a la cabecera. La barra queda limpia —marca, buscador, usuario— y las cifras bajan al contenido como tarjetas. Es la respuesta de Carbon, y coincide con la de IB, que pone dos y no siete. En el teléfono la
premisa se invierte: el pulgar recorre, y el documento es el idioma correcto.
Construida el 4 de septiembre de 2026 en el portal del vendedor. El
administrador sigue en gramática de documento: ahí la regla todavía es norma escrita, no
cumplida.
Verificación · 4 sep 2026
Lo construido el 4 de septiembre y hoy superado: 7 celdas de cifra en la cabecera · raíl de señales de 296 px · columna de trabajo de 1094 px con scroll propio (1998 de alto contra 816 visibles) · barra de estado · 0 desborde. A 375 px: sin terminal, 12 columnas, barra de pulgar cerrando en 812, reversible en los dos sentidos — eso sigue valiendo. Lo que no vale es el reparto de arriba: las celdas se retiran y el raíl de señales lo reemplaza el reparto de tres regiones de Ontikos 02.
03.2PortableOrigen · defecto medido en el wireframe
overflow:hidden solo es disciplina si la pantalla cabe.
Con alto fijo y sin regiones que declaren su scroll, en un portátil de
768 px la fila de acción queda cortada — y cortada es un fallo, no una decisión. La regla: el armazón es fijo y cada región declara su propio scroll — que es hoy Ontikos 01, la única regla del tronco común. Corregido: la cláusula de escape que decía que «si el alto útil baja de ~700 px el armazón se relaja y deja scrollear» queda derogada: contradice la regla 01. Con poco alto no se relaja el armazón — se pliega una región, en el orden declarado por Ontikos 08.
Verificación
En v33 el raíl de señales ya corrigió: pasó de 280 a 296 px y ganó su propio overflow-y:auto. El resto de las regiones sigue sin declararlo.
Dónde cambia el idioma
Esta tabla declaraba tres gramáticas en tres anchos. Eso no es una norma:
es el defecto que Ontikos 17 prohíbe — dos fronteras son una tercera gramática que nadie
diseñó y por lo tanto nadie probó. Se deja a la vista, tachada, porque el sistema anterior la legitimaba y conviene que se
vea de dónde salió la tierra de nadie de 256 px que hoy marca el verificador en rojo.
ancho
Gramática
Estado
< 66 rem · 1056 px
Documento
vale · sistema de una región
≥ 66 rem
Terminal sin raíl de señales
derogada · es la tierra de nadie
≥ 82 rem · 1312 px
Terminal
vale · pero la frontera baja a un solo umbral
Pendiente de decidir: en qué ancho queda la frontera única. Si baja a
1056 hay que reordenar el reparto para que quepan tres regiones; si sube a 1312, entre 1056 y 1311 manda el documento entero,
sin celdas ni riel ni barra de estado.
03.3Portable
La regla de reparto · corregida
Reparto anterior, derogado: cabecera de cifras + raíl de señales + trabajo. La cabecera de cifras se retira y el raíl de señales queda absorbido por el reparto de tres regiones. Reparto vigente:Lista — lo que se recorre para elegir. Trabajo — lo que cambia por acción, y lleva las pestañas. Contexto — lo seleccionado, con sus dos acciones; no cambia al cambiar de pestaña (Ontikos 06) y es la última en plegarse (Ontikos 08). Lo que sí sobrevive del reparto anterior es el desempate: si se puede pulsar, no es señal. Y una condición que impide
operar no va a un raíl: va a una compuerta (13.2).
Verificable en el código
Lo que de verdad actúa queda marcado con data-acc="1", y de ese marcador cuelgan los estados de hover y pulsación. Marcar por clase produjo una promesa falsa: una fila inerte que se iluminaba.
04 · Fichas
Trece fichas sostienen todo el producto
--surf
--surf2
--surf3
--bg
--ink4
--ink3
--ink2
--ink
--red
--danger
--amber
--green
--blue
Pintados con las variables de app.css de producción · si un ficha cambia, esta banda cambia con él
04Fichas
Un origen de verdad, dos entregas. Las muestras de esta tabla están pintadas
con las variables reales: si alguien cambia un ficha, esta página cambia con él. Pulse la
luna de arriba y compruébelo.
ficha
muestra
valor claro
uso
--surf
#ffffff
Superficie principal · tarjetas, paneles, modales
--surf2
#f4f4f8
Superficie secundaria · riel, encabezados de tabla, campos
--surf3
#eeeef3
Estado de pulsación
--bg
#ebebf0
Fondo del documento · área entre paneles
--brd
rgba(0,0,0,.07)
Filetes internos
--brd2
rgba(0,0,0,.12)
Bordes de tarjeta y componente
--brd3
rgba(0,0,0,.22)
Borde en hover y foco
--ink
#09090f
Texto primario
--ink2
#2e2e42
Texto secundario
--ink3
#6b6b82
Texto terciario · rótulos · pistas
--ink4
#a8a8c0
Texto mínimo · eyebrows · marcador de posición
--red
#D0021B
Marca · primario · alerta crítica · destino activo
--green
#16a34a
Positivo · TC favorable · ganancia · cumplido
--amber
#d97706
Atención · vencimientos · campañas
--blue
#2563eb
Información accionable
--danger
#c01c1c
Error · bloqueo · sesión caída
04.1PortableOrigen · v4 + maestro, coincidentes
Nunca se escribe un color, un tamaño ni un espaciado directamente en el código. Si el ficha no existe, se reporta y se espera.
Verificación · 3 sep 2026
Los 16 fichas base del Design System v4 coinciden uno a uno con el :root de app.css de producción. 16 de 16.
Deuda abierta · mía
Las dos hojas escritas para la migración llevan 37 colores literales:
13 en reparto.css —los grises #525252 y #8d8d8d de
IBM que se están neutralizando, y varios #fff— y 24 en linea.css,
las sombras de pulso copiadas de Cash Market. Casi todos tokenizables. Pendiente.
04.2De este productoOrigen · maestro, literal
Modo oscuro: body.dk redefine solo superficies, tintas y bordes · la marca es invariante · interruptor luna/sol en la cabecera vía RC.theme · claro por omisión.
El Design System v4 declara modo claro universal para la otra superficie.
No hay conflicto: en Middle Market manda el maestro, y el maestro pide el
interruptor. Claro por omisión en ambos.
04.3PortableOrigen · esta migración
A un sistema externo no se le pelean los selectores: se le cambian sus fichas.
Sus reglas escriben fill:var(--cds-text-secondary, #525252).
Basta declarar ese ficha dentro del componente para que hable el idioma de la casa. Es su
propio mecanismo, no un parche, y sobrevive a sus actualizaciones.
Ejemplo verificado
Los rótulos del gráfico pasaron de #525252 peso 400 a --ink3 peso 700, y sus ejes de #8d8d8d y #e0e0e0 a --ink4 y --brd2, sin tocar una sola regla de Carbon.
05 · Rejilla y ejes
Las dieciséis columnas, sobre el portal que corre
Muestra viva del vendedor a 1440 px requiere la aplicación servida
1440 px · 16 columnas · medianil 32 · eje único en x = 109, donde también abre la marca
05Rejilla y ejes
Los cuatro puntos de quiebre no son elección nuestra: son los que publica la
rejilla 2x de Carbon, verificados en el archivo que servimos.
Nombre
desde
columnas
medianil
Small
20 rem · 320 px
4
0
Medium
42 rem · 672 px
8
16
Large
66 rem · 1056 px
16
16
X-Large
82 rem · 1312 px
16
16
Max
99 rem · 1584 px
16
24
Muestra viva · cambie el ancho de la ventana y cuente las divisiones
12345678910111213141516
05.1PortableOrigen · error propio, medido
Una rejilla da ejes y un vocabulario de anchos. No decide la composición.
Es la lección más cara de esta migración. Se le pidió a la rejilla que
pusiera tarjetas dibujadas para 480 px en 16 columnas, y obedeció: las estiró a 1300 y la
pantalla se leyó frágil. La rejilla no falló — hizo exactamente lo que se le pidió. Una
rejilla no puede inventar contenido para llenar un ancho.
Verificación · 3 sep 2026
El original dibuja sus bloques a 924 px en escritorio (.app 1040 · .wrap 980). Estirados a 1300 son un 41 % más anchos que la medida para la que fueron dibujados.
05.2PortableOrigen · diseño-ontikos, vía SCI
Un solo eje abre todo el contenido de la pantalla.
Marca, rótulos y contenido arrancan en la misma x. Es lo que hace
que nada flote.
Verificación
Medido a 1440 px: marca y primera columna de contenido, ambas en x = 109. Antes de la corrección, 77 contra 109.
05.3Portable
El reparto depende de la gramática, no del gusto.
Documento — una columna de bloques a todo el ancho útil; la rejilla
solo fija el eje y los medianiles. Terminal — la rejilla gobierna las columnas del armazón, no las tarjetas.
Emparejar bloques de a dos en la gramática de documento produce filas medio desiertas: un
contenedor que puede quedar vacío nunca se empareja.
06Tipografía
Dos familias, sin excepciones: DM Sans para todo lo que se lee y
JetBrains Mono para rótulos, cifras técnicas y fórmulas. La variedad viene del peso
(400–900) y del tamaño, no de más familias.
Muestra viva · escala de operador · alta densidad
.48–.5 rem · 800 eyebrow · columna
TC MEMBRESÍA
.58–.62 rem · 700 pista · fecha
Publicado 08:00 · 3 cajas
.72–.78 rem · 600–700 tabla · descripción
Ventanilla 1 · María Rodríguez
.82–.88 rem · 700–800 rótulo · botón
Publicar TC →
1.05–1.15 rem · 800–900 título de sección
Órdenes de tu cartera
1.35 rem+ · 900 título de pantalla
Hoy en la red
1.6–2.0 rem · 900 cifra rectora
16.6875
06.1PortableOrigen · v4 + maestro
font-variant-numeric: tabular-nums en todos los números financieros. Sin excepciones.
TC, montos, porcentajes en tabla, comisiones. Y alineación a la derecha en
columnas de valores. Sin cifras tabulares, una columna de números no se puede comparar de
un vistazo — que es justo para lo que existe.
Muestra viva · la misma columna, sin y con cifras tabulares
sin
18,000 226,80 9,500 1,872,500
con
18,000 226,80 9,500 1,872,500
07Estados y gestos
Todo lo que actúa cambia de color al pasar el cursor y al recibir el dedo.
Y —la otra mitad de la regla— lo que no actúa, no cambia.
07.1PortableOrigen · defecto propio, corregido
Los estados cuelgan de lo que de verdad actúa, no de la clase.
La misma clase puede servir a dos cosas distintas. En este producto,
.vd-oprow es la fila de Órdenes —que abre la operación— y también la de
«Últimas operaciones», que es inerte. Encender la clase entera le puso a una fila muerta
papel de botón, tabulación y anillo de foco: una promesa falsa.
Cómo se decide, verificable
Actúa si tiene gancho de datos (data-ord, data-cli, data-open, data-go), si tiene manejador onclick, o si la página le puso cursor:pointer. Lo que pasa la prueba queda marcado data-acc="1", y de ahí cuelgan hover y pulsación.
Muestra viva · pase el cursor y pulse · lo de arriba actúa, lo de abajo no
Vone X · $50,000 USD
02-sep · TC 16.8100 → precio 16.9800
›
Reyes · $30,000 USD
19-ago · fila de referencia, no abre nada
anillo rojo de 2 px, solo con teclado
Gesto
Qué cambia
valor
Cursor encima :hover
Fondo a la superficie siguiente · borde de campo a --brd3
--surf2
Dedo o clic :active
Fondo un paso más · los primarios bajan brillo
--surf3 · brightness(.86)
Foco de teclado :focus-visible
Anillo de la marca, nunca el azul del navegador
2px solid var(--red)
Objetivo de toque
Alto mínimo en punteros gruesos
44 px
Transición
Corta, para que el cambio se lea sin retrasar el toque
110 ms
Movimiento reducido
Se respeta siempre
prefers-reduced-motion
08Armazón
Las dos gramáticas, ahora con sus piezas nombradas y sus medidas.
Documento · teléfono
Región
medida
Regla
.appbar · barra superior
61 px
Marca, sello, reloj del TC, avisos, quién, salir. Se aprieta a 40 px por acción antes de tirar nada
.sa · área de scroll
flex:1
La única región que scrollea
.bnav · barra de pulgar
59–63 px
Icono y rótulo. Nunca hamburguesa
Ritmo entre bloques
4 · 10 · 18–22
Desigual a propósito: 4 entre un rótulo y su bloque, 10 entre hermanos, 18–22 entre grupos
Terminal · escritorio
Región
medida
Regla
Cabecera de instrumentos
52 px
Celdas de cifra separadas por filete de 1 px. La cifra rectora encabeza; un estado que impide operar no puede verse como una estadística
Riel de navegación
48 px · 220 expandido
Debajo de la cabecera, nunca compartiendo su fila. Destino activo con filete rojo
Raíl de señales
280–296 px
Fondo --surf2. Si está vacío, se colapsa
Columna de trabajo
flex:1
Scroll propio. Una acción primaria, abajo a la derecha
La autoridad del escritorio no son los wireframes: son las terminales que
el negocio usó de verdad.
Los wireframes nunca se trabajaron más allá del cajero, y ahí fueron
funcionales, no de diseño. La referencia real de RetiCash en escritorio es
Interactive Brokers y thinkorswim; en teléfono, Robinhood. El juego del
producto es que el cliente de cambio opere como opera un trader.
Lo que esas terminales hacen y hay que hacer:
· La barra queda limpia — IBKR pone dos cifras arriba, chicas y a la derecha, y las
otras once tras un galón que se despliega. thinkorswim pone once de golpe. Se descarta el camino de
thinkorswim: la densidad de las terminales viene del scalping, que necesita todo a la vista para
actuar por reflejo, y ése no es nuestro caso. Se toma la respuesta de Carbon, que coincide con el espíritu
de la de IB: cero cifras en la barra y cuatro tarjetas en el contenido, con el número en peso liviano.
Las siete celdas que llegamos a construir se retiran.
· El riel lleva rótulo — Portfolio · Watchlist · Quote · Screeners · Layouts · News en IBKR.
El icono nunca va solo.
· Un panel de contexto permanente — instrumento, precio y las dos acciones, a un cuarto del ancho.
No cambia al cambiar de pestaña. Es el hallazgo que más pesa, y es hoy
Ontikos 06 y Ontikos 16.
· Cada bloque es un panel con su barra de título.
· El número se colorea por signo, no por categoría.
Verificación · 4 sep 2026
Riel de 78 px con rótulo legible a 9,9 px —a 7,5 px el riel volvía a
ser de iconos, por debajo del piso de la escala—. Eje único mantenido: marca en 97 y
primera columna de contenido en 97. Celda de «Ganado mes» coloreada por signo.
08.2DerogadaOrigen · defecto visto al construirla
Una cifra promovida a la cabecera no se repite en la columna de trabajo.
Derogada el 4 de septiembre. Con la barra limpia no hay cifras promovidas, así que la regla se queda sin sujeto. Y su origen la condena: existía para tapar que la composición no sabía qué ya había puesto. Con la disposición declarada (el axioma de Ontikos) no se coloca dos veces la misma cifra, y no hace falta una regla que lo prohíba. Junto con ella caen el heurístico SENAL y plegarVacios(), por la misma razón.
Al poner las celdas, el TC y el «Ganado este mes» quedaron dos veces en
la misma pantalla: arriba en el tablero y abajo como tarjeta. En una terminal repetir una
cifra es ruido — el ojo la busca dos veces y no sabe cuál manda. Se retira del trabajo;
su contexto —vigencia, proyección, meta, comisión promedio— se queda.
Verificación · 4 sep 2026
Lo que llegó a medirse: vendedor en terminal, 7 celdas arriba,
y ni la tarjeta del TC ni el número grande de «Ganado» abajo. La medición era correcta; lo que ya no
existe es el reparto que la hacía necesaria.
08.1PortableOrigen · Carbon UI Shell + wireframes
La barra global cruza toda la pantalla; el riel arranca debajo; el contenido empieza donde termina el riel.
Es el orden del armazón de Carbon y coincide con el de los wireframes. El
riel no comparte la fila de la cabecera: así, al colapsarlo, la marca no se corta.
09Piezas
El catálogo. Cada pieza con su procedencia — de la casa, de Carbon o de Cash
Market — porque dentro de un año hay que poder saber por qué es como es.
Botones
Muestra viva · casa · sin radio en operador
Campos
Muestra viva · casa
Panel y cifras
Muestra viva · casa
Ritmo del negocio · mes
Volumen ejecutado220,000 USD
Esperado a la fecha184,615 USD
Meta del mes1,600,000 USD
Volumen
$220k
Operaciones
9
Alertas · los cuatro tonos
Muestra viva · casa · la idea del verbo, de Carbon
Sin sesión OPEN · abre caja para operar
Campaña «Referidos» vence en 16 días · 47 % de conversión
2,840 miembros a un referido del umbral
TC publicado · 3 cajas actualizadas
Insignias
Muestra viva · casa
ejecutadapor vencercanceladaespecialsin actividad
Vacío tipado
Muestra viva · casa · disco, título y subtítulo
No hay campañas activas
Cuando el negocio publique un bloque, lo ves aquí y puedes tomarlo.
09.1Portable
Un vacío no es una línea de texto: es una pieza con disco, título y una frase que dice qué lo llenará.
Y si el texto que trae la página es una frase larga, baja a subtítulo: en
peso 900 y 1,05 rem una oración de setenta caracteres se lee mal.
Verificación · 3 sep 2026
Portal del vendedor en producción: 3 vacíos presentes, 3 tipados. Cumple.
Línea de tiempo de una orden
Muestra viva · de Cash Market · pintada con carbon/linea.css de producción
Solicitada
Precio congelado
Cobrada en caja
Falta que tu cliente pase por caja
El precio queda congelado unos 14 min más, hasta las 14:32.
09.2Aplica Ontikos · procesoOrigen · Cash Market
El hito se llama distinto según quién mira, y el mensaje termina en un verbo.
Mismo recorrido, otras palabras: el vendedor lee «Cobrada en caja» y el
administrador «Ejecutada». Y el mensaje no dice el estado del sistema —«partial»— sino
qué toca hacer ahora.
La mitad portable de esta regla se fue. La forma, los cuatro estados, el plazo del hito
y el rótulo que cambia según el rol son hoy la pieza
Ontikos · proceso. Aquí se queda sólo lo que este
negocio le pone.
Lo que RetiCash declara sobre la pieza: Hitos, por rol — vendedor: Solicitada · Precio congelado · Cobrada en caja ·
administrador: Registrada · Precio congelado · Ejecutada. Tres hitos, no cuatro:
el compromiso de cambio no tiene un cuarto acto. Estados del negocio que mapean a los cuatro del sistema —
completed → cumplido · pending y partial → actual ·
expired, cancelled y no_show → fallido. Plazo — el precio congelado vence, y el hito lo muestra en minutos. Decoración que no viaja — el pulso del hito activo, el conector de 3 px y el color por
lado (compra o venta). Son de este producto y se quedan aquí.
09.3Deuda declaradaOrigen · consecuencia de generalizar la pieza
Hoy la línea de tiempo está implementada dos veces, y eso es una deuda, no una decisión.
carbon/linea.css es la que opera: pasó la operación real, viene de
Cash Market y es la que ven el vendedor y el administrador ahora mismo.
sistema/proceso.css es la pieza del sistema, generalizada y sin negocio.
Las dos dibujan lo mismo y no comparten una línea.
Se deja escrito porque es exactamente el mecanismo que permitió que la compuerta fuera falsa en un
documento y verdadera en el otro. Mientras las dos existan, el verificador lo marca en rojo.
Migración:linea.css pasa a ser un tema delgado sobre proceso.css —sus
hitos, sus palabras y su decoración— y deja de redibujar la pieza. Se hace cuando se construya el
escritorio, no antes: tocar hoy lo que opera sin necesidad viola «un archivo de producción a la vez» (12.1).
Verificación
Mientras existan las dos hojas,
verificar.py falla la comprobación «Pieza · proceso: una sola implementación».
Deja de fallar cuando linea.css no vuelva a declarar marca, conector ni estados.
Tabla
Muestra viva · casa · valores a la derecha, cifras tabulares
Misma casa, mismos fichas: entró sin traducir un color
Aviso con verbo
Idea de Carbon, pieza de la casa
La cláusula 3 en acción
10Datos
Cómo se muestran los números y cómo se dice el estado de un indicador.
Muestra viva · semáforos y veredicto de ritmo
Vas bien En ritmo Vas bajo
Regla
valor
Veredicto de ritmo · bajo
ritmo < .70 → rojo «Vas bajo»
Veredicto de ritmo · en curso
< .95 → ámbar «En ritmo»
Veredicto de ritmo · cumpliendo
≥ .95 → verde «Vas bien»
Números financieros
font-variant-numeric: tabular-nums · siempre
Columnas de valor
text-align: right
Cifra rectora
1.6–2.0 rem · peso 900
Tendencia
↑ verde / ↓ danger · .72–.82 rem peso 700
10.1Portable
El color semántico es independiente del acento de marca.
Verde, ámbar y rojo dicen estado. El rojo de marca dice acción y firma.
Que compartan tono no los hace lo mismo: un botón primario rojo no es una alerta.
11Lenguaje
La terminología es parte del diseño. Usar la palabra incorrecta rompe la
consistencia entre el producto, el documento y el código.
Vocabulario de interfaz contra nombre interno
En la interfaz
en el código
Nota
Límite
frontera
Nunca «Frontera» en rótulos visibles
Tipo de cambio
costo_fondeo
Nunca «Costo de fondeo» en la sección de TC
No-show
no_presentado
Regla
Los nombres internos —variables, campos, funciones— no se cambian al
actualizar el vocabulario de negocio. Cambiar la palabra visible es barato; cambiar el
campo rompe el código.
Cómo se escribe · operador
No
Por favor ingresa el monto de la operación
¡Operación completada exitosamente!
No se puede continuar en este momento
Sí
Monto USD *
Operación ejecutada · FXC-20260515-001
Sin sesión OPEN · abre caja para operar
Cómo se escribe · cliente
No
Tu tipo de cambio está bloqueado hasta las 12:00
Tienes puntos acumulados
Puedes ganar más si refieres amigos
Sí
TC bloqueado ahora · 19.85 garantizado hasta las 12:00
1,240 Pasos · ×1.5 Pro · ↑ 80 esta semana
Faltan 2 referidos para TCLock +1h permanente
11.1De este productoOrigen · maestro · decisión firme
Español formal y neutro. Prohibido cualquier mexicanismo o coloquialismo.
Estricto y no negociable. Aplica a interfaz, mensajes, documentación y
conversación de trabajo.
Deriva detectada · 3 sep 2026
El Design System v4 manda llamar «Pasos» al sistema de puntos —nunca
«puntos», «rewards» ni «coins»—. El portal del cliente de Middle Market dice «Puntos»
veintiséis veces y «Pasos» cero. Si esa regla alcanza a MM, es un cambio de copia
pendiente; si no, el v4 debe decir a qué superficie aplica.
12Implementación
Reglas de trabajo y validación obligatoria. Vienen del documento maestro y no
se relajan.
12.1PortableOrigen · maestro · decisión firme
Propuesta → aprobación → ejecución. Nunca ejecutar sin aprobación explícita.
Con dos corolarios: un archivo de producción a la vez, porque el
usuario prueba en vivo; y reconstruir todo lo existente al elevar una pantalla —
nada se omite.
Validación obligatoria antes de entregar
Qué
cómo
Criterio
PHP
php -l archivo.php
«No syntax errors»
JavaScript
node --check script.js
Sin errores
HTML
contar <div y </div>
Deben igualar
CSS
contar { y }
Deben igualar
Color
buscar #hex fuera de fichas
Cero
Despliegue
md5 local contra servidor
Idénticos
Lista de comprobación de una pantalla
¿Hay exactamente una acción primaria en cada estado?
¿Todo color sale de un ficha? ¿Ningún #hex suelto?
¿Los números financieros usan cifras tabulares?
¿Lo que cambia de color al pasar el cursor hace algo de verdad?
¿Cada región declara su propio scroll?
¿El vacío está tipado, con disco, título y frase?
¿La pantalla se lee en las dos gramáticas: teléfono y escritorio?
¿El estado bloqueante se ve distinto de una estadística?
¿El vocabulario coincide con la sección 11?
13Pantallas
El puente entre la ontología y las piezas. Cada pantalla se declara por su
verbo: qué acto del negocio habilita. De ahí salen su acción primaria, sus señales y
el estado que la bloquea — no al revés.
13.1PortableOrigen · demo index · diseño ontológico aplicado
Una pantalla se declara con cinco casillas, y ninguna puede quedar vacía.
Verbo — el acto del negocio que habilita. Pregunta — la que responde de un vistazo. Acción primaria — una, y solo una. Señales — lo que condiciona esa acción. Bloqueo — el estado que la impide, y que debe verse.
Si una pantalla no puede llenar la casilla del verbo, no es una pantalla: es un informe,
y va dentro de otra.
Middle Market · las pantallas que operan
Pantalla
Verbo
Acción primaria
Señales
Bloqueo
Admin · Resumen
—
ninguna · es lectura
Ritmo del mes · avisos · ranking
—
Admin · Operación
CancelarOrden MarcarNoShow
Cancelar operación
Estado de la orden · pagado contra registrado · quién la tomó
Orden ya cerrada · cancelar con pagos exige rol de sistema
Admin · Dinero
RegistrarMovimiento CerrarDía
Cerrar día
Inventario por centro · cuentas por pagar · turnos abiertos
Turno abierto sin cuadrar
Admin · Clientes
AltaCliente ReasignarVendedor
Dar de alta
Sin sobreprecio asignado · sin operar este mes
Reasignar exige rol de sistema
Admin · Config
PublicarTC FijarMetas
Publicar TC
Costo del día · pisos · competencia · cajas activas
TC sin publicar bloquea a los vendedores
Vendedor · Resumen
—
ninguna · es lectura
TC vigente · ganado del mes · avisos · puesto
—
Vendedor · Órdenes
VerOrden
ninguna · es consulta
Vivas por vencer · el reloj de cada una
—
Vendedor · Clientes
RegistrarOrden SolicitarEmergencia
Solicitar operación de emergencia
Clientes sin sobreprecio · los que no operan este mes
Sin TC publicado no se puede registrar
Vendedor · Campañas
PedirPrecioEspecial
Pedir un precio especial
Campañas activas del negocio · estado de tus solicitudes
—
Vendedor · Perfil
CambiarClave
ninguna · es lectura
Comisión del mes · meta · histórico
—
Caja
AbrirSesión EjecutarFX CerrarSesión
Ejecutar
Cola de órdenes · inventario declarado · reloj de cada orden
Sin sesión abierta no se opera
Cliente
RegistrarOrden
Registrar mi orden
TC vigente · su nivel · lo que dejó de ganar
Sin TC publicado no hay precio
Lo que esta tabla destapa
Tres pantallas del vendedor —Resumen, Órdenes y Perfil— no tienen
verbo: son lectura pura. Por la regla 13.1 eso no las invalida, pero sí obliga a
decidir: o se les da el acto que les falta —registrar una orden desde el Resumen, por
ejemplo— o se aceptan como informes y dejan de competir por ser destino de primer nivel.
Es una decisión de producto, y está abierta.
13.2PortableOrigen · v4 · gate de sesión
El bloqueo no es un aviso: es una compuerta.
Cuando el estado impide operar —caja sin sesión abierta, TC sin
publicar— la pantalla no muestra un banner y deja los controles vivos. Cubre la
pantalla y ofrece el acto que desbloquea. Un control que no va a funcionar no debe
poder tocarse.
Estado en este producto · 4 sep 2026
En caja.html no se encontró una compuerta bloqueante: hay una sola
mención de sesión y ningún elemento fijo que cubra la pantalla. Pendiente.
14Verificación
Los chequeos que sostienen las reglas de este documento, con su última
ejecución. Se vuelven a correr contra producción cuando haga falta, y este es el mecanismo
que impide que el sistema derive.
Qué comprueba
Última ejecución
Resultado
Fichas base contra el :root de producción
4 sep 2026
✓ 16 de 16 coinciden
Radio en piezas de operador
4 sep 2026
✗ 4 fuera de norma · .modal 16px · .modal 4px · .ord-empty 18px · .ubtn 7px
Colores literales en las hojas propias
4 sep 2026
✓ cero
Modo oscuro: fichas de Carbon mapeados
4 sep 2026
✓ 43 fichas de Carbon redeclarados bajo body.dk
Terminología «puntos» contra «Pasos» en el cliente
4 sep 2026
✗ «puntos» 26 · «Pasos» 6 en el portal del cliente
Etiquetas equilibradas en las páginas generadas
4 sep 2026
✓ equilibrados
Paquete al día con las páginas
4 sep 2026
✓ al día
Despliegue: local contra servidor
4 sep 2026
✓ 7 de 7 idénticos
Una acción primaria por pantalla navegador
3 sep 2026
Cumple · vendedor 0·0·0·1·0 · admin 0·1·0·0·0
Vacíos tipados navegador
3 sep 2026
3 de 3 en el portal del vendedor
Regiones con scroll propio navegador
3 sep 2026
Vendedor: solo .sa · admin en escritorio: ninguna
Contraste de texto en modo oscuro navegador
3 sep 2026
0 textos bajo 3:1 en original y en Carbon
Original contra Carbon, clase por clase navegador
3 sep 2026
157 clases · 156 idénticas en 375 y en 1440
Eje de la marca contra el eje del contenido navegador
3 sep 2026
ambos en x = 109 a 1440 px
Terminal · composición y reversibilidad navegador
4 sep 2026
1440: 7 celdas · raíl 296 · trabajo 1094 con scroll propio · barra de estado. 375: sin terminal, 12 columnas en la rejilla. Reversible
13.1Portable
Un documento de sistema que no se puede correr contra el producto es una foto, no un contrato.
Cada fila de la tabla de arriba es una comprobación mecánica sobre el
código que sirve producción. Cuando una da distinto, o cambió el producto —y hay que
arreglarlo— o cambió la regla —y hay que escribirla—. Nunca queda en «se ve raro».
Estado del propio documento · 3 sep 2026
De 25 reglas, 13 traen verificación y 3 llevan la marca de
propuesta por describir un armazón que aún no existe. Las 9 restantes son
verificables y todavía no tienen su comprobación escrita: es la primera deuda a pagar, y
está aquí para que no se olvide.