Packs de interfaz
Amberterm Interfaz de tienda
12 elementos de tienda y economía (terminal) para interfaces de tema oscuro — paleta negro cálido, acento ámbar de CRT. SVG y PNG transparente en 1x/2x/4x.

Sobre este pack
Amberterm Interfaz de tienda es un conjunto de 12 elementos de tienda y economía dibujados en estilo terminal, donde hay un solo tono en seis niveles y nada más — un tubo de fósforo no tiene un segundo color. Contiene cuatro estados de fila de compra, una pestaña de categoría activa y otra inactiva, una tira de monedero, un selector de cantidad, una tira de confirmación de compra y tres indicadores de existencias contables.
Una pantalla de tienda tiene una tarea que una de inventario nunca tiene: decir qué no se puede pagar antes de pulsar el botón. La mayoría de los sets gratuitos lo resuelven poniendo el precio en rojo, algo que falla con quien no puede leer ese rojo y vuelve a fallar en una captura en escala de grises. Además choca con el color de vida que ya usa el resto de la interfaz.
Todo el conjunto está construido con un solo matiz, incluidos el trazo y las marcas, porque un fósforo o un CRT ámbar no puede mostrar físicamente un segundo. El halo es una pila de trazos de opacidad decreciente, que es a lo que se parece el bloom de un tubo real y lo que un filtro de desenfoque hace mal a 4x.
Dentro de ese estilo, esta es la lectura de Amberterm: una interfaz de tema oscuro sobre una paleta negro cálido con acentos en ámbar de CRT, construida en torno a un marco de borde único, botones biselados de 128x46, barras de núcleo hueco divididas en 7 segmentos e iconos a dos tintas sobre una rejilla de 32px. Esas medidas son la razón por la que dos familias pueden compartir un estilo artístico sin ser intercambiables: el estilo decide cómo se dibuja un borde, los números deciden para qué sirve la interfaz.
Los cuatro estados de fila se distinguen por estructura y no por color. La fila asequible lleva una franja continua en el borde izquierdo, la inasequible lleva una franja discontinua y una barra que tacha su campo de precio, y la ya comprada cierra ese campo y marca su esquina superior derecha. Eso hace que el estado sobreviva a un tinte, a un filtro de daltonismo y a una captura sin saturación. El indicador de existencias es contable por lo mismo: cinco puntos, un punto y ninguno se leen como lleno, escaso y agotado sin una sola palabra ni un solo color.
Cada sprite viene como SVG editable y como PNG transparente en 1x, 2x y 4x, así que puedes soltar los PNG directamente en un motor o abrir el vector y cambiar un color. Dibujado con las mismas medidas que el resto de la familia Amberterm, lo que significa que este kit y el kit de paneles de Amberterm encajan sin redimensionar ninguno. Encaja bien en terminales, consolas e interfaces de informática retro.
Descarga
Enlace directo · sin registro · sin página de esperaConjunto completo — fuentes SVG, exportados PNG en 1x/2x/4x, licencia y readme
Cómo se usa
- Aplica el nine-slice a las filas en sus zonas rectas izquierda y derecha; el campo de precio de la derecha tiene ancho fijo, así que un nombre largo nunca lo saca de sitio.
- Para lo que no se puede pagar usa la franja discontinua y el precio tachado en lugar de un tinte rojo. Ambos son patrón y no color, así que aguantan en escala de grises.
- Coloca los puntos de existencias en el mismo lugar que usa cada fila y contrólalos por cantidad y no por color.
- La tira de confirmación y el selector de cantidad comparten altura, así que una tienda puede ponerlos en la misma línea sin redimensionar ninguno.
Licencia
Creative Commons Atribución 4.0 — Gratis para uso comercial. Atribución obligatoria. Términos completos · Qué significa en la práctica
"Amberterm Interfaz de tienda" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/amberterm-shop-ui


