Recibir
Nueva operación entrante
Software de gestión para financieras y mesas de cambio. La plata que gira entre cuentas, bajo control absoluto.
Qué es Giral, cómo piensa y cómo habla — antes de cualquier píxel.
«Dinero giral» es el término técnico de la economía para el dinero que vive en cuentas y se mueve por giros — a diferencia del físico. Es exactamente lo que este software administra. Quien es del rubro lo reconoce; quien no, lee una marca corta y segura.
Los números cierran siempre. La marca nunca exagera, nunca promete de más y nunca usa signos de exclamación.
Opera en un mundo donde la palabra vale y el perfil es bajo. Giral no grita: funciona.
Estética de terminal financiera: datos en monoespaciada, un solo acento frío, geometría de trazos rectos.
Trato de «vos», registro profesional. Afirmaciones cortas con verbos del rubro. Los errores dicen qué pasó y cómo seguir, sin disculpas teatrales.
Una flecha que atraviesa el nombre: la barra de la G se proyecta y su punta se vuelve el punto de la i.
| La G | Apoya en la línea de base junto al resto de las letras, en escala mayor (1.39× la altura de la ele). Anillo de trazo constante 8u. |
|---|---|
| La punta | Triángulo sólido de espalda plana, siempre en la línea de la barra. Es, a la vez, el punto de la i. |
| Espaciado | 5.3u entre todos los cuerpos — incluida la G y el palo de la i. Es el ritmo interno natural de Outfit. |
| Zona de seguridad | El ancho de la barra (8u) libre en todo el perímetro. |
| Tamaños mínimos | Logotipo 22px · isotipo 16px · impresión 7mm / 5mm. |
Tinta, hielo y plata. Un solo acento, dos modos, y el semántico solo para estados de datos.
Los dos modos comparten estructura y solo intercambian tokens. Este manual es la demo: usá el botón ☾/☀ de arriba a la derecha.
| Token | claro · #F3F6FA oscuro · #0A0F16 — fondo |
|---|---|
| Superficie | #FFFFFF #101724 — paneles y cajas |
| Texto | #101A26 #E8EEF6 — principal |
| Acento | #2F7BD6 #6FB7FF — links, foco, interacción (el claro usa el azul profundo por contraste AA) |
| Regla dura | Ningún color se define solo en un modo: todo componente toma sus colores de los tokens, nunca de literales. |
Outfit para hablar, Geist Mono para contar. Nada más.
Geométrica moderna — la misma del logotipo. Títulos, interfaz y texto corrido.
Todo número que representa dinero, cotización, fecha u hora. Siempre con cifras tabulares.
system-ui y ui-monospace.Las reglas que las pantallas de Giral cumplen siempre: cómo se enmarca una pantalla, cómo se escriben los números, cómo se actúa y cómo se muestran los datos.
Toda pantalla de Giral abre con el mismo encabezado y respeta los mismos anchos. El usuario nunca se desorienta: aprende la estructura una vez.
| Eyebrow | Contexto en mono, mayúsculas, azul: TESORERÍA · POSICIÓN. Ubica la pantalla dentro del módulo. |
|---|---|
| Tile del ícono | 52px, radio 15. En reposo: superficie neutra + ícono azul. Al hover se rellena de azul (misma interacción que la caja Giral) y el ícono pasa a blanco. |
| Título / subtítulo | Título bold; subtítulo en una línea, tono apagado. Nunca dos renglones de subtítulo. |
| Zona de acciones | Una sola acción primaria (azul pleno), el resto secundarias (contorno). Nunca dos primarias en la misma pantalla. |
Un solo sistema de contenedores. El contenido nunca toca los bordes y el texto nunca supera el ancho de lectura cómoda.
| Contenedor | Máximo 1080px, centrado, con 24px de margen lateral (16px en móvil). Ningún bloque se pega al borde. |
|---|---|
| Lectura | Los párrafos se acotan a ~660px: líneas legibles, nunca de lado a lado. |
| Tablas anchas | Scroll horizontal dentro de su propia caja (overflow-x:auto). La página nunca scrollea de costado. |
| Breakpoints | Grillas colapsan a fila única ≤640px; el encabezado apila acciones debajo del título en móvil. |
| Decimales | Coma decimal, punto de miles: 1.318,50. Misma cantidad de decimales por columna. |
|---|---|
| Signo y moneda | Signo explícito en movimientos y moneda siempre visible: + USD 25.000,00 · − ARS 12.450.000,00 |
| Fechas | DD/MM/AAAA · rangos 08/08 — 31/08 · períodos Agosto 2026 · con hora 30/08/2026 · 14:32 |
| Alineación | Números a la derecha, texto a la izquierda, estados con badge. Nunca centrar montos. |
Una jerarquía clara de acción: un solo botón primario por pantalla, el resto en descenso. La interacción de firma es la caja que se llena de azul — sin degradés ajenos, sin rebotes — cubic-bezier(.4,0,.2,1) · 300ms.
| Primario | La acción principal, una por pantalla. Azul pleno (#2F7BD6), levanta al hover. Ej.: «Nueva operación», «Confirmar acreditación». |
|---|---|
| Botón caja | CTA destacado que se rellena de azul al pasar. La interacción de firma de Giral. |
| Secundario | Acción alternativa. Contorno, texto azul. Ej.: «Exportar». |
| Terciario | Bajo peso (cancelar, «ver más»). Sin fondo hasta el hover. |
| Destructivo | Borrar o acciones irreversibles. Rojo pleno, siempre con confirmación (ver Popup Giral). |
flex-wrap + flex-basis + min-width): nunca quedan huecos en la última fila.Un solo desplegable en todo Giral, con buscador incorporado. Nunca el <select> nativo del navegador: siempre el componente de marca, con tokens y foco propios.
Variante especializada para elegir una contraparte (Operaciones, Movimientos, Transferencias). El diferencial: tipeás #12 y filtra por el número único del contacto. Abre en portal, se ubica solo arriba o abajo y crece hasta el 70% de la pantalla.
Toda casilla de verificación de Giral es redonda y se rellena de azul al marcar — las mismas del modo de selección múltiple. Nunca el checkbox nativo.
| Desplegable | Selector único con buscador automático (>7 opciones), en portal, con tokens de marca. El default de toda la app. |
|---|---|
| Múltiple | Selección múltiple con chips removibles. |
| Contraparte | El buscador por #número se reserva para el picker de contactos. Es la única variante especializada. |
| Montos | Campo de dinero con formato de miles y decimales por moneda, y la moneda siempre a la izquierda: USD 25.000,00 |
| Prohibido | Nunca <select> ni type="date" nativos: rompen la coherencia visual entre navegadores. |
| Operación | Contraparte | Monto | TC | Estado |
|---|---|---|---|---|
| OP-04182 | Cambial SRL | + USD 25.000,00 | 1.318,50 | Acreditado |
| OP-04183 | MG Valores | − ARS 12.450.000,00 | — | Pendiente |
| OP-04184 | Tesoro propio | + USDT 18.300,00 | 1.021,75 | Acreditado |
Semántica financiera fija: compra = verde, venta = rojo, neutral = plata. Coherente con los tokens de la sección Color.
Nunca alert() ni confirm() del navegador. Un solo esqueleto para todos los avisos —encabezado de marca, cuerpo scrolleable y pie con la acción— que cambia de tono según su tipo. Tocá un tipo para verlo en vivo.
| Esqueleto | Encabezado (tile + badge + título + intro) → cuerpo scrolleable → pie con la acción primaria. El mismo para todos los tipos. |
|---|---|
| Tipo | Cambia el tinte del encabezado, el ícono y el badge: Novedad azul · Alerta ámbar · Éxito verde · Error rojo · Info azul profundo. El esqueleto no cambia. |
| Fondo | Backdrop oscuro con blur y 16px de margen: el popup nunca toca los bordes de la pantalla. |
| Alto | max-height: 90dvh (dvh, no vh) para achicarse con el teclado en móvil, más safe-area en equipos con notch. El cuerpo scrollea; el pie queda fijo. |
| Ancho | 520px de máximo, centrado. Cierra con la ✕, tocando afuera o con Esc. |
Las cajas de acción: un tile con ícono + el nombre de la acción + su descripción. Llevan la interacción de la caja Giral y viven en la grilla elástica.
| Sí | Grupos de 2 o más acciones a nivel pantalla o entidad. La última fila llena el ancho (grilla elástica). |
|---|---|
| No | Botones de popup (Guardar / Cancelar), submits, tabs, filtros o acciones inline de fila — ahí va un botón común. |
Giral no deja un hueco en blanco: acompaña con calma y propone el paso siguiente, en la voz de la marca — sin culpa y sin festejos.
| Título | La familia «Sin {cosa}»: Sin operaciones, Sin cheques en custodia, Sin pendientes de conciliar. |
|---|---|
| Texto | Una línea, en calma, sin culpar al usuario. Explica qué falta y por qué conviene cargarlo. |
| Acción | Un CTA en voseo hacia el primer paso: «Nueva…», «Cargá…», «Empezá…». |
| Tono | Nunca exclamaciones ni emojis. El vacío es un estado normal, no un error. |
Los gráficos de Giral se leen de un vistazo: paleta de series derivada del azul de marca, sin adornos, con la misma semántica que el resto del sistema.
| Categórico | La paleta de arriba, en orden. Los azules primero (los de marca). |
|---|---|
| Secuencial | Una sola tinta azul, de clara a oscura, para intensidad o densidad. |
| Semántico $ | positivo / acreditado = verde · negativo / rechazado = rojo (igual que los badges). |
| Cifras | Siempre tabular-nums, con miles y decimales por moneda. |
| Estilo | Ejes y grilla en plata suave. Sin 3D, sin sombras, sin degradés dentro de las barras. |
El protagonista es el dato. La pantalla de Giral siempre puede leerse como una terminal: exacta, alineada, sin ruido.
El kit completo, listo para usar.
