Sistema de diseño
Todo lo que hay acá sale de docs/06-identidad.md. Es la fuente de verdad: si algo de esta página no coincide con el documento, el que está mal es el código.
§6
Temática de la noche
La marca es el pájaro, y el pájaro es amarillo. La temática cambia el NOMBRE de la noche, no el color: el acento es siempre amarillo Papagoonia. No toca los estados, ni los fondos, ni el texto, ni Papagoonia OS.
Cara al cliente
Sábado Papagoonia
§3.4
Estados del pedido — inmutables
Los mismos cinco colores en la app, la carta QR, el KDS, el mozo y la caja. Color + icono + palabra, siempre. Nunca solo color.
Cara al cliente · sobre #15111D
Papagoonia OS · sobre #191D24 · tamaño KDS
Recibido
Llegó, nadie lo tomó todavía
--st-recibido
En preparación
Alguien lo está haciendo
--st-preparacion
Listo
Salió — dispara el buzzer
--st-listo
Entregado
Cerrado, ya no exige atención
--st-entregado
Anulado
Anulado con motivo y autor
--st-anulado
§3.1–3.3
Paleta
Dos superficies separadas a propósito: la del cliente es violeta profundo, la del OS es gris frío. Son caras distintas del mismo producto.
Neutros · cara al cliente
Noche
--pg-noche · #0D0A13
Fondo base
Panel
--pg-panel · #15111D
Tarjetas, hojas
Elevada
--pg-elevada · #1E1829
Modales
Borde
--pg-borde · #2E2540
Bordes y separadores
Texto
--pg-texto · #F5F2FA
Principal · 17.7:1 AAA
Texto 2
--pg-texto-2 · #B9B2C9
Secundario · 9.6:1 AAA
Texto 3
--pg-texto-3 · #8A8399
Terciario · 5.4:1 AA
Neutros · Papagoonia OS
Fondo
--os-bg · #0F1115
Panel y KDS
Superficie
--os-surface · #191D24
Ticket, fila de tabla
Superficie 2
--os-surface-2 · #212730
Hover, seleccionada
Borde
--os-borde · #333B47
Bordes
Texto
--os-texto · #F5F2FA
Principal · 17.1:1 AAA
Texto 2
--os-texto-2 · #B9B2C9
Secundario · 9.3:1 AAA
Texto 3
--os-texto-3 · #8A8399
Terciario · 5.2:1 AA
Plumaje · acentos de marca
Se usan de a uno por pantalla. El arcoíris completo solo en el logo. Sobre relleno sólido el texto va #0D0A13, nunca blanco.
Verde loro
--pg-verde-loro · #3BE68F
Acento primario · 12.1:1
Amarillo pico
--pg-amarillo-pico · #F8E000
Acento de marca · 14.3:1
Turquesa
--pg-turquesa · #42D6EE
Info, enlaces · 11.3:1
Coral
--pg-coral · #FF6B5E
Alertas, flash · 7.0:1
Fucsia
--pg-fucsia · #F55CA8
Eventos, shows · 6.5:1
Lila
--pg-lila · #A78BFA
Club, credencial · 7.2:1
§4
Tipografías
Bricolage Grotesque para display, Inter para texto y operación. Autohospedadas con next/font. No hay una tercera familia.
Escala · cara al cliente
display · 40 / 44 · Bricolage 800
Trucha del Nahuel — $18.400
titulo · 28 / 34 · Bricolage 700
Trucha del Nahuel — $18.400
seccion · 20 / 26 · Bricolage 600
Trucha del Nahuel — $18.400
cuerpo · 16 / 24 · Inter 400
Trucha del Nahuel — $18.400
cuerpo-fuerte · 16 / 24 · Inter 600
Trucha del Nahuel — $18.400
chico · 14 / 20 · Inter 400
Trucha del Nahuel — $18.400
micro · 12 / 16 · Inter 500
Trucha del Nahuel — $18.400
precio · 18 / 22 · Inter 600 tabular
Trucha del Nahuel — $18.400
Escala · Papagoonia OS · nada por debajo de 13px, nunca
kds-mesa · 32 / 36 · Inter 700
Mesa 7 · 3 ítems · 4 min
kds-item · 22 / 28 · Inter 600
Mesa 7 · 3 ítems · 4 min
kds-mod · 18 / 24 · Inter 400
Mesa 7 · 3 ítems · 4 min
kds-timer · 20 / 24 · Inter 700 tabular
Mesa 7 · 3 ítems · 4 min
os-cuerpo · 16 / 22 · Inter 400
Mesa 7 · 3 ítems · 4 min
os-micro · 13 / 18 · Inter 500
Mesa 7 · 3 ítems · 4 min
§5
Espaciado, radios y objetivos táctiles
Grilla de 4. Táctil mínimo: 44px en la cara al cliente, 56px en Papagoonia OS.
UI
Botón
Variantes y tamaños. `os` = 56px de alto.
UI
Tarjeta
Cara al cliente
Fondo panel, borde violeta. Aireada.
Papagoonia OS
Fondo frío, densa, sin decoración.
Elevada · un nivel más de superficie
Interactiva · toda la tarjeta clickea
UI
Campo de formulario
El error dice qué hacer, no qué falló.
Va sin puntos ni signo.
Falta el precio. Ponele un número aunque después lo cambies.
UI
Modal y avisos
Mesa 12 pidió la cuenta.
Salió. Pasá a buscarlo por la barra.
Se acabó. Pasa cuando algo está bueno.
No entró el pago. Probá de nuevo o pedile al cajero.
U10
Estado vacío
Ninguna pantalla vacía sin salida. Explica qué es, para qué sirve, y tiene UNA acción primaria.
Todavía no hay nada en la carta.
Podés cargar el primer plato a mano o traer la carta completa de una.
Todo tranquilo.
No hay nada para resolver.
Regla 3
Indicador de conexión
Cuando hay conexión no muestra nada: un cartel verde permanente es ruido. Cuando se cae, avisa que lo que hagas puede no llegar.
§3.5
Buzzer visual
Pantalla completa, verde sólido, número ≥160px en Bricolage 800 sobre #0D0A13. Pulso de opacidad, nunca parpadeo duro. Acá va en miniatura.